Social Stream Ninja を使うと、YouTube、Twitch、TikTok などのチャットを 1 つのブラウザソースにまとめられます。Doodlekuma から Social Stream 版 CSS をダウンロードした場合は、YouTube のポップアウトチャットではなく、Social Stream の dock / output ページに適用してください。
公式ページはこちらです：socialstream.ninja/landing
CSS の種類を確認する
Doodlekuma のテーマには、多くの場合 2 種類の CSS があります。
- Social Stream：Social Stream Ninja の dock / output DOM 用です。
.highlight-chat、.hl-name、.hl-messageなどを対象にします。 - YouTube：YouTube 標準のポップアウトチャット用です。
yt-live-chat-text-message-rendererなどを対象にします。
DOM 構造が違うため、この 2 つは混用できません。
必要なもの
- OBS Studio または Streamlabs OBS。
- 公式手順に沿って開いた、または導入した Social Stream Ninja。
- YouTube Live など、Social Stream に接続するチャット元。
- Doodlekuma のライブチャットスタイル からダウンロードした Social Stream 版 CSS。
Step 1: Social Stream Ninja を開く
Social Stream Ninja にアクセスし、自分の配信環境に合う方法でセットアップします。
起動できたら、OBS で使うための dock / output URL を確認します。この URL を OBS のブラウザソースに入れます。
Step 2: チャットを接続する
Social Stream 側で YouTube などのプラットフォームを追加します。
CSS を入れる前に、Social Stream の画面に実際のチャットメッセージが表示されることを確認してください。
Step 3: OBS にブラウザソースを追加する
OBS で次のように設定します。
- ソース欄の
+をクリックします。 ブラウザを選びます。- Social Stream の dock / output URL を貼り付けます。
- サイズを
500 x 700などに設定します。 - 必要に応じて背景を透明にします。
Step 4: CSS を貼り付ける
Doodlekuma のテーマページで Social Stream 版を選んでダウンロードします。
ダウンロードした .css ファイルを開き、内容をすべてコピーして、OBS ブラウザソースの カスタム CSS 欄に貼り付けます。
よくある確認ポイント
スタイルが反映されない
Social Stream 版 CSS を使っているか、OBS の URL が YouTube の live_chat ではなく Social Stream のページか確認してください。
YouTube アイコンが出ない
新しいテーマでは、可能な限り YouTube アイコンをインライン SVG で扱います。古い CSS を使っている場合は、再ダウンロードしてください。
YouTube チャットと DOM が違う
正常です。Social Stream と YouTube 標準チャットは DOM が違うため、CSS も別々に使う必要があります。
おすすめの流れ
- 先に Social Stream でチャットを接続します。
- OBS でデフォルトのメッセージ表示を確認します。
- Doodlekuma から Social Stream 版 CSS をダウンロードします。
- 必要に応じてテーマを調整し、再ダウンロードします。
先にメッセージ元、あとから見た目。この順番にすると原因の切り分けが楽になります。