ファイルの移動について
解凍したフォルダ内のファイル構成を変えると動かなくなります。 移動する際は必ず「フォルダごと」移動してください。
heart.htmlを、そのままOBSの画面上にドラッグ＆ドロップします。1920/高さ1080）このツールは、OBSのプロパティ内にある**「カスタムCSS」**にテキストを追記することで、細かくデザインを変更できます。
ベースの設定コードを追加する
OBSのソース一覧からheart.htmlをダブルクリックしてプロパティを開き、一番下にある**「カスタムCSS」**の欄に、以下のコードをすべてコピー＆ペーストしてください。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
:root {
--use-hearts: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11;
--heart-num: 200;
--view-x: 0;
--view-y: 0;
--offset-x: 0;
--offset-y: 0;
--rand-x1: 50px;
--rand-y1: 30px;
--rand-x2: 40px;
--rand-y2: -70px;
--rand-x3: 70px;
--rand-y3: 20px;
}
*{opacity: 1.0}
コードを書き換えてカスタマイズする
追加したコードの数値を書き換えることで、様々な変更が可能です。
--use-hearts （表示するハートの種類）
表示したいハートの画像ファイル（imgフォルダ内の1～11）の番号をカンマ区切りで指定します。使わない番号は消してください（例： 1と3だけ使いたい場合は1, 3と入力）
--heart-num （ハートの数）
画面に表示されるハートの合計数です。（※大きくしすぎるとPCとOBSが重くなるのでご注意ください）
--view-x /--view-y （ハートを表示しないエリアのサイズ）
配信画面などが隠れないように、ハートが表示を避ける領域「穴（楕円）」のサイズ（半径）を調整します。
基本的には300や500などの好きな数字（ピクセル）を入力して、穴の広さを調整してください。
特殊な設定の数字 普通の数字の代わりに以下の「特別な数字」を入力すると記述どおりの設定となります。
0 ： デフォルト設定（画面いっぱいの大きな楕円エリアが非表示になります）。1 ： 画面全体にエリア関係なくハートが表示されます。（※画面サイズをオーバーする数値を設定した場合は自動的に画面サイズ内に収まるように調整されます。）
--offset-x /--offset-y （非表示エリアの中心の移動）
ハートが避ける「穴」の位置をずらします。
x軸 ： プラスで右へ、マイナスで左へ移動。y軸 ： プラスで下へ、マイナスで上へ移動。--rand-x1 ～--rand-y3 （アニメーションの動き幅）
ハートが漂う距離のパターン（3種類）を設定します。数字（px）を大きくするとハートが広範囲に大きく動くようになります。 各ハートは、この3パターンの中から「X軸の動き」と「Y軸の動き」をランダムに組み合わせて浮遊します。
opacity （全体の透明度）
一番下の* {opacity: 1.0} の数字を変えます。0.0 （完全に透明）～1.0 （不透明）の間で調整でき、少し薄くしたい時などに便利です。
背景が透明にならず、真っ暗（または真っ白）になる
OBSに追加したソースをダブルクリックしてプロパティを開き、「カスタムCSS」欄の一番下に以下のテキストを追加して「OK」を押してください。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }