【OBS】ツイキャスコメントのフォントや色の変更方法

OBSでは、画面上にツイキャスのコメントを表示することができる。

ブラウザの配信画面、「ツールとの連携設定➡配信ツール向けオーバーレイ」というところから、URLをコピーしてきてOBSの「ブラウザ」ソースのURL部分に貼り付ければいいのだが、どうやらこれはPC版サイトのコメント部分だけ抜き取ったものに、CSSを当てて加工しているらしい。

このように配信画面上にコメントを表示することが可能

今回、このコメントのフォントや色の変更をしようと思ったところ、意外と面倒だったので備忘録がてら久しぶりにブログを執筆しようと思う。

 

 

 

方法

下準備

  1. 通常通り、ブラウザでツイキャスの配信画面を開き、「ツールとの連携設定➡配信ツール向けオーバーレイ」からコメント表示用のURLを取得する
  2. OBSの「ブラウザ」ソースのURL入力欄に貼り付け、URLの中から「embedded=1」を削除する
  3. ここ（外部リンク、別タブで開きます）にアクセスし、テキストをコピーする

CSSの加工

  1. コピーしたテキストを、任意のテキストエディタにペースト
    改行もなければコメントアウトもなく、このままでは非常に見にくいので、
    VS Codeかなにかに貼り付けて整形することを強くお勧めする
  2. [data-is-embedded=true] を一括削除
ユーザー名のフォント色の変更
  1. 次のセレクタのCSSを削除
  2. 末尾に次のCSSを追記（colorプロパティに設定したい色を入れる）
コメントのフォント色の変更

次のセレクタのcolorプロパティを編集

フォント変更（ユーザ名・コメント一括）
  1. Google Fonts（外部リンク、別タブで開きます） などで、変更したいフォントを選び、@import埋め込みコードを取得する
  2. CSSの先頭行に@import埋め込みコードをペースト
  3. 一番上のセレクタがbodyなので、Google Fontsからfont-familyプロパティをコピペして追加する

CSSのOBSへの導入

OBSの「ブラウザ」ソースのカスタムCSS入力欄に、加工したCSSを貼り付けてOKで抜ける

解説

「コメント表示用のURL」で表示できるHTMLソースを見てみれば、コメントのユーザ名は「tw-comment-item-name」クラスのaタグ、コメント内容は「tw-comment-item-comment」クラスのdivの中のspanであることが分かる。

OBSではカスタムCSSを当てることができるので、これらのセレクタに対してプロパティを設定してやれば動きそうなものなのだが、実はこれではうまくいかない。

これは、headタグ内で読み込んでいるCSS（下準備の３で開いたもの）によって「tw-comment-item-name」のcolorプロパティが!important指定されているのが原因だ。

コードを読んでみると、body隷下のセレクタは[data-is-embedded=true]のときにスタイルが当たるような設定になっている。

したがって、「コメント表示用のURL」から「embedded=1」を削除することによってheadタグ内のCSSがbody隷下のセレクタに影響を及ぼすことを防ぐことができる。

 

当然のことながら「embedded=1」削除によって、表示は崩れる。
（PCのブラウザでツイキャスを見たときの、コメント欄だけ切り出したような見た目になる。）

そこで、本来当たっていたCSSを加工した上で、OBS経由で改めて読ませてやることによって表示を整え、

また、フォント色なども弄れるようにしている。