【OBS】OBS-clockの背景色透過とフォント変更

OBSに時計を設置しようと思った。
ツイキャスであれば、最近は「デザインスタジオ」なる機能で簡単に配信画面の作り込みが出来る様なのだが、何分選択できるデザインが少ない。

ツイキャス公式の「デザインスタジオ」では、わずかに3種類のデザインからしか選べない

そこで、今回はOBS-clockというツールを使って時計を作っていく。

 

 

OBS-clockとは

OBS-clock（外部リンク、別タブで開きます）というのは、自由にカスタマイズした時計をWeb上でHTMLの形で生成し、URLを吐き出してくれるツールである。

OBS-clockの画面。GUIで時計の作り込みをして、URLをコピーしてOBSの「ブラウザ」ソースに貼り付けて使う。

お手軽な方法としては、「全般」タブの「テンプレート」から好きなものを選ぶだけで良い。

自分で作り込む場合は、「時刻」「日付」「ラベル」「背景」タブからそれぞれ編集していく。

時計画面の作り込み

今回はこんな感じで作ってみた。

時刻の設定

日付の設定

背景の設定

OBS-clockだけで時計を完成させる場合は、ここでフォントや背景の色を選択してやる。

今回は、後ほどカスタムCSSでフォントや背景色、枠線の色を変更するので、ここでは特に指定していない。

カスタムCSSの必要性

なぜOBS-clock単体でも時計を作れるのに、カスタムCSSを当てるのか？

理由は2点あった。

  1. 選択できるフォントの数が少なすぎる
  2. 背景の透明度が設定できない
１．選択できるフォントが少なすぎる

選べるフォントはこれっぽっきり

はい。フォント、これだけです。凝ったフォントを設定したければ、CSSでカスタムしてやる必要があります。

２．背景の透明度が設定できない

背景だけ透明にしたかった。

しかしながら、OBS-clockの設定画面だと色の設定はRGBまでで、Aが設定できない。

RGBまでで透明度の設定は不可

実際の作業手順

  1. OBS-clockで時計画面をある程度つくり、URLを取得
  2. URLをOBSの「ブラウザ」ソースに貼り付け
  3. カスタムCSSの記述

１．OBS-clockで時計画面をある程度つくり、URLを取得

OBS-clockの「じぇねれーとURL」右下の「コピー」ボタンでURLを取得できる

２．URLをOBSの「ブラウザ」ソースに貼り付け

OBSで「ブラウザ」ソースを追加し、URL入力窓に取得したURLを貼り付ける

３．カスタムCSSの記述

次のようなCSSを書いてみた。

画像はVS code上のもの。最終的にカスタムCSSは、OBSの「ブラウザ」ソースの「カスタムCSS」入力窓に打ち込む

出力結果

解説

「じぇねれーとURL」によって得られたURLをブラウザに入力し、ソースコードを表示すると次のようになっている。

OBS-clockによって得られたHTMLのソースコード（抜粋、一部省略）

hogehogeの部分は、実際は長ったらしいタグ内CSSが書いてあるのだが、構造を見る際の邪魔になるので省略して書いている。

このコードにはclass属性がないので、IDをセレクタとして使用している。

フォントの変更については、前回の記事を参考にして頂きたい。