OBSに光ってる感じの時間表示【3種フォント】

光ってる感じの時計
所要時間3分

配信者向け
OBSに光ってる感じの時計を表示する

1. 好きなスタイルを選ぶ

下のリンクから好きなスタイルを選ぶ
スタイル 1 スタイル 2
スタイル 3 スタイル 4
スタイル 5 スタイル 6
フォントの色、光の色は後ほど変更可能 *後述

2. OBSでの設定

STEP1. OBS起動
STEP2. ソースからブラウザを新規追加
STEP3. ブラウザのURLの欄に、最初に選んだスタイルのURLを貼り付け
STEP4. カスタムCSSに以下を貼り付け 

body { 
   background-color: rgba(0,0,0,0);
   overflow: hidden;
   margin: 0px auto;
}

STEP5. 完了

◆ 色の変更 + 光の調整

カスタムCSSを書き換えることによって色変更が可能
以下、時間の周りを赤(#ff0000)にするサンプルコード
50pxの数字の値変更で光の調整可能

body { 
   background-color: rgba(0, 0, 0, 0);
   overflow: hidden;
   margin: 0px auto;
}
h1 {
   /* 時間表記のカラーコード */
   color: #ffffff;
   /* 時間の周りの色選択 */
   text-shadow:0 0 50px #ff0000;
}

光部分やフォントに透明度を持たせたい場合はRGBA表記

body { 
   background-color: rgba(0,0,0,0);
   overflow: hidden;
   margin: 0px auto;
}
h1 {
   /* 時間表記のカラーコード */
   color: rgba(255,255,255,0.5);
   /* 時間の周りの色選択 */
   text-shadow:0 0 50px rgba(255,0,0,0.5);
}

RGBAジェネレーター(外部サイト)

-------------------------------------------------------
質問等は下記まで
» Twitter: @64Anz
-------------------------------------------------------