【再投稿】OBSのブラウザソースで時刻表示を行う(Time.is)
Added 2020-08-14 17:33:52 +0000 UTCOBS向けにhttp://Time.isの時刻表示の色を変更する【生配信向け】
上記の記事がよかったのでブラウザソース版を書いた。どちらかというと初心者向けではないので注意。
※2020/05/26時点での記事となりますのでご注意ください。
1. OBSのソースにブラウザを作成
2. 作成したブラウザのプロパティを設定
URL、幅、高さを上記画像の通りに設定。CSSは下記の通り。
=====
body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}
#mainwrapper {
background-color: rgba(0, 0, 0, 0);
}
#clock {
color: rgba(51, 51, 51, 1);
font-family: Timeis,'Arial Black','Arial-BoldMT','Arial Bold',Arial,Helvetica,sans-serif;
}
body>*:not(#mainwrapper),
#mainwrapper>div:not(#time_section),
#time_section>div:not(:nth-child(2)) {
display: none;
}
=====
3. 完成
結果: OBSのブラウザソースで時刻表示ができる！！！！
よかったですね。
以上、吾味人美でした。
====================================
おまけ
Q. 背景色を変えたい
A. #mainwrapper の background-color を変更しよう
※CSSはrbbaのa(透明度)が0なので、1にするのを忘れないでください。
Q. フォント(色、種類)を変えたい
A. #clock の color、font-family を変更しよう
※OBSのアップデートでカスタムCSSに2バイト文字使えなくなってるみたいなので、フォント指定の際は気をつけて下さい。
