イチナナ(17LIVE) 配信オーバーレイ関係

【17ライブ】配信画面にコメントを表示させる方法(オーバーレイ・背景透過)【OBS】

2020年12月29日

みなさんおはこんばんちは(@ReinyaNchannel)です

17ライブ(イチナナライブ)で認証マーク付き配信者でOBSを使ってPC配信している配信者がいるかと思います

それに伴い、今回は配信画面に視聴者のコメントを載せる方法(オーバーレイ)を紹介します

PCから配信できる人は公式マーク(認証マーク)が付いている一部の配信者でしかPCから配信できないので注意してください

 

また、前回紹介した

6,400view
【17ライブ】ライバー必見!コメントビューア(コメビュ)と棒読みちゃんの設定方法

  修正記事を上げています ちなみに簡単に棒読みが使えるようになります。参考にどうぞ見てみてください &nbs ...

続きを見る

も、あるので参考にしてみてください

この記事はこんな方におすすめ

  • 配信画面にコメント載せてみたい
  • オーバーレイに興味がある

 

OBSを使って配信画面にコメントを表示させる方法

OBSのインストール方法は今回は割愛していきます

また、今回使用しているOBSバージョンは「26.1.0(64bit)」となっています

 

step
1
ブラウザソースにURLを挿入

  • ステップ1

  • ステップ2

 

step
2
ブラウザソースの設定について

簡単な流れ

  1. URLを挿入
  2. 「幅、高さ」は800*600で固定
  3. OBSを介して音声を抑制するにチェック
  4. シーンがアクティブになったときにブラウザの表示を更新にチェック

 

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の簡単な流れ

  1. キーの色「#fffff」に指定(色の選択から白を選ぶと良い)
  2. 色キーの種類「custom」を選択
  3. 類似性「1」に設定
  4. キーカラー流出低減「1」に設定

 

ステップ4

 

まとめ

これで配信画面にコメントを表示することが出来ます

認証配信者は試してみると良いかもしれない

 

 

 

サイト管理者のプロフィール

ReinyaN

Mixerで活動してる配信者&オフィシャルパートナーを勤めています「ReinyaN」です ゲーム配信を主に流しています

関連記事とスポンサーリンク

  • この記事を書いた人
  • 最新記事

ReinyaN

Mixerで活動してる配信者&オフィシャルパートナーを勤めています「ReinyaN」です ゲーム配信を主に流しています

-イチナナ(17LIVE), 配信オーバーレイ関係
-, , , ,

Copyright© AkaMaruServer , 2021 All Rights Reserved.