OBS Studioに表示したコメントを、かわいく・かっこよく・おしゃれなデザインにカスタマイズする方法をまとめました。
YouTube対応のカスタムCSSを販売しています。ぜひ使ってみてください。
まだまだ数は少ないですが、少しずつ作成していきますのでご期待ください！
1. 配信画面にデザイン性のあるコメントを出すには
OBSには「ブラウザソース」という機能があり、コメント欄を取り込んで「カスタムCSS」で自由に装飾できます。
配信者さんの画面で見かける、見た目のきれいなコメント欄はこの仕組みで実現させています。
2. 「カスタムCSS」とは
「カスタムCSS」は見た目を整えるコードです。表示位置や色から、簡単な動きや表現の仕方も設定できます。
簡単にな設定だと、下記のようなものがあります。
.text{
color: #ff6ea8; /* 文字色 */
font-size: 18px; /* 文字サイズ */
}このコード自体をじっくり書いていけば見た目をデザインすることが出来ます。
しかしこれがかなり大変で、CSSと合わせて「HTML」というプログラミング言語の理解も必要になるため、自力で設定するためにはある程度の知識が必要です。
このため、基本的にはそのような知識を有する皆様がコーディングを行い、そのCSSを頒布・販売しているのですね。
3. コメントの見た目を変える手順
では、実際にコメントの見た目を変える手順を確認してみましょう。
①ブラウザソースを追加
OBSのソース一覧 → 「＋」→ ブラウザを選択。
②URLにコメント欄のリンクを入力
YouTubeのポップアウトしたチャットURLを貼り付けます。
③画面下部の「カスタムCSS」欄に、配布CSSをコピー＆ペースト
貼り付ける予定のカスタムCSSをコピーして、「カスタムCSS」欄に貼り付けます。
「OK」ボタンを押して設定を保存すれば反映されます。
4. 文字サイズ・幅の調整
パターン①：横に長すぎる
ブラウザソースの幅・高さの値を小さくしてみる
パターン②：全体的に大きくしたい
OBSプレビュー上でソースをドラッグで拡大縮小する
5. CSSが反映されないとき…チェックリスト
□ URLやカスタムCSSのコピー＆ペーストのミスがないか（冒頭から末尾まで全部入っているか）
→基本はすべての文字列をコピー＆ペーストするため、コピー範囲を確認しましょう。
□ ブラウザソースを作り直してみる
→設定したブラウザソースを一度削除して作り直してみましょう。
□ OBSを再起動してみる
→ブラウザソースを再度設定し直してみるところもセットで行いましょう。
□ Youtubeなどの配信サイト側の仕様変更
→アップデートによりカスタムCSSが反応しなくなる可能性もあります。
その場合は、周辺でも話題になるはずですのでSNSやサポート情報を確認してください。
6. 便利ツールのご案内
当サイト「がずーの荷物置き場」では、コメントCSSのほかにも配信便利ツールを作成・紹介予定です。
配信画面を彩る様々なツールを作成していきますので、「こんなデザインがほしい」「こんなツールがあると助かる」などのご要望も承っております。
X（Twitter）もしくは「お問い合わせ」までお気軽にコメントをどうぞ！
私の作成したツールについてはBoothにて販売中です！ご自身で色などをカスタマイズできる機能なども併せて展開しておりますので、ぜひご確認くださいませ！
