Social Stream Ninja + OBS でライブチャット CSS を使う方法（手順つき）

Social Stream Ninja（SSN）は、YouTube・Twitch・TikTok など120以上のプラットフォームのチャットを1つのブラウザソースにまとめられます。Doodlekuma の Social Stream 版 CSS を使うには、OBS で SSN の Main chat overlay & control dock を読み込み、そこに CSS を貼り付けます——YouTube のネイティブなポップアウトチャットではありません。

公式サイト：socialstream.ninja

📺 動画のほうがよい方へ YouTube で 「Social Stream Ninja」 を検索するか、まずはこちらから：

• Creating custom chat overlays for Social Stream Ninja
• How to Set Up Social Stream Ninja (Standalone App) — Full Step-by-Step Guide

必要なもの

1. OBS Studio（または Streamlabs OBS）。
2. 公式手順に沿ってセットアップした Social Stream Ninja。
3. SSN に接続したチャットプラットフォーム（例：YouTube Live）。
4. Doodlekuma ライブチャットギャラリー からダウンロードした Social Stream 版 CSS。

Social Stream 版と YouTube 版 — 正しいほうを選ぶ

Doodlekuma のテーマは通常、2種類の CSS を用意しています：

• Social Stream — SSN の Main chat overlay & control dock 用（このガイド）。機能が最も豊富なオーバーレイで、より多くのメッセージ種別をスタイルできます。
• YouTube — YouTube のネイティブなポップアウトチャット用（yt-live-chat-… の DOM）。

DOM 構造が異なるため、互換性はありません。以下の手順では Social Stream 版 をダウンロードしてください。

ステップ1 — Social Stream Ninja でオーバーレイ URL をコピー

1. Social Stream Ninja を開き、Sources and Settings に移動します。プラットフォーム（例：あなたの YouTube チャンネル）を追加し、実際のメッセージが流れる状態にします。
2. 右側パネルの上部にある Main chat overlay & control dock を見つけます。機能が最も豊富なオーバーレイで、Doodlekuma の CSS はこれ向けに作られています。
3. 右上の [copy link] ボタンでその URL をコピーします。https://socialstream.ninja/dock.html?session=XXXXXXXX のような形式です。

この URL は次のステップで OBS が読み込むものなので控えておきます。

ステップ2 — OBS にブラウザソースを追加して CSS を貼り付け

1. OBS の ソース（Sources） で + をクリックし、ブラウザ（Browser） を選びます。
2. ステップ1の Social Stream Ninja の URL を URL 欄に貼り付けます。
3. 幅 1920・高さ 1080 に設定します（またはレイアウトに合わせて）。
4. Doodlekuma の Social Stream CSS を Custom CSS ボックスに貼り付けます。
5. OK をクリック。スタイル付きのライブチャットがブラウザソースに表示されます。

CSS の入手先

Doodlekuma ライブチャットギャラリー を開き、テーマを選んで Social Stream 版をダウンロードします。.css ファイルを開いて全文をコピーし、ステップ2の OBS Custom CSS に貼り付けます。カスタマイザーで調整したら再ダウンロードしてください。

トラブルシューティング

スタイルが適用されない

Social Stream 版をダウンロードしたか、そして OBS の URL が SSN の dock.html（Main chat overlay & control dock、YouTube の live_chat URL ではない）かを確認します。

何も表示されない

CSS を追加する前に、Social Stream Ninja 内で実際のメッセージが表示されていることを確認してください。まずソース、次にスタイル——この順番だとデバッグがとても楽になります。

DOM が YouTube チャットと違って見える

これは正常です。Social Stream Ninja と YouTube のネイティブチャットは DOM 構造が異なるため、CSS ファイルは別々に保つ必要があります。

Social Stream Ninja のその他のリソース

• 公式サイト：socialstream.ninja
• Creating custom chat overlays for Social Stream Ninja
• How to Set Up Social Stream Ninja (Standalone App) — Full Step-by-Step Guide
• または YouTube で Social Stream Ninja を検索してください。