YouTubeのコメントを、OBSのライブ配信に透過で表示する方法

「YouTubeのコメントを、OBS のライブ配信に、透過表示(透明な状態)する方法ってないの?」って疑問を、解決していきます。
OBS のライブ配信中に、YouTube のコメントを表示できたら、視聴者といっしょに盛り上がれますよね?
OBS Studio のブラウザ機能をつかえば、簡単に実装できるので、ぜひトライしてみてください。
というわけで今回は、YouTubeのコメントを、OBS Studio のライブ配信で、透過表示する方法を、3ステップで解説していきます。
(Size: 889KB)
目次
YouTubeのコメントを、OBSのライブ配信に透過で表示する方法【3ステップ】
YouTubeのコメントを、OBSのライブ配信に透明で表示する方法を、解説していきます。
今回は、「新・VIPで初心者がゲーム実況するには」さんの記事を、参考にさせていただいております。感謝です><。
【参考】【YouTube Live】全5種類、コメントを配信画面に表示する方法 。透過も可能 - 新・VIPで初心者がゲーム実況するには
今回の記事は、DTM ライブ配信記事の連載企画です。
まずは、前回までの記事「実例付き!ライブ配信画面の「外枠」を作る方法」を読んで、ライブ配信ができるところまで、できていることを前提にすすめていきます!
DTM/DAW ライブ配信時の画面のうえに、YouTube コメントを透過した状態で表示させていきます。
だれでもできるように、3ステップで説明していきますので、やってみましょう!

【ステップ1】OBS Studio のブラウザ機能で、YouTube コメントを表示させる
ステップ1は、OBS Studio のブラウザ機能で、YouTube のコメントを表示させていきます。
まずは、YouTube Live のチャット URL を確認して、OBS Studio の設定をおこなう流れになっていますよ。
それでは、いってみよ〜!
YouTube Live のチャット URL をコピーする
それでは、YouTube Live のエンコーダ配信ページを、つくりましょう。
YouTube の画面で、ライブ配信を開始 をクリックします。
まずはコメントを表示させるために、YouTubeのチャット画面の URL を取得します。「ライブ配信を開始」のボタンをおさないかぎり、いきなりライブ配信がスタートしないはずですので、ご安心ください。
ライブ配信の管理ページの左サイドバーにあるエンコーダ配信 を、クリックします。
新しいエンコーダ配信の項目を設定したら、エンコーダ配信を作成 をクリックします。
ライブ配信の管理画面の右上に、注目してください。
チャットの文字列みぎの ⁝ 三点リーダーをクリックしてください。
チャットをポップアウト を、クリックします。
別窓でチャットウィンドウが、ポップアップします。
ウィンドウ上部にある「URL」を、コピーしておいてください。これを、OBS Studio のブラウザ機能の「URL」に貼り付けていきますよ!
OBS Studio の設定
それでは、OBS Studio をひらいてください。
前回までの記事で、OBS Studio でこんな感じの画面までできました。
気になる人は、「実例付き!ライブ配信画面の「外枠」を作る方法」を、ごらんください。
OBS Studio のソースタブのしたにあるブラウザ をクリックしてください。
ブラウザの新規作成の画面が、でてきました。名前は、わかりやすく「コメント」としておきましょう。
ブラウザのプロパティ画面が、でてきました。
変更する箇所は、こんな感じです↓
- URL:YouTube チャットでコピーした URL
- 幅:400
- 高さ:600
- カスタムCSS:ステップ2で解説
URL の「studio」を、「www」に置き換える必要があるとのことでしたが、わたしの環境ではそのままでも、コメントを表示させることができました。
URL は、ポップアウトしたチャットの URL を貼り付けてください。
幅・高さは、「1920×1080」のライブ配信サイズだと、「400×600」ぐらいのコメントサイズが見やすい感じがしたので、この数値。
カスタム CSS については、ステップ2で解説していきますよ。
設定がおわったら、ウィンドウ右下の OK をクリックしてください。
ぶじに、YouTube Live のコメントを、OBS Studio のライブ配信プレビュー画面に、表示させることができました。
みやすい位置に、マウスでドラッグして配置を変更してください。
ここまでで、ステップ1の「OBS Studio のブラウザ機能で、YouTube コメントを表示させる」は、終了です。
まれに「チャットは使用できません」と、表示されることがあります。新しいエンコーダ配信ごとに、コメントのチャットアウト URL が変わるため、ライブ配信のたびに URL 変更をお忘れなく!!
【ステップ2】YouTube コメントを CSS で、透明にしよう!
ステップ2は、YouTube コメントを CSS で、透明にしていきます。
むずかしいことは、ありません。CSS は、「Chat v2.0 Style Generator 日本語版」というジェネレーターをつかえば、コピペで OK ですよ!
それでは、下記のジェネレーターサイトにアクセスしてください↓
【参考】Chat v2.0 Style Generator 日本語版

