7セグデジタルクロック

使い方

このページのアドレスをOBSのブラウザソースURLに貼り付けるだけ
デフォルトの800x600では左右が切れるので、800x400ぐらいがおすすめです

この説明文はOBS上では表示されないはず

カスタムCSS

カスタム変数を利用したカスタムCSSに対応しています
各値を指定するだけで各種計算等は自動で行われます

何種類か作ってみたのでこちらをOBSブラウザソース設定画面中のカスタムCSS欄にコピペしてみてね
気に入ったものをベースにお好みで調整してください

基本的には色や形の変更ですが、最後の--secについては「秒の表示は要らないよ」という時にお使いください

/* 初期設定のオレンジのもの */
:root {
    /* 
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --active-color: #ff5100;
    --noactive-color: #0002;
    --skew: -5deg; /* 傾き:角度指定(deg) */
    --grow: 30px; /* 光彩の範囲 */
    --seg-lengnth: 100px; /* セグ1本の長さ */
    --seg-thick: 20px; /* セグの太さ */
    --seg-radius: 1; /* セグの丸み(0~1) */
    --gap: 10px; /* セグ間の距離 */
    --sec: 1; /* 秒の透過度 */
}
/* サイバー */
:root {
    /* 
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --active-color: #00ffd5;
    --noactive-color: #0005;

    --skew: 0deg; /* 傾き:角度指定(deg) */
    --grow: 30px; /* 光彩の範囲 */
    --seg-lengnth: 100px; /* セグ1本の長さ */
    --seg-thick: 5px; /* セグの太さ */
    --seg-radius: 0; /* セグの丸み(0~1) */
    --gap: 20px; /* セグ間の距離 */
    --sec: 1; /* 秒の透過度 */
}
/* キュート */
:root {
    /* 
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --active-color: #e9aff8;
    --noactive-color: #0001;

    --skew: 0deg; /* 傾き:角度指定(deg) */
    --grow: 30px; /* 光彩の範囲 */
    --seg-lengnth: 90px; /* セグ1本の長さ */
    --seg-thick: 30px; /* セグの太さ */
    --seg-radius: 1; /* セグの丸み(0~1) */
    --gap: 5px; /* セグ間の距離 */
    --sec: 1; /* 秒の透過度 */
}
/* 8bit */
:root {
    /* 
    背景色、発光色、通常色の設定
    transparent:透過
    #fff、#ffffff、#fff8、#ffffff88:カラーコード(透過度対応)
    rgb(255,0,0)、rgba(255,0,0,128):RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5):HSL
    */
    --background-color: transparent;
    --active-color: #5c6b38;
    --noactive-color: #0001;

    --skew: 0deg; /* 傾き:角度指定(deg) */
    --grow: 0; /* 光彩の範囲 */
    --seg-lengnth: 120px; /* セグ1本の長さ */
    --seg-thick: 30px; /* セグの太さ */
    --seg-radius: 0; /* セグの丸み(0~1) */
    --gap: 15px; /* セグ間の距離 */
    --sec: 1; /* 秒の透過度 */
}

オプション

日付機能を追加しました
カスタムCSSの:root内で--date-displayの値をblockにすると表示されます(デフォルトでは非表示)

/* 日付の追加表示 */
:root {
    --date-display: block; /* 日付部の表示制御 表示:block 非表示:none */
}

タイムゾーン対応

URLパラメータ「timezone」としてタイムゾーンを入力することで現地時間を表示することが出来ます。
https://nmnm.mn/youtube/7segmentclock.html?timezone=UTCとすると、UTCでの時間になります。
https://nmnm.mn/youtube/7segmentclock.html?timezone=Japanで日本時間になりますが、パラメータのない配布URL(https://nmnm.mn/youtube/7segmentclock.html)のように、パラメータが存在しない場合には自動的に「Japan」を入れるようにしていますので、日本時間で使用する場合はパラメータの指定は必要ありません。
任意の地域での時間を表示したい場合はList of tz database time zones(Wikipedia)のTZ database nameを参考にしてください。
例えばニューヨークの時間を表示したい場合は、https://nmnm.mn/youtube/7segmentclock.html?timezone=America/New_Yorkとなります。

日付についてもタイムゾーンの指定が反映されます。