チャットCSSジェネレーター

🎥 OBSでの使い方（Twitch）

1. 右の 「Twitch チャンネル名」 に自分のチャンネル名を入れて、ポップアウトチャットのURLをコピーします。
2. OBSで ソース ＋ → ブラウザ を追加し、URLに貼り付けます。幅 400・高さ 600〜1000 くらいが目安です。
3. このページで見た目を決めて 「CSSをコピー」。
4. ブラウザソースのプロパティにある カスタムCSS の中身をすべて消して、コピーしたCSSを貼り付けて「OK」。

◆ Twitch版について

• Twitch公式のチャット欄にCSSを当てるので、チャンネル独自のサブスクバッジやエモートもそのまま表示されます。
• Twitchのチャット欄にはアイコンが無いため、「アイコン」の設定はありません。Bitsは通常のコメントとして表示されます。
• 配信者・モデレーター・サブスク/VIPの色分けは、バッジの名前（日本語・英語）から判定しています。新しめのOBSが必要です。

🎥 OBSでの使い方（YouTube）

1. 右の「🔗 チャット欄のURL」に配信のURLを入れて、チャット欄のURL（ポップアウト版）を作ります。
2. OBSで ソース ＋ → ブラウザ を追加し、URLに貼り付けます。幅 400・高さ 600〜1000 くらいが目安です。
3. このページで見た目を決めて 「CSSをコピー」。
4. ブラウザソースのプロパティにある カスタムCSS の中身をすべて消して、コピーしたCSSを貼り付けて「OK」。

❤️ リアクションの表示（YouTube）

• 視聴者が送るハートなどのリアクションを、チャット欄に重ねたり、画面の好きな位置に大きく出したりできます（「リアクション」の設定）。
• リアクションだけ表示：OBSで2つ目のブラウザソースを作り、同じチャット欄のURLを入れて、幅 1920・高さ 1080 にします。カスタムCSSには「リアクション用CSS」を貼ります。
• リアクションは、配信者がリアクションをオンにしている配信でだけ表示されます。YouTubeにログインしていないブラウザソースでは表示されないことがあります。

💡 ヒント・注意点

• 設定はこのブラウザに自動で保存されます。別のPCで使うときは「設定をファイルに保存」→「ファイルから復元」。
• フェードアウトを使うと、一定時間経ったコメントが自然に消えます。ゲーム画面の上に重ねるときにおすすめ。
• YouTube・Twitch側の仕様変更で、一部の見た目が反映されなくなることがあります。
• 「手動で指定」のフォントは、配信するPCにインストールされている必要があります。