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

MacでDTMライブ配信

公開:2020.07.28 （更新: 2020.07.28）

「YouTubeのコメントを、OBS のライブ配信に、透過表示（透明な状態）する方法ってないの？」って疑問を、解決していきます。

OBS のライブ配信中に、YouTube のコメントを表示できたら、視聴者といっしょに盛り上がれますよね？

OBS Studio のブラウザ機能をつかえば、簡単に実装できるので、ぜひトライしてみてください。

というわけで今回は、YouTubeのコメントを、OBS Studio のライブ配信で、透過表示する方法を、３ステップで解説していきます。

この記事を読むと、こんな感じのライブ配信ができるよ↓

動画：OBS で、YouTube ライブのコメントを、透過処理で表示
(Size: 889KB)

YouTubeのコメントを、OBSのライブ配信に透過で表示する方法【３ステップ】
YouTubeのコメントを、OBSのライブ配信に透明で表示する方法まとめ

YouTubeのコメントを、OBSのライブ配信に透過で表示する方法【３ステップ】

YouTubeのコメントを、OBSのライブ配信に透明で表示する方法を、解説していきます。

今回は、「新・VIPで初心者がゲーム実況するには」さんの記事を、参考にさせていただいております。感謝です＞＜。

【参考】【YouTube Live】全5種類、コメントを配信画面に表示する方法。透過も可能 - 新・VIPで初心者がゲーム実況するには

今回の記事は、DTM ライブ配信記事の連載企画です。

まずは、前回までの記事「実例付き！ライブ配信画面の「外枠」を作る方法」を読んで、ライブ配信ができるところまで、できていることを前提にすすめていきます！

DTM/DAW ライブ配信時の画面のうえに、YouTube コメントを透過した状態で表示させていきます。

だれでもできるように、３ステップで説明していきますので、やってみましょう！

サウンドオルビス

それでは、いってみよ〜！

【ステップ１】OBS Studio のブラウザ機能で、YouTube コメントを表示させる

ステップ１は、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：ステップ２で解説

イメージは、こんな感じですよ！

URL の「studio」を、「www」に置き換える必要があるとのことでしたが、わたしの環境ではそのままでも、コメントを表示させることができました。

URL は、ポップアウトしたチャットの URL を貼り付けてください。

幅・高さは、「1920×1080」のライブ配信サイズだと、「400×600」ぐらいのコメントサイズが見やすい感じがしたので、この数値。

カスタム CSS については、ステップ２で解説していきますよ。

設定がおわったら、ウィンドウ右下の OK をクリックしてください。

ぶじに、YouTube Live のコメントを、OBS Studio のライブ配信プレビュー画面に、表示させることができました。

みやすい位置に、マウスでドラッグして配置を変更してください。

ここまでで、ステップ１の「OBS Studio のブラウザ機能で、YouTube コメントを表示させる」は、終了です。

ワンポイントアドバイス

まれに「チャットは使用できません」と、表示されることがあります。新しいエンコーダ配信ごとに、コメントのチャットアウト URL が変わるため、ライブ配信のたびに URL 変更をお忘れなく!!

【ステップ２】YouTube コメントを CSS で、透明にしよう！

ステップ２は、YouTube コメントを CSS で、透明にしていきます。

むずかしいことは、ありません。CSS は、「Chat v2.0 Style Generator 日本語版」というジェネレーターをつかえば、コピペで OK ですよ！

それでは、下記のジェネレーターサイトにアクセスしてください↓

【参考】Chat v2.0 Style Generator 日本語版

Cv2sg japan1 — 画像：Chat v2.0 Style Generator 日本語版より

アクセスすると、こんな感じで OBS Studio で表示する YouTube コメント欄のデザインを、自分でカスタマイズすることができます。

今回は、デフォルトのまま使用させていただきます。

とにかくページをスクロールして、いちばん下までいきましょう。

Cv2sg japan2 — 画像：Chat v2.0 Style Generator 日本語版より

はい、でました。一番下にある 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 をクリックしてください。