Share
OBSのカスタムCSSでコメント欄・チャット表示できるサイト3選
Index
ライブ配信で視聴者との一体感を高めるには、コメントやチャットを画面に表示すると効果的です。OBSの「カスタムCSS」を活用すれば、配信画面を自由にカスタマイズできます。
この記事では、OBSのカスタムCSSでコメント表示できるサイトを3つ紹介します。
| サイト名 | 特徴 |
|---|---|
| Chat v2.0 Style Generator | フォントや背景色などを細かくカスタマイズできる。 |
| はいしんツールキット | YouTubeやTwitchのチャット専用CSSを作成できる。 |
| Streamlabs | コメント欄のデザイン調整やURL生成がスムーズにできる。 |
OBSに導入できるカスタムCSSとは？
OBSのカスタムCSSは、コメント欄やDiscordのアイコンを好みのデザインにできる便利な機能です。
設定の基本は、カスタムCSSを生成するサイトを使い、作成したコードをOBSの「ブラウザ」ソースに貼り付けるのみ。フォントの変更、背景色の設定、コメント欄の透明化も楽に反映できます。
作業に必要なのは、配信するプラットフォーム（YouTubeやTwitchなど）でのURL取得と、生成されたカスタムCSSのコピーです。
「どこを操作すればよいかわからない…」という方も、一つひとつ進めると迷わず取り組めます。
OBSのカスタムCSSを活用できるサイト①「Chat v2.0 Style Generator」
「Chat v2.0 Style Generator」を利用したYouTube LIVEでのコメント表示手順を解説します。
大まかな手順は以下の通りです。
1.「Chat v2.0 Style Generator」の設定
2.「ブラウザ」ソースを追加する
3.URLをコピーする
4.URLをペーストする
5.コメント背景を透明にする
初心者でも扱いやすいツールなので、まずは公式サイトにアクセスしましょう。
「Chat v2.0 Style Generator」の設定内容
まずは、「Chat v2.0 Style Generator」での設定が必要です。以下の順に沿って設定しましょう。
1.フォントを変更する
2.背景色を変更する
3.チャンネルのアイコンを隠す
4.チャンネル名を隠す
フォントを変更する
Google無料フォントやパソコンにあるフォントを使い、コメント欄の印象を自在に変更できます。
ゲーム配信にはポップなフォント、トーク配信には落ち着いたフォントがおすすめです。
フォント名を手動指定するだけで設定できるので、気分に合わせて変更できるのがポイントです。
ただし、フォントを変更するとカスタムCSSにも変更が生じるので、都度コピペする必要がある点に注意しましょう。
背景色を変更する
背景色を調整することで、コメントの視認性が上がり、配信テーマに合った一体感を演出できます。特定のコメントを強調したり、透明度を調整してゲーム画面を邪魔しないデザインにすることも可能です。
背景色を変えるだけで配信画面にメリハリを加えられます。
初回アクセス時は「色の設定」内に背景色の項目が隠れているので確認しておきましょう。
チャンネルのアイコンを隠す
配信画面をシンプルにしたい場合、視聴者のチャンネルアイコンを非表示にするのがおすすめです。画面全体が整理され、落ち着いた印象を与えられます。
アイコンの設定項目は以下の通りです。
- アイコンを隠す（通常のチャット）
- アイコンを隠す（スーパーチャット）
- サイズ（通常のチャット）
- サイズ（スーパーチャット）
次章に出てきますが「アイコン」と「バッジ」は別物なのでご注意ください。
チャンネル名を隠す
ユーザー名（チャンネル名）を非表示にすることも可能です。プライバシーを意識したい場合や、画面表示を調整したい場合に使える設定です。
メンバーシップ会員はバッジのサイズ変更もできるので、非会員と差別化したい方は設定を変更しましょう。
「ブラウザ」ソースを追加する
続いては、OBSでコメント欄を表示するステップに移ります。「ブラウザ」ソースの追加が必要なので、以下の手順で進めましょう。
1.OBSを起動
2.「ソース」タブの左下にある「＋」をクリック
3.「ブラウザ」を選択
4.「新規作成」にチェックが入っていることを確認
5.名前を入力（例: コメント、チャット）
6.「OK」をクリックして設定画面を開く
設定画面では、「URL」と「カスタムCSS」の項目が表示されます。この後の手順でそれぞれ編集していきます。
URLをコピーする
次に必要なのは、チャット欄のURLを取得する作業です。YouTubeやTwitchなどの配信プラットフォームでは、ポップアウト機能を使うことでURLを取得できます。
ここではYouTubeを例に解説します。
1.配信ページにアクセス
・YouTubeのライブ配信ページを開く
・画面左に配信映像、右にコメント欄が表示されている視聴ページを使用
・自分の配信がまだ準備中でも、他の方の配信ページでテスト可能
2.コメント欄のポップアウト
・コメント欄右上に表示されている縦3点アイコンをクリック
・メニューから「チャットをポップアウト」を選択
・新しいウィンドウが開き、ポップアウトしたコメントが表示される
3.URLをコピー
・開いたウィンドウのURLをブラウザのアドレスバーからコピー
・URL形式は「https://www.youtube.com/live_chat?v=〜&is_popout=1」のようになるコピーしたURLが正しい形式かどうかを確認しましょう。YouTube Studioの管理画面からコピーした場合、「studio」が含まれていることがあります。この場合は機能しないため、正しい視聴ページからポップアウトURLを取得し直しましょう。
URLをペーストする
続いては、以下を参考にコピーしたチャットURLをOBSにペーストしましょう。
1.OBSを起動し、ソースタブから「ブラウザ」ソースを開く
2.プロパティ画面で「URL」欄コピーしたチャットURLをペーストする
3.「OK」をクリックして設定を保存
設定後、チャットが配信画面に表示されます。表示までに数秒かかる場合がありますが、焦らず確認しましょう。
コメント背景を透明にする
コメント欄の背景を透明にすることで、配信画面が一体感を持ち、視聴者にとっても見やすいレイアウトに仕上がります。
カスタムCSSの出番なので、以下を参考に設定しましょう。
1.「Chat v2.0 Style Generator」でCSSを生成
・サイトにアクセスし、画面最下部にある「CSS」欄を探す
・透明背景用のCSSが表示されているので、クリックしてコピー
2.OBSの「カスタムCSS」欄に貼り付け
・OBSでブラウザソースの設定画面を開く
・「カスタムCSS」欄にコピーしたCSSをペースト。既存のコードはすべて削除して上書きする
3.設定を保存して確認
・「OK」をクリックして設定を保存
・配信画面を確認して、コメント背景が透明化されているかチェック
URLが「studio」だと透過されない
背景が透過されない場合は、URLの形式が正しくない可能性があります。
YouTube配信で使用するURLは、通常「https://www.youtube.com/live_chat?is_popout=」から始まる形式です。しかし、YouTube Studioの管理画面から直接URLをコピーした場合、「studio」が含まれるURLになり、正しく機能しないことがあります。
この問題を解決するための確認ポイントを以下にまとめました。
1.URL形式の確認
・コピーしたURLをブラウザのアドレスバーに貼り付けて確認
・「studio」という文字列が含まれている場合、正しい配信ページからURLを再取得する
2.配信ページからポップアウトURLを取得
・コメント欄右上の縦3点メニューから「チャットをポップアウト」を選択
・開いたウィンドウのURLをコピーし直す
3.OBSのブラウザ設定を確認
・ローカルファイルにチェックが入っていないことを確認
・「シーンがアクティブになったときにブラウザを更新」にチェックを入れる
4.キャッシュの更新
・OBSのブラウザソース設定内の「現在のページのキャッシュを更新」を実行
5.CSSの再確認
・CSSが正しい形式で貼り付けられているかをチェックし、不足や途切れがないことを確認
・再度CSSをコピー＆ペーストする
コメントを透過表示させる方法は、以下の記事でも解説しています。
OBSでコメントを透過表示させる方法！おすすめツールや注意点も解説
チャットの横長・縦長を直す
チャット欄が横長や縦長になりすぎた場合、ブラウザソースの設定を調整することで見やすい配置に変更できます。
1.OBSで該当の「ブラウザ」ソースをダブルクリック
2.幅の調整
・横長の場合は「幅」を500などの小さい値に設定
3.高さの調整
・縦長の場合は「高さ」を500程度に設定
調整後、チャット欄の見た目が改善されます。配信内容や画面レイアウトに合わせて好みのサイズを試してみましょう。
OBSのカスタムCSSを活用できるサイト②「はいしんツールキット」
「はいしんツールキット」は、OBSでYouTubeやTwitchのコメント欄をカスタマイズできる便利なサイトです。
初心者でも扱いやすいインターフェースが特徴で、フォントや背景色など細かい設定ができます。
以下の順に解説するので、手軽にコメント欄を表示したい方は参考にしながら設定しましょう。
1.「YouTube・Twtichコメント欄」をクリック
2.コメント欄用カスタムCSSを選ぶ
3.フォント・色を選択してURLをコピー
4.URLをペーストする
「YouTube・Twtichコメント欄」をクリック
1.「はいしんツールキット」の公式サイトにアクセス
2.トップページから「YouTube・Twitchコメント欄」を選択
3.配信プラットフォームに合わせた専用のカスタマイズ画面が開くことを確認
「はいしんツールキット」は、OBSでYouTubeやTwitch（ツイッチ）のチャットやコメント表示したい方に向けたツールです。
カスタムCSSの添付方法はこの後解説しますが、先にコメント表示の方法が知りたい方は以下の記事をチェックしましょう。
【Twitch配信者必見】OBSでコメントを表示させる4つの方法
コメント欄用カスタムCSSを選ぶ
「YouTube・Twitchコメント欄」ページには、さまざまなカスタムCSSテンプレートが用意されています。
「ふきだし」「見出しつき」など、無料6種類・有料8種類のふきだしCSSがあるので、好きなテンプレートを選んだらクリックしましょう。
フォント・色を選択してURLをコピー
次は、フォントや背景色などを設定するステップです。「はいしんツールキット」では自由度の高いカスタマイズができるので、以下を参考に設定しましょう。
1.フォントと背景色を選択
2.カスタムCSSをコピー
・YouTube配信なら「YouTube CSS」、Twitch配信なら「Twitch CSS」を選択
・プラットフォームに合わないCSSを使用すると反映されない場合があります
URLをペーストする
最後に、取得したURLとCSSをOBSに適用しましょう。
1.OBSを起動し、ソースタブで「ブラウザ」を作成
2.プロパティ画面を開き、「URL」欄にコメント欄のポップアウトURLをペースト
・先述した「Chat v2.0 Style Generator」と同様にブラウザソースで設定
3.「カスタムCSS」欄にコピーしたCSSを貼り付け
4.設定を保存して画面を確認
以上でコメント欄のカスタマイズが完了します。
配信ツールキットには有料版もあるので、おしゃれなコメント欄を表示したい方はチェックしましょう。
OBSのカスタムCSSを活用できるサイト③「Streamlabs」
「Streamlabs」は、豊富なオプションからコメント欄をデザインできる海外サイトです。
会員登録が必要ですが、メールアドレスとパスワードのみで登録できるので、公式サイトにアクセスして登録しましょう。
「Streamlabs」の設定内容
文字色、背景色、フォントサイズなど細かいデザインの調整が可能ですが、英語表記となっているので、以下を参考にコメント欄の設定をしましょう。
| 設定項目 | 内容 |
|---|---|
| デザインとアニメーション（Theme） | チャット表示のスタイルやアニメーションを選択できます。 |
| 文字色（Text Color） | コメントの文字色を設定できます。 |
| フォントサイズ（Font Size） | コメント欄の文字サイズを調整できます。大きすぎる場合は視界を遮るため、画面バランスを見ながら設定しましょう。 |
| コメントの表示時間（Hide Message After） | コメントを画面に表示させる時間を設定できます。動きのある配信では短め、トーク中心の配信では長めにすると効果的です。 |
| カスタムHTML/CSS（Enable Custom HTML/CSS） | 詳細なカスタマイズが可能です。ただし、初心者の場合は変更しなくても問題ありません。 |
設定変更後は必ず「SAVE SETTINGS」をクリックしましょう。保存しないと変更が反映されません。
URLをコピーする
続いては、「Streamlabs」でチャットボックスのURLを取得しましょう。
1.「Streamlabs」の公式サイトにアクセス
2.「YouTube」をクリックしてGoogleアカウントでログイン
3.左メニューから「All Widgets」を選択
4.「Chat Box」をクリックして設定画面を開く
5.設定後、画面上部の「開始」をクリックしてURLをコピー
このURLは、後ほどOBSの「ブラウザ」ソース設定で使用します。
URLをペーストする
続いて、コピーしたURLをOBSに適用しましょう。
1.OBSを起動し、「ブラウザ」ソースを作成
2.プロパティ画面を開き、「URL」欄にコピーしたURLをペースト
3.「OK」をクリックして設定を保存
4.テストとして、自分のチャンネルにアクセスしコメントを入力
＜注意点＞
- チャットが表示されるまでに数秒かかる場合があります
- 幅や高さの調整が必要な場合、OBSの「ブラウザ」ソース設定で「幅」と「高さ」を変更しましょう
以上で「Streamlabs」を活用したコメント欄の設定が完了しました。本格的に配信を始めたい方は、以下の記事もチェックしましょう。
OBSを使ってYouTubeで配信する方法は？最適な設定も解説
また、OBSと連携して利用できるAlive Studioでは、コメント表示を含めて配信画面を簡単にデザインすることができます。気になる方はこちらもチェックしてみてください。
Alive Studio | 豊富な素材で配信画面をお手軽・簡単デザイン
OBSのカスタムCSSを設定したら、次は？
今回は、OBSの「カスタムCSS」を活用し、コメント欄やチャットを配信画面に表示する方法を解説しました。コメントのカスタマイズによって、視聴者とのコミュニケーションをよりスムーズにし、配信の雰囲気を自分好みに演出できます。
コメント欄のデザインが整ったら、次は配信画面全体の演出にもこだわってみませんか？
配信画面作成サービス「Alive Studio」を活用すれば、より洗練された配信が可能です。
- VTuber向け素材制作チーム「うさねこメモリー」提供の背景・小物素材が1,000種類以上使い放題！
- 音楽素材サイト「魔王魂」提供のBGMが100曲以上使い放題！
- お題ルーレット・カウンター機能搭載！
- 全機能使えて、月額980円（税込）！
「配信全体の演出にもこだわりたい」
そんな方は、ぜひ「Alive Studio」をお試しください。
＼ まずは無料お試し7日間、あなたの配信をワンランクアップ！ ／
