【無料】OBS用 コメント欄カスタムCSS｜YouTube・Twitch対応 / Stream Chat CSS for OBS

YouTube や Twitch のコメント欄を、

OBSのカスタムCSSだけで、すりガラス風のデザインに整えるツールです。

ガラスは「黒」と「白」の2色。

暗い配信画面にも、明るい配信画面にも合わせられます。

配信のコメント欄をそのままOBSに読み込み、

CSSで見た目を上書きするだけ。

APIキーの取得も、アプリのインストールも不要です。

同梱の「CSSジェネレーター」で、色・フォント・文字サイズなどを

選んで、自分好みのCSSを作れます。

■ 仕組み

YouTube・Twitch には、コメント欄だけを表示する

「ポップアウト用URL」があります。

そのURLをOBSのブラウザソースに読み込み、

カスタムCSS欄にこのツールのCSSを貼り付けると、

純正のコメント欄が、ガラス風のデザインに変わります。

コメントの取得はYouTube・Twitchのページ自体が行うため、

APIキーは不要。貼り付けるだけで使えます。

■ 同梱ファイル

generator.html CSSジェネレーター（色・フォントを選べる設定ツール）

youtube_glass.css YouTube用の完成CSS／黒ガラス

youtube_glass_light.css YouTube用の完成CSS／白ガラス

twitch_glass.css Twitch用の完成CSS／黒ガラス

twitch_glass_light.css Twitch用の完成CSS／白ガラス

README_JA.txt 日本語README

README_EN.txt English README

■ できること

・YouTube Live / Twitch のコメント欄をガラス風に

・APIキー不要・インストール不要、CSSを貼るだけ

・ガラスの色を黒／白から選べる（明るい配信画面にも合います）

・色（10色）・フォント（5種）・文字サイズ・ガラスの濃さを選べる

・アイコン表示、投稿時刻の表示/非表示を切り替え

・完成CSSは黒・白の4本を同梱（設定せずそのまま使えます）

・他人の配信URLでも表示できるので、見た目の確認が手軽

■ 動作環境

OS ：Windows 10 / 11 / macOS

OBS ：OBS Studio 30以降

■ 使い方（かんたん3ステップ）

【1】YouTube / Twitch のチャットのポップアウトURLを用意

【2】OBSのブラウザソースにそのURLを入れる

【3】カスタムCSS欄に、このツールのCSSを貼り付ける

（詳しい手順・URLの取得方法はREADMEに記載しています）

■ 注意事項

・ブラウザソースの「シーン切り替え時にページを更新」は

　オフを推奨します。

・YouTube・Twitchのデザイン変更により、CSSが効かなくなる

　場合があります。

・本ツールは見た目を整えるCSSのみを提供します。

　コメントの取得・表示はYouTube / Twitch のページが行います。

・Webフォント（Noto Sans など）を選んだCSSは、OBSがネットに

　繋がっている必要があります。オフラインで使う場合は

　ジェネレーターで「PC標準」フォントを選んでください。

■ ご利用について

配信での使用は、商用・非商用問わず自由です。

再配布・改変・転売はご遠慮ください。

■ 免責事項

本ツールの使用によって生じたトラブルや損害については、責任を負いかねます。

YouTube・Twitchの仕様変更やOBSのアップデート等により、

動作しなくなる場合があります。

■ サポートについて

不具合やご要望がありましたら、お知らせください。

可能な範囲で確認しますが、対応をお約束するものではありません。