OBSにYouTubeのコメントを表示するためのCSSを作成し、デザインをカスタマイズする際に必要なステップやツール、チェックリスト、アイデアをまとめました。

必要なもの

1. OBS Studio

ストリーミングソフトウェア。YouTubeコメントを表示するための「ブラウザソース」を設定します。

2. YouTubeのライブチャットURL

YouTubeライブストリームのチャットウィンドウから取得します。

3. コメント表示ツール（例えばStreamElements、Streamlabsなど）

YouTubeチャットをOBSに表示するために必要な外部ツールです。これらのツールを使用すると、ブラウザソースに表示できるURLが生成されます。

4. CSSの知識

コメントのスタイルをカスタマイズするために使用されます。ブラウザソースの「カスタムCSS」セクションにコードを記述します。

---

CSSカスタマイズの流れ

1. コメント表示用ツールを設定

StreamElementsやStreamlabsにYouTubeのアカウントを連携し、ライブチャットを表示するウィジェットを作成します。このツールで生成されたURLを後でOBSのブラウザソースに追加します。

2. OBSにブラウザソースを追加

OBSで「ソース」→「＋」→「ブラウザ」を選択します。

「URL」に先ほど生成したチャットウィジェットのURLを入力します。

「カスタムCSS」のセクションにCSSコードを追加してデザインをカスタマイズします。

---

基本的なCSSのカスタマイズ

body {

    background-color: rgba(0, 0, 0, 0); /* 背景を透明にする */

    margin: 0;

    padding: 0;

    overflow: hidden;

}

.chat-line {

    font-family: 'Arial', sans-serif;

    font-size: 16px;

    color: #FFFFFF ;

    padding: 10px;

    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */

    margin-bottom: 5px;

    border-radius: 8px;

}

.chat-author {

    font-weight: bold;

    color: #FFCC00 ; /* ユーザー名の色をゴールドに */

}

.chat-message {

    color: #FFFFFF ; /* メッセージの色 */

}