OBS画面上でチャットを表示させる方法を教えてください

OBS配信の場合、チャットを画面上に表示することができます。

（ブラウザ配信や音声のみ配信ではご利用できない機能です）

2026年4月17日更新 サービスアップデートに伴い、2026年4月16日以前に記載されていたCSS（旧バージョン）は、現行のチャットでは正常に反映されません。新しいバージョンへの手動反映をお願いいたします。

設定方法

1. チャットURLをコピーする

配信画面上の「…」ボタンをクリックします。
メニューから「チャットをポップアウト」を選択します。

開いたポップアウトウィンドウのURLをコピーします。

2. OBSにコメントを表示する

OBSを開き、ソース欄の「+」ボタンをクリックして「ブラウザを追加」を選択します。
プロパティ画面が表示されるので、以下の設定を行います：

コピーしたURLを入力

ブラウザの幅と高さを設定
カスタマイズしたい場合：カスタムCSSを設定する

プロパティ内の「カスタムCSS」欄にこのページの下部にあるカスタムCSSをペーストします。

「OK」を押して設定を完了すると、配信画面にコメントが表示されます。

利用イメージ

カスタムCSS

① 白背景・黒文字（または背景透明）

body,
.p-comment-feed {
 background-color: rgb(255 255 255 / 100%) !important; /* 白背景 */
 /* background-color: rgb(255 255 255 / 0%) !important; */ /* 背景を透明にする場合はコメントを外す */
}

/* チャット: アイコン */
.c-comment__avatar,
.c-comment__avatar > div {
 /* width: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
 /* height: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
}

/* チャット: 送信者名 */
.c-comment__name {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #000 !important; /* 文字の色 */
}

/* チャット: 本文 */
.c-comment__text {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #000 !important; /* 文字の色 */
}

/* アイテム */
.c-item-comment {
 /* background-color: rgba(0 0 0 / 0%) !important; */ /* アイテムの背景色を消す場合はコメントを外す */
}

/* アイテム: テキスト */
.c-item-comment__container__name,
.c-item-comment__container__comment {
 /* color: #E15F85 !important; */ /* アイテムのテキストカラーを変更する場合はコメントを外す */
}

② 黒背景・白文字（または背景透明）

/* 背景 */
body,
.p-comment-feed {
 background-color: rgb(41 50 61 / 100%) !important; /* 黒背景 #29323d */
 /* background-color: rgb(255 255 255 / 0%) !important; */ /* 背景を透明にする場合はコメントを外す */
}

/* チャット: アイコン */
.c-comment__avatar,
.c-comment__avatar > div {
 /* width: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
 /* height: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
}

/* チャット: 送信者名 */
.c-comment__name {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #fff !important; /* 文字の色 */
}

/* チャット: 本文 */
.c-comment__text {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #fff !important; /* 文字の色 */
}

/* アイテム */
.c-item-comment {
 /* background-color: rgba(0 0 0 / 0%) !important; */ /* アイテムの背景色を消す場合はコメントを外す */
}

/* アイテム: テキスト */
.c-item-comment__container__name,
.c-item-comment__container__comment {
 /* color: #E15F85 !important; */ /* アイテムのテキストカラーを変更する場合はコメントを外す */
}