ねむすぎノート
ねむすぎノート
目次
時計を表示してあとで見返してもいつの動画か分かるようにしたい。なおかつ動画の要素と被りにくい薄い時計です。
表示位置（左上・右上・左下・右下）は設定で変更できます
obs_slim_clock_vX.zip をダウンロードして解凍後、OBSのソース追加 > ブラウザ でローカルファイルを読み込んでください
obs_tokei_v3.1.zip
obs_tokei_v3a.html 左上サンプルobs_tokei_v3b.html 右上サンプルobs_tokei_v3c.html 左下サンプルobs_tokei_v3d.html 右下サンプルzipからの利用を推奨します。v3からは4ファイルとも同じコードになっていて、150行目の pos: の設定だけ変わっています。
htmlファイルをテキストエディタで開き、ファイル内の設定を変更すると、色などの調整ができます。v3から書き方が変わりました。
blinkColon: true, // 時刻のコロンを点滅させる
syncTime: true, // 外部サーバーと時刻同期
通常はお使いのPCの時刻を表示しますが、外部サーバー*1に時刻を同期する機能になります。これでお使いのPCの時刻よりも正しい時刻になる可能性があります。起動時に1回同期し、その後は24時間ごとに再同期。同期に失敗した場合はPCの時刻を表示します。
ここでは10進数カラーコードを使っています*2。0, 0, 0 で黒になります。
--bg: rgba(0, 0, 0, 0.8); /* 透明度あり背景色（1.0で透明なし） */
ここでは16進数カラーコードを使っています*3
--bg: #6e520d; /* 透明度なし背景色 */
--bg: none; /* 透明度なし背景色 */ --text: #333; /* 文字色 */
--corner: 0; /* 角丸の強さ（0にすると角丸なし） */
変更前
.ddd-sec{ display:inline; }
変更後
.ddd-sec{ display:none; }
変更前
.clock .timezone { color: var(--tzColor); }
変更後
.clock .timezone { display: none; }
/* 余白（フォントによっては調整が必要） */ --padT: 2px; --padR: 6px; --padB: 2px; --padL: 12px;
もちろんこれは一例なので好きな値を入れてもOKです。
font: 'Roboto', // Google Fontsのフォント名 weight: 700, // 1～1000
--width を固定したほうがいいです。--letterSpacing の変更も必要です。// Roboto / 700（デフォルト・v1と同じ） // Noto Sans / 400 // Noto Sans Mono / 400 // DotGothic16 / 400 // Doto / 900 // Silkscreen / 400 （v2と同じ） 【注意】 // Bytesized / 400 // VT323 / 400 // Cutive Mono / 400 // Syne Mono / 400 // Tiny5 / 400 // LINE Seed JP / 400 【注意】
obs_tokei から obs_slim_clock に変更。clearInterval(window.__clockTimer) をコンソールに打つと止まる