メインコンテンツへスキップ

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

更新

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

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

 

設定方法

1.URLをコピーする

    1. 配信画面上の「…」ボタンをクリックします。
    2. メニューから「チャットをポップアウト」を選択します。
    3. 開いたポップアウトウィンドウのURLをコピーします。

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

    1. OBSを開き、ソース欄の「+」ボタンをクリックして「ブラウザを追加」を選択します。
    2. プロパティ画面が表示されるので、以下の設定を行います：
      • コピーしたURLを入力
      • ブラウザの幅と高さを設定
    3. カスタマイズしたい場合：コメント透過用CSSを設定する
      • プロパティ内の「カスタムCSS」欄にコメント透過用のCSSをペーストします。
    4. 「OK」を押して設定を完了すると、配信画面にコメントが表示されます。

 

利用イメージ

 

コメント透過用のCSS

背景色に応じて、適切なスタイルを使い分けていただけます。

2025年4月13日更新
通常の黒文字については、CSSを適用しなくても十分な視認性が確保できるよう改善いたしました。

デフォルトのCSSは、カスタマイズのベースとしてご利用いただけます。黒背景などに合わせて白文字を使用したい場合には、別途CSSの適用をお願いいたします。

 

デフォルト（適用不要の場合もあり）

/* 背景 */
.p-comment-feed {
background-color: rgb(255 255 255 / 100%) !important; /* 白背景 #ffffff */
/* background-color: rgb(41 50 61 / 100%) !important; */ /* 黒背景 #29323d */
}

/* チャット: アイコン */
.c-comment__avatar-img {
width: 16px !important; /* アイコンの大きさ */
height: 16px !important; /* アイコンの大きさ */
}

/* チャット: 送信者名 */
.c-comment__name {
font-size: 12px !important; /* 文字の大きさ */
font-weight: 400 !important; /* 文字の太さ */
color: #000 !important; /* 文字の色 */
}

/* チャット: 本文 */
.c-comment__text {
font-size: 12px !important; /* 文字の大きさ */
font-weight: 700 !important; /* 文字の太さ */
color: #000 !important; /* 文字の色 */
}

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

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

 

白文字を使用したい場合（黒背景など）

/* 背景 */
.p-comment-feed {
/* background-color: rgb(255 255 255 / 100%) !important; */ /* 白背景 #ffffff */
background-color: rgb(41 50 61 / 100%) !important; /* 黒背景 #29323d */
}

/* チャット: アイコン */
.c-comment__avatar-img {
width: 16px !important; /* アイコンの大きさ */
height: 16px !important; /* アイコンの大きさ */
}

/* チャット: 送信者名 */
.c-comment__name {
font-size: 12px !important; /* 文字の大きさ */
font-weight: 400 !important; /* 文字の太さ */
color: #fff !important; /* 文字の色 */
}

/* チャット: 本文 */
.c-comment__text {
font-size: 12px !important; /* 文字の大きさ */
font-weight: 700 !important; /* 文字の太さ */
color: #fff !important; /* 文字の色 */
}

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

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

 

旧バージョン

白背景用

/**
* 文字色
*/

/* メッセージテキストのユーザ名の色 */
.c-comment__container__name {
color: #000000 !important; /* 黒文字 */
}

/* メッセージテキスト、スペシャルチャットテキストの色 */
.c-comment:not(.p-special-comment) .c-comment__container__comment{
color: #000000 !important; /* 黒文字 */
}

/* アイテム名の色 */
.c-comment__container__tipInfo {
color: #E15F85 !important; /* ピンク文字 */
}

/**
* スタイル設定
*/

/* チャットの背景を非表示 */
body, html, #__nuxt, #__layout, #app, .p-comment-feed, .p-comment-feed__container {
background-color: rgba(0, 0, 0, 0) !important;
}
/* チャットの基本設定 */
.c-comment:not(.p-special-comment){
paddong:0px 16px !important;
border-left:none !important;
background-color: initial !important;
}
/* スペシャルチャットの基本設定 */
.p-special-comment{
paddong:0px 16px !important;
}
/* ユーザー名のスタイル */
.c-comment__container__name {
font-size: 24px !important;; /* ユーザー名のフォントサイズ */
font-weight: bold !important;/* ユーザー名のフォント濃さ */
}
/* メッセージテキストのスタイル */
.c-comment__container__comment {
font-size: 24px !important; /* メッセージのフォントサイズ */
font-weight: bold !important;/* メッセージのフォント濃さ */
}
/* スペシャルチャット上段のスタイル */
.c-comment__header {
font-size: 24px !important; /* メッセージのフォントサイズ */
font-weight: bold !important;/* メッセージのフォント濃さ */
}
/* アイテム名のスタイル */
.c-comment__container__tipInfo {
font-size: 28px !important; /* メッセージのフォントサイズ */
font-weight: bold !important;/* メッセージのフォント濃さ */
}
/* アイコン画像のサイズ調整 */
.c-comment__container img {
width: 40px !important; /* アイコンの幅 */
height: 40px !important; /* アイコンの高さ */
border-radius: 50% !important; /* 丸いアイコン */
margin-right: 8px !important;
}

/**
* スクロールバーを非表示にする
*/

/* Chrome, Safari, Opera用：スクロールバーを非表示 */
body::-webkit-scrollbar { display: none; }
/* Firefox用：スクロールバーを非表示 */
html { scrollbar-width: none; }
/* IE, Edge用：スクロールバーを非表示 (スクロール機能が必要な場合はこの項目は削除してください) */
html { -ms-overflow-style: none; }

黒背景用

/**
* 文字色
*/

/* メッセージテキストのユーザ名の色 */
.c-comment__container__name {
color: #FFF !important; /* 白文字 */
}

/* メッセージテキスト、スペシャルチャットテキストの色 */
.c-comment:not(.p-special-comment) .c-comment__container__comment{
color: #FFF !important; /* 白文字 */
}

/* アイテム名の色 */
.c-comment__container__tipInfo {
color: #E15F85 !important; /* ピンク文字 */
}

/**
* スタイル設定
*/

/* チャットの背景を非表示 */
body, html, #__nuxt, #__layout, #app, .p-comment-feed, .p-comment-feed__container {
background-color: rgba(0, 0, 0, 0) !important;

}
/* チャットの基本設定 */
.c-comment:not(.p-special-comment){
paddong:0px 16px !important;
border-left:none !important;
background-color: initial !important;
}
/* スペシャルチャットの基本設定 */
.p-special-comment{
paddong:0px 16px !important;
}
/* ユーザー名のスタイル */
.c-comment__container__name {
font-size: 24px !important;; /* ユーザー名のフォントサイズ */
font-weight: bold !important;/* ユーザー名のフォント濃さ */
}
/* メッセージテキストのスタイル */
.c-comment__container__comment {
font-size: 24px !important; /* メッセージのフォントサイズ */
font-weight: bold !important;/* メッセージのフォント濃さ */
}
/* スペシャルチャット上段のスタイル */
.c-comment__header {
font-size: 24px !important; /* メッセージのフォントサイズ */
font-weight: bold !important;/* メッセージのフォント濃さ */
}
/* アイテム名のスタイル */
.c-comment__container__tipInfo {
font-size: 28px !important; /* メッセージのフォントサイズ */
font-weight: bold !important;/* メッセージのフォント濃さ */
}
/* アイコン画像のサイズ調整 */
.c-comment__container img {
width: 40px !important; /* アイコンの幅 */
height: 40px !important; /* アイコンの高さ */
border-radius: 50% !important; /* 丸いアイコン */
margin-right: 8px !important;
}

/**
* スクロールバーを非表示にする
*/

/* Chrome, Safari, Opera用：スクロールバーを非表示 */
body::-webkit-scrollbar { display: none; }
/* Firefox用：スクロールバーを非表示 */
html { scrollbar-width: none; }
/* IE, Edge用：スクロールバーを非表示 (スクロール機能が必要な場合はこの項目は削除してください) */
html { -ms-overflow-style: none; }

 

 

関連記事

Powered by Zendesk