【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube･Twitch対応】

2022-08-042024-08-05

当サイトでは、YouTubeやTwitchのコメント欄をカスタマイズするカスタムCSSを配布しています。

吹き出しをはじめ、かわいいデザインをそろえているので、ぜひチェックしていってください。

動画でも解説しています！

この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。

コメント欄を吹き出しにできるCSS

当サイトの運営する「はいしんツールキット」で配布している、コメント欄のカスタムCSSを紹介します。

まずは、チャット風の吹き出しです。

飛び出しが左側にあるのと、右側にあるのとで、2種類の吹き出しを用意しています。

YouTubeとTwitchに対応。Twitchに対応しているCSS生成ツールは珍しいのではないでしょうか。ぜひ使ってください。

それぞれ、色とフォントを変更可能。自動的にCSSを生成してくれます。

CSSをコピーしたら「OBS」で設定するだけ。詳しい方法は後述します。

シンプルな変更ができるコメント欄も用意しています。

フォントカラーを変えれるもの（画像左）と縁取りのカラーを変えれるもの（画像右）です。

ほかのサイトで配布しているCSSでは、むやみに縁取りをとりすぎ、不格好になっているものも散見されます。当サイトのツールでは、縁取りの大きさにはこだわっているので、見やすくカスタマイズできるのではないでしょうか。

もちろん、YouTubeとTwitchの両対応。フォントも変更できます。

当サイトのコメ欄カスタマイズツールでは、コメントを打ったユーザーの名前は表示させないようにしています。（メンバー・購読者のスタンプは表示されます）

ユーザの中には、長い名前の人や不適切な名前の人もいるかと思います。名前を隠すことで、コメントを完全に左揃え・治安も守る仕様です。

ここからは、YouTube + OBSの組み合わせでコメントを表示する方法を説明します。

YouTubeライブの配信画面を開き、コメント欄の右上の三点リーダをクリック。

「チャットをポップアウト」をクリックし、新規ウィンドウとしてコメント欄を表示させます。

ポップアウトしたコメント欄のリンクをのちのSTEPで使用します。

使用するのは「配信画面のチャット」です！
YouTubeのチャットには「配信画面のチャット」と「管理画面のチャット」があります。
ライブ配信の管理画面からではなく、視聴者も見ることのできる配信画面のほうを使用してください。

「コメント欄カスタマイズツール」にアクセスし、お好みのデザインにカスタマイズします。

今回はふきだしのコメント欄を例として取り上げます。

ほかのデザインでも操作は変わらないので、お好きなものをどうぞ。

以上を選択します。「コピペ用CSS」はSTEP3で使用します。

OBSのソースに「ブラウザ」を追加します。

「URL」の欄にSTEP1で用意した、コメント欄のポップアップのリンクをコピペします。

「カスタムCSS」の欄にはSTEP2で準備した「コピペ用CSS」をコピペします。

完成形は↓↓のような感じ。

最後にOKボタンを押して完了です。