Chat v2.0 Style Generatorの使い方・設定方法。YouTubeでコメント背景を透明に

この記事をシェアする

YouTube Liveで配信するさいに、コメント・チャットを配信画面に表示したいという人がいるかもしれません。

Chat v2.0 Style Generator

このとき便利なのが「Chat v2.0 Style Generator 日本語版」です。

たとえば、同サイトを利用すると以下のようなことができます。

  • チャット欄の背景を透明にする(透過)
  • フォントを変える
  • チャットのアイコンを消す

今回は、Chat v2.0 Style Generatorの使い方について見ていきましょう。

関連 【YouTube Live】全5種類、コメントを配信画面に表示する方法。透過も可能

関連 【サイト別】コメント・チャットを配信画面に表示する方法。背景は透明に

【スポンサーリンク】

配信ソフトが必要

まず前提として配信ソフトが必要です。たとえば、

のいずれかを使います。

配信ソフト

今回はOBSを使用しますが、ほかの配信ソフトでもかまいません。問題なくできます。

大まかな流れは3ステップ

Chat v2.0 Style Generatorの使い方は、たった3ステップです。

  1. OBSの「+」から「ブラウザ」を追加する
  2. YouTubeのチャットURLをOBSにコピペする
  3. Chat v2.0 Style GeneratorのCSSをOBSにコピペする

難しい用語があったかもしれません。1~2番めでチャットが配信画面に表示され、3番めでチャットの背景が透明になります。

それでは、各手順を詳しく見ていきましょう。

「ブラウザ」ソースを追加する

OBSを起動します。そして、「ソース」の「+」をクリックし、「ブラウザ」を選択します。

ブラウザ

「新規作成」が選択された状態で、適当な名称をつけます。「コメント」でも「チャット」でも、なんでもかまいません。「OK」をクリックします。

名前

すると、下記画像のような設定画面が開きます。重要なのが「URL」と「カスタム CSS」の部分です。

ブラウザのプロパティ
▲ここはあとで書き換えます。いまは設定画面を開いたままにしておきましょう。

チャットをポップアウトし、URLをコピーする

つぎは、ライブ配信中の放送ページ(視聴ページ)にアクセスしてください。

https://www.youtube.com/watch?v=zj7J14XuN-k

ここでいう放送ページとは、左に画面、右にコメントが表示されている、あのページのことです。

意外に思うかもしれませんが、他人の配信でもかまいません。わざわざ配信を開始しなくてもテストできます。

縦に並んだ3点リーダーをクリックし、「チャットをポップアウト」を選択します。

チャットをポップアウト

すると、新しくウィンドウが表示されます。ここに表示されているURLをコピーしましょう。あとでOBSにペーストするためです。

URLをコピー

例として、URLは以下のようになっています。

https://www.youtube.com/live_chat?v=zj7J14XuN-k&is_popout=1

URLをペーストし、チャットを表示する

チャットURLをコピーしたら、ポップアウトしたウィンドウは閉じてかまいません。

そして、コピーしたURLをOBSの「URL」の部分にペーストします。

URLをコピペ
▲チャットURLをペーストしたところ

「OK」をクリックし、チャットが画面に表示されたことを確認してください。表示されるまでに時間がかかる場合があります。

チャットが表示

非公開で配信している場合、「チャットは使用できません」と表示されます。YouTubeにて公開、または限定公開に設定後、「ブラウザ」ソースを削除し、やりなおしましょう。

背景を透明にする、消す

Chat v2.0 Style GeneratorのCSSを使う

以上の設定だと、チャット欄の背景が透明になっていません。そこで、Chat v2.0 Style Generatorの出番です。

同サイトにアクセスし、画面最下部にある「CSS」の部分をご覧ください。

CSS

このCSSをコピーしましょう。すなわち、クリックしてCtrlキー + Cキーです。

あとは、OBSの「ブラウザ」をダブルクリックして設定画面を開き、「カスタム CSS」の部分にペーストします。まるごと上書きします。もとの記述は必要ありません。

