チャット欄のURLがわからない／よくわからないけど透過ができない

【2021/12/20追記】
チャット欄のURLを自動で更新する方法を作成しました。
※現時点ではテスト中ですので「たまに動かないときもある」を承知でご利用ください。
【追記おわり】

とりあえずこの手順を試してみてください。
  1. YouTube Studioのライブ配信画面で「チャットをポップアウト」を選択する。
  2. 出てきたチャット欄のURLをコピーする。
  3. URLの studio. を www. に書き換える。
    書き換え前：
    書き換え後：
  4. OBSの「ブラウザ」にURLを貼り付ける。

CSSのテストを手軽にやりたい

他の人の配信のコメント欄を自分のOBSに表示し、CSSのテストをするやり方があります。
チャット欄URLの https://www.youtube.com/live_chat?v=***********&is_popout=1 は配信URLのIDと同じものが使われています。

そのため、他の人が配信中のURLから v=*********** の部分をコピーすることで、他の人のチャット欄を自分のテストに使うことができます。（チャット欄をOBSで表示するだけなので、相手に迷惑をかけることはありません）
VNUMA では視聴者数順に配信が並んでいるため、自分の配信の視聴者数に近い配信のチャット欄利用してテストが可能です。

OBSに日本語フォントが反映されない（反映されなくなった）

OBSを更新しましょう
下の画像のようにしてOBSを更新するか、最新バージョンをダウンロードしてインストールし直しましょう。


【補足】
OBS Studio のバージョン 25.0～25.0.8 にはCSS関係のバグがあるため、「日本語で指定したフォント」が反映されなくなっていたことが原因です。
理由があってOBSを更新できない場合は、2つの解決方法があります。
  1. OBS Studio 24.0.3を使う。
    （24.0.3をインストールし直す前にプロファイルのバックアップ(エクスポート)をしておくことを推奨します）
  2. 日本語ではなく英語でフォント名を指定する。
    画像のようにフォント名を英語で指定することで、反映されるようになります。
    英語表記の調べ方はフォント名の英語名の確認方法に記載しております。
    英語表記を確認したあとは、以下のどちらかの方法でCSSを更新し、コピペしなおせばOKです。
    1. 既にOBSで使用しているCSSのフォント名部分を全部置き換える（オススメ）
    2. 1からCSSを作り直す

    太字フォントを指定してもフォントが変わらない／太字にならない／極太フォントを使いたい

    複数の太さが選べるフォントの場合、標準のフォント名を指定した上で「太さ」を指定しないと反映されない場合があります。
    例えば「りょうゴシック PlusN B」というフォントの場合、フォント名を「りょうゴシック PlusN」にした上で「太さ」を「太/Bold」にする必要があります。
    （フォントによっては異なり、場合によってはそれでも動かないことがあるかもしれません）

    インストールしたフォントが「テキスト (GDI+)」で使えない

    原因：フォントが「Windowsのフォントフォルダ」ではなく「ユーザーのフォントフォルダ」にインストールされている
    フォントのプレビュー画面にある「インストール」からフォントをインストールすると「ユーザーのフォントフォルダ」にインストールされてしまい、「テキスト (GDI+)」のフォント一覧に表示されなくなってしまいます。

    解決策：下の画像のように フォントファイルを右クリック → すべてのユーザーに対してインストール の手順でインストールすることで「テキスト (GDI+)」で使えるようになります。

    ※わかる人向け
    　ユーザーのフォントフォルダ:
    　Windowsのフォントフォルダ:

    作成済みのCSSからカラーコード（色の指定）を抜き出したい

    かんたんな方法

    CSS Color Extractor に作成済みのCSSをコピペして「Extract Colors」をクリックするとCSSで使っている色の一覧が表示されます。

    エラーが出た場合

    古いバージョンのGeneratorで作ったCSSの場合、"Unknown word"というエラーが表示されます。
    この場合は、メモ帳などで overflow: initial; !importantと書かれている箇所を消してからコピペし直せば上手くいくパターンが多いと思われます。

    それでもダメだった場合

    CSSをメモ帳などにコピペして color: で検索し1つずつ順番に探していくことで、カラーコードを探すことができます。
    効率は悪いですが、確実な方法の1つです。

    色の設定でカラーコード（#123456など）を使いたい

    最新版のChromeを使っている場合

    下の画像の「RGB」の箇所を数回クリックすると「HEX」になるので、赤枠のところにカラーコード（#123456 など）を貼り付ける

    その他の場合

    1. RGBと16進数カラーコードの相互変換ツール - PEKO STEP を開く
    2. カラーコード（#123456 など）を貼り付ける
    3. 出てきたR・G・Bの値を"Generotr"の色指定画面にコピペする
テンプレート by ネットマニア