Chat v2.0 Style Generator 日本語版 の説明(メモ)

1. OBSの「ソース」から「BrowserSource」を追加します。名前はなんでもいいですが後で分かりやすい名前の方がいいと思います。
2. https://www.youtube.com/live_dashboard のチャット欄の 「︙」(縦3つの"：") →「チャットをポップアウト」の順にクリックします。
   
3. 出てきたチャット欄のURLを控えておきます。https://www.youtube.com/live_chat?is_popout=1&v=************ みたいなURLになっていると思います。
   
4. 先程追加したBrowserSourceの「URL」欄に今控えたURLを入力します。Widthは横幅、Heightは縦幅なのでチャット欄の大きさや比率を変えたい場合はここの数値を変更します。入力が終わったら「OK」をクリックします。
   
5. こんな感じでチャット欄が表示されたらOKです。
   
6. 【上位チャットだけを表示したい(=すべてのチャットを表示したくない)場合は飛ばしてください】
   ソースに先程追加したBrowserSource(またはOBS内のチャット画面)を右クリック→「対話」をクリック→出てきた画面の「Top chat」をクリックして「Livechat」に切り替える→×を押して画面を閉じてください。
   
   
7. OBS内にチャット欄を表示させることができました。

フォントについて

ユーザー名・コメントなど全てで同じフォントを使用します。
標準では以下の4つのフォントから選ぶことができます。

• Noto Sans JP…AdobeとGoogleが共同開発したフォント。漢字数も多いのでオススメ。
• Mplus 1p…有名なフリーフォントの一つ。かわいい。
• Rounded Mplus 1c…"Mplus 1p"の角が丸く加工されたバージョン。not丸文字。
• Sawarabi Mincho…明朝体。低画質な配信では字が潰れやすいかも。

また、PCにインストール済みのフォントを指定することもできます。「PC内のフォントを使う」にチェックを入れて、インストール済みのフォント名を入力してください。
※分かる人向け。フォントのライセンス等はご自身で確認してください！

補足

本家と同じくGoogleが提供しているウェブフォントを使用していますが、Google Fonts + 日本語 早期アクセスの漢字に対応した日本語フォントを使用するようになっています。
PC内の～についてはあずきフォントや851手書き雑フォントなどの商用利用可なフォントを使用することを想定しています。
市販のWindowsPCに入っていることの多い「HG○○」「AR○○」「富士○○」などのフォントは商用利用NGなことがほとんどなので、使用する際はライセンスを確認しましょう。

アイコンについて

消したり消さなかったりできます。ユーザー名(チャンネル名)も隠すことで誰がコメントしたのか分からないようにすることもできます。
アイコンの大きさも変えられますが、24より大きくすると表示がおかしくなるのでそのままor小さくするだけの方が良いです。

ユーザー名(チャンネル名)について

こちらも消したり消さなかったりできます。需要があるのかは分かりませんが「名前欄は非表示にしてアイコンだけ残す」ということも可能です。
バッジは、チャンネル管理者の王冠、モデレーターのスパナ、スポンサーの●(設定している場合は画像)のことです。

コメントの設定について

見たら分かりそうなので割愛します。

時刻の設定について

割愛

背景色について

色+不透明度で設定します。不透明度は0～100%の範囲で設定可能です。(0%→透明，100%→塗りつぶし)
「左側だけ塗りつぶす」は各メッセージの背景色は変えず、アイコンの左側に色付きの┃を表示するものです。色々動かしてみた方が分かりやすいと思います。

スーパーチャット関係について

「スーパーチャット欄を表示」は500円以上のスーパーチャットが一定時間画面に残るのを表示するかどうかの設定です。デフォルトでは表示しない設定にしています。
「チャット欄を表示」は通常のチャット欄を表示するかどうかの設定です。非表示にすることはほとんどないと思います。

フェードイン/アウトについて

チャットメッセージをフェードイン/アウトさせる場合の設定欄です。有効にすると多少重くなってしまうようなので、スペックがギリギリの場合は無効にした方がいいかもしれません。
「フェードインを使う」にチェックを入れるとメッセージがフェードインするようになります。フェードの時間はミリ秒単位で設定できます。(1000ミリ秒＝1秒)
「フェードアウトを使う」にチェックを入れると、一定時間経過後にメッセージがフェードアウト(非表示)するようになります。配信画面に映らなくなるだけなので、視聴者のコメント欄などには普通に表示されたままなので注意してください。
「横方向にフェード」はフェードイン/アウトの際に左から右(or右から左)に移動させるオプションです。両方にチェックを入れると左から右になります。

その他

作成したCSSはリアルタイムでページ下部の「CSS」のところに反映されます。
ページを移動・更新すると消えてしまうので、完成したらメモ帳にコピペするなどしてバックアップを取るようにしてください。

1. ソースに追加したBrowserSource(またはOBS内のチャット画面)を右クリック→「プロパティ」をクリックしてください。
   
2. CSS欄に先ほど作成したCSSのコードをコピペして「OK」をクリックしてください。
   
3. 配信画面内に背景が透過されたチャット欄が表示されたらすべて完了です。(チャット欄の読み込み→CSSの適用となるので最初の表示までは少し時間がかかります)