CSSをペースト

最後に「OK」をクリックすれば、チャット欄の背景が透明になります。表示されるまで、しばらく待ちましょう。

透過

URLが「studio」だと透過されない

注意点ですが、以下のようなURLでは背景が透明になりません

https://studio.youtube.com/live_chat?v=zj7J14XuN-k&is_popout=1

この場合、OBSの「ブラウザ」ソースを開き、「URL」の「studio」の部分を「www」に書き換えてください

URL書き換え

スポンサーリンク
レクタングル(大)

Chat v2.0 Style Generatorでのおすすめ設定

注意 : 必ずCSSを再度コピペすること

とても重要な点です。

Chat v2.0 Style Generatorで設定を変更したあとは、必ずCSSのコピー&ペーストを再度繰り返すようにしましょう。

CSS

なぜなら、設定を変更するとCSSの内容が変わるからです。したがって、設定変更後の新しいCSSをOBSにコピー&ペーストしないと、その設定が反映されません。

Chat v2.0 Style Generatorに掲載されているCSSをOBSにコピー&ペーストすることで、はじめて設定が適用されます。

フォントを変えたい

フォント」で4種類から変更できます。「Noto Sans JP」が見やすいので、おすすめです。

フォント

選択肢にないフォントにしたい場合は、「PC内のフォントを使う」にチェックを入れ、フォント名を入力する必要があります。あらかじめフォントをPCにインストールしておいてください。

チャンネルのアイコンを消したい

視聴者が設定しているチャンネルのアイコンを消したいのであれば、「アイコンを隠す」にチェックを入れます。

アイコンを隠す

アイコンというのは、下記画像の部分のことです。これを消すとシンプルになりますが、賑やかさが失われるかもしれません。

アイコン

アイコンと似ているのがバッジです。

  • 王冠
  • スパナ
  • メンバー(スポンサー)

バッジを隠す」にチェックを入れることで、バッジが消えます。基本的にはチェックを入れないでおきましょう。

バッジを隠す

ユーザー名を消したい

チャンネル名を隠す」にチェックを入れると、ユーザー名(チャンネル名)が非表示になります。

チャンネル名を隠す

チャットの横長・縦長を直す

1行あたりの文字数が多すぎる、横長であると感じたときは、「ブラウザ」をダブルクリックして設定画面を開きましょう。

幅

一例ですが、「」を500にします。すると、1行あたりの文字数が減って読みやすくなるはずです。好みで調整してください。

また、いろいろな人のコメントが縦に並びすぎている、縦長であると感じたときは、「高さ」を500にしてみます。

高さ

できない?もっと簡単な方法も

ひょっとしたら、うまくできなかったという人もいるかもしれません。

  • チャットをポップアウトできない
  • チャットが表示されない
  • チャットの背景が透過されない

根本的な解決にはなりませんが、ほかにもチャットを配信画面に表示する方法があります。

たとえば、StreamlabsというWebサイトを使うやり方です。チャットに加えて、チャンネル登録の通知も配信画面に表示でき、こちらのほうが海外では主流です。

Streamlabsで、YouTube Liveのコメント・チャットを配信画面に表示する方法
YouTube Liveでコメント・チャットを配信画面に表示したいというとき、Streamlabsが便利でしょう。 やり方は簡...

あるいは、Streamlabsの機能が最初から搭載されている配信ソフトStreamlabs OBS(SLOBS)を使うのもよいかもしれません。

簡単!Streamlabs OBSのウィジェットの使い方。コメントや通知を表示する方法
Streamlabs OBS(以下SLOBS)の大きな特長のひとつに、ウィジェットを使えるという点があります。 ウィジェットと...

配信ソフトでいえば、XSplitもチャットを表示する機能を標準で搭載しています。

スポンサーリンク
レクタングル(大)
レクタングル(大)

この記事をシェアする

Twitterで最新情報をツイートしています!フォローお願いします。

関連コンテンツ



スポンサーリンク
レクタングル(大)