アクセスすると、こんな感じで OBS Studio で表示する YouTube コメント欄のデザインを、自分でカスタマイズすることができます。
今回は、デフォルトのまま使用させていただきます。
とにかくページをスクロールして、いちばん下までいきましょう。

はい、でました。一番下にある CSS を、すべて選択して「コピー」してください。
それでは、OBS Studio のブラウザプロパティを開いてください。
開き方は、OBS のソースタブにある「コメント」に、マウスをあわせて右クリックします。
でてきたメニューの一番下にある プロパティ を、クリックですよ!
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
プロパティの「カスタムCSS」には、デフォルトで上記のコードが書いてあります。
上記のコードは、消してしまって OK です↓
空っぽになったカスタム CSS に、Chat v2.0 Style Generator 日本語版でコピーした CSS コードをコピペしてください。
こんな感じで↓
/**********************************************************************
* CSS生成日 : 2020/07/14 14:48:23
* バージョン: Chat v2.0 Style Generator 日本語版 2020.05.31
**********************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+SC&family=Noto+Sans+TC&family=Noto+Sans+KR&family=Noto+Sans&display=swap");
/* Background colors - 背景色 */
body {
overflow: hidden;
background-color: rgba(0,0,0,0);
}
/* Transparent background - 背景透過 */
yt-live-chat-renderer {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-author-chip #author-name {
background-color: transparent !important;
}
/* Outlines - 縁取り */
yt-live-chat-renderer * {
text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 18px !important;
line-height: 20px !important;
}
yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
overflow: initial !important;
}
/* Hide scrollbar - スクロールバー非表示 */
yt-live-chat-item-list-renderer #items{
overflow: hidden !important;
}
yt-live-chat-item-list-renderer #item-scroller{
overflow: hidden !important;
}
/* Hide header and input - ヘッダーと入力欄非表示 */
#panel-pages,
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Reduce side padding - 余白設定 */
yt-live-chat-text-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
yt-live-chat-membership-item-renderer,
yt-live-chat-legacy-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Avatars - チャンネルアイコン */
yt-img-shadow #img,
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-membership-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !important;
}
/* Member Badge - モデレーター・メンバーのバッジ(アイコン)サイズ */
img.yt-live-chat-author-badge-renderer,
div #image,
svg.yt-icon {
width: 20px !important;
height: 20px !important;
}
/* Emoji - 絵文字・メンバー用スタンプ */
#message > img ,
img.yt-live-chat-text-message-renderer {
width: 24px !important;
height: 24px !important;
}
/* Hide badges - バッジ非表示. */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-text-message-renderer #chat-badges {
vertical-align: text-top !important;
}
/* Timestamps - 時刻表示 */
yt-live-chat-text-message-renderer #timestamp {
display: none !important;
color: #999999 !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 16px !important;
line-height: 16px !important;
font-weight: 500 !important;
}
/* Badges - 名前・バッジの色 */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
color: #ffd600 !important;
}
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
color: #5e84f1 !important;
}
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
color: #0f9d58 !important;
}
/* Channel names - チャンネル名 */
yt-live-chat-text-message-renderer #author-name {
color: #cccccc !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 18px !important;
line-height: 18px !important;
font-weight: 700 !important;
}
/* チャンネル名を隠す */
yt-live-chat-author-chip {
}
/* チャンネル名の余白削除 */
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip,
yt-live-chat-author-chip {
padding: 0px 0px;
}
yt-live-chat-text-message-renderer #author-name::after {
content: ":";
margin-left: 2px;
}
/* Messages - チャット本文 */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
color: #ffffff !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 18px !important;
line-height: 20px !important;
font-weight: 500 !important;
}
/* SuperChat/Fan Funding Messages - スーパーチャットメッセージ */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-paid-sticker-renderer #author-name,
yt-live-chat-paid-sticker-renderer #author-name *,
yt-live-chat-membership-item-renderer #author-name,
yt-live-chat-membership-item-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
color: #ffffff !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 20px !important;
line-height: 20px !important;
font-weight: 700 !important;
}
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-paid-sticker-renderer #purchase-amount-chip,
yt-live-chat-paid-sticker-renderer #purchase-amount-chip *,
yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext *,
yt-live-chat-donation-announcement-renderer #text,
yt-live-chat-donation-announcement-renderer #text *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #ffffff !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 18px !important;
line-height: 18px !important;
font-weight: 500 !important;
}
yt-formatted-string,
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content *,
yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext * {
color: #ffffff !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-size: 18px !important;
line-height: 18px !important;
font-weight: 500 !important;
}
yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer {
margin: 4px 0 !important;
}
yt-live-chat-legacy-paid-message-renderer {
background-color: #0f9d58 !important;
margin: 4px 0 !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none !important;
}
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
display: none !important;
}
yt-live-chat-ticker-renderer {
background-color: transparent !important;
box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
display: none !important;
}
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
color: #ffffff !important;
font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
font-weight: 500 !important;
}
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-server-error-message,
yt-live-chat-banner-manager,
yt-live-chat-restricted-participation-renderer {
display: none !important;
}
/* アニメーションの設定 */
/* チャット欄をすごく小さくした時に表示を崩れないようにする */
カスタム CSS に貼り付ける CSS は、「Chat v2.0 Style Generator 日本語版」をごらんいただけましたら幸いです。
もしも、みてもコードがわからない場合は、実際にわたしが貼り付けた「Chat v2.0 Style Generator 日本語版」デフォルトの CSS コードを残しておきますので、参考にしてください。
設定がおわったら、プロパティウィンドウ右下の OK をクリックしてください。
赤い枠の部分が、YouTube Live のコメント部分になります。
コメントがない場合は、完全な透明な状態で表示されていますね。
それでは実際に、チャット欄でコメントを自分で入力してみましょう。テストは、大事ですからね。
はい。というわけで、無事に OBS Studio のライブ配信画面に、YouTube Live のコメントを透明で表示させることができました。
あとは、実際にステップ3でライブ配信していくだけですね。
ここまでで、ステップ2の「YouTube コメントを CSS で、透明にしよう!」は、完了です。
【ステップ3】YouTube コメントを、画面に重ねて配信してみよう
ステップ3では、実際にYouTube コメントを、画面に重ねて配信してみましょう。
新しくエンコーダ配信を作成しているので、「ストリームキー・ストリームURL」を、OBS Studio の設定画面で適用させて、配信開始のボタンをおすだけですね!
YouTube ライブ配信のはじめ方は、「MacでDAWの画面を音入りでライブ配信する方法 - 【ステップ3】実際に DTM ライブ配信をやってみる」を、読んでみてください。
無事にライブ配信できると、こんな感じの動画を、ライブ配信にのせることができますよ↓
(Size: 889KB)
これで、ライブ配信中に、チャットのコメント機能をみんなで共有できて、いっしょに盛り上がることができますね!
ここまでで、ステップ3「YouTube コメントを、画面に重ねて配信してみよう」は、完了です。
YouTubeのコメントを、OBSのライブ配信に透明で表示する方法まとめ
YouTubeのコメントを、OBSのライブ配信に透明で表示する方法について、解説してきました。
まとめると、こんな感じです↓
- 【ステップ1】OBS Studio のブラウザ機能で、YouTube コメントを表示させる
- 【ステップ2】YouTube コメントを CSS で、透明にしよう!
- 【ステップ3】YouTube コメントを、画面に重ねて配信してみよう
あらためて、ステップ1から挑戦して、ライブ配信に透過した YouTube Live のコメントを表示させてみましょう!
【記事上まで移動するリンク↓】
YouTubeのコメントを、OBSのライブ配信に透明で表示する方法【3ステップ】
第6回目のライブ配信講座、ちょっと作業がおおかったですね。ぶじにライブ配信で、コメントを表示できたでしょうか?

そのほか、DTM ライブ配信する人向けに、やり方を基礎から解説している記事をご用意しております。
Mac でライブ配信やってみたい人は、ぜひチェックしてみてくださいね↓
【連載記事まとめ】Macでやる!!DTMライブ配信講座

参照元:エンコーダでライブ配信を作成する - YouTube ヘルプ
※画像:YouTube・OBS Studio・GarageBand・Chat v2.0 Style Generator 日本語版の操作画面より、引用させていただきました。
※掲載内容は記事作成時のものであり、現在は変更になっている場合があります。あくまでも、自己責任にてお試しいただきますようお願いいたします。