みなさんおはこんばんちは(＠ReinyaNchannel)です
17ライブ（イチナナライブ）で認証マーク付き配信者でOBSを使ってPC配信している配信者がいるかと思います
それに伴い、今回は配信画面に視聴者のコメントを載せる方法（オーバーレイ）を紹介します
PCから配信できる人は公式マーク（認証マーク）が付いている一部の配信者でしかPCから配信できないので注意してください
また、前回紹介した
-
-
【17ライブ】ライバー必見！コメントビューア（コメビュ）と棒読みちゃんの設定方法
17LIVE（イチナナライブ）でコメントを管理できるコメントビューア（コメビュ）を探しているそこのライバーさん！ 今から ...
続きを見る
も、あるので参考にしてみてください
この記事はこんな方におすすめ
- 配信画面にコメント載せてみたい
- オーバーレイに興味がある
OBSを使って配信画面にコメントを表示させる方法
OBSのインストール方法は今回は割愛していきます
また、今回使用しているOBSバージョンは「26.1.0（64bit）」となっています
step
1ブラウザソースにURLを挿入
-
ステップ1
-
ステップ2
step
2ブラウザソースの設定について
簡単な流れ
- URLを挿入
- 「幅、高さ」は800*600で固定
- OBSを介して音声を抑制するにチェック
- シーンがアクティブになったときにブラウザの表示を更新にチェック
step
3配信画面にコメント表示させる
OBSのカスタムCSSに以下のCSSコードを貼り付ける
/* Header Hidden. */
.Nav__NavRelativeWrapper-empriJ {display: none;}
.Header__HeaderWrapper-jLblBB {display: none;}
/* Comment Header Hidden. */
.AsideTabList__AsideTabListWrapper-dApjnt {display: none;}
/* Comment Bottom Hidden. */
.SubmitChat__SubmitChatWrapper-kLTVjd {display: none;}
.GiftBox__BoxWrapper-dIBSwd {display: none;}
.AsideContent-eTOXSN [style*='position: relative;'] {display: none;}
/* コメントの幅指定 */
.AsideLive__AsideLiveWrapper-kvCbuN {width: 400px;}
/* コメントカラー設定 */
.Chat__ChatWrapper-dhHBjd {
/* background-color: #ededed; */
background-color: rgba(40, 35, 45, 0.7);
border-color: #8c8c8c;
/* border: solid 1px; */
border-radius: 8px;
padding: 6px;
color: #FFFFFF;
}
.Chat__ContentWrapper-krutWa {
color: #FFFFFF;
}
.Reaction__ControlledText-jnWOxE {
color: #FFFFFF;
}
このままではコメントだけを表示させることは出来ないのでクロマキーを使ってコメントだけを切り取っていきます
step
4クロマキー（フィルター）を使って、一部クロッピングする
クロマキーを使ってコメントだけを切り取り、背景透過をしていきます
-
ステップ1
-
ステップ2
-
ステップ3
画像ステップ3の簡単な流れ
- キーの色「#fffff」に指定（色の選択から白を選ぶと良い）
- 色キーの種類「custom」を選択
- 類似性「1」に設定
- キーカラー流出低減「1」に設定
ステップ4
まとめ
これで配信画面にコメントを表示することが出来ます
認証配信者は試してみると良いかもしれない
