【OBS】生放送に表示する時計を透過したいのでCSSを書いた【コピペすればOK】

4370 ワード
CSS OBS CSS テキストリンク

生放送の配信画面の時刻を透過します

「Y●u Tubeで生放送してみたいなぁ」
「ちょっと時計出すか」
「右下の時計を透過したいのになぁ。。。」→できます

手順

  1. [ソース]の[+]ボタンをクリック

  2. [ブラウザ]をクリック

  3. [新規作成]欄に適当な名前を入力して、[OK]をクリック

  4. 次のような画面が表示されます

  5. [URL]欄にTime.is（東京）のURLを入力
    https://time.is/ja/Tokyo

  6. [カスタムCSS]欄に次のCSSを入力し、 [OK]をクリック

/* 背景を透過する */
body, #mainwrapper {
    background-color: rgba(0,0,0,0);
}

/* 時計の文字色を黒色にする */
#clock {
    color: #000000;
}

完成

※この画像だけ、OBS画面の背景色を灰色に変更しています。

おまけ（時計の文字色を変更）

文字色を変える場合は、#clockのcolorを変更します。

/* 背景を透過する */
body, #mainwrapper {
    background-color: rgba(0,0,0,0);
}

/* 時計の文字色を赤にする */
#clock {
    color: #ff0000;    /* ここのカラーコードを好きな色に変更 */
}

参考