OBSで使える薄い時計 OBS Slim Clock v3

目次

時計を表示してあとで見返してもいつの動画か分かるようにしたい。なおかつ動画の要素と被りにくい薄い時計です。

フォントが見やすい v1・ピクセルフォントが好きな人向け v2 については OBSで使える薄い時計v1-2 へ。

最新のv3はタイムゾーン表示・土日で色変更・他のフォントに変更できるようになりました

表示位置（左上・右上・左下・右下）は設定で変更できます*1

• ChatGPT利用
• GoogleFonts利用 Roboto Silkscreen
• Day.js利用 Day.js MIT License

使い方#

• obs_slim_clock_vX.zip をダウンロードして解凍後、OBSのソース追加 > ブラウザ でローカルファイルを読み込んでください
  • htmlファイルをOBSにドラッグ&ドロップでもOK
• ブラウザの幅・高さなどはいじらなくてもOKですが、縮小/拡大して大きさを調整する場合、幅700 高さ200とかにしたほうが扱いやすいかも

利用規約#

• 改変OK・再配布OK・自作発言NG
• 改変したものを配布してもいいですが、「OBSで使える薄い時計を改良しました」などと書いていただけると嬉しいです。

ダウンロード#

• obs_tokei_v3.zip
  • obs_tokei_v3a.html 左上サンプル
  • obs_tokei_v3b.html 右上サンプル
  • obs_tokei_v3c.html 左下サンプル
  • obs_tokei_v3d.html 右下サンプル

zipからの利用を推奨します。v3からは4ファイルとも同じコードになっていて、137行目の pos: の設定だけ変わっています。

カスタマイズ#

htmlファイルをテキストエディタで開き、ファイル内の設定を変更すると、色などの調整ができます。v3から書き方が変わりました。

背景色を変更（透明度あり）#

ここでは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にすると角丸なし） */

秒を非表示にする#

• 121行目を変更してください*4

変更前

.ddd-sec{ display:inline; }

変更後

.ddd-sec{ display:none; }

タイムゾーンを非表示にする#

• 115行目を変更してください

変更前

.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

• ここでフォントを変更することができます。GoogleFontsにあるものなら多分どれでも設定できます。*5
• 【注意】を選んだ場合、秒数によって時計の幅が変わりやすいので、23行目の --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 【注意】

変更履歴#

• 2026年1月23日
  • 海外の人でも読めるように名称を obs_tokei から obs_slim_clock に変更。
• 2025年12月22日
  • v3 を追加しました。タイムゾーンを表示。土日で色変更。他のフォントに変更できるようになりました。
    • 等幅フォントではない Silkscreen を使用すると少し表示がガタつくので Silkscreen を使うなら v2 のが良いかも*6
• 2025年1月26日
  • v2 を追加しました。Silkscreenの数字の1や曜日によって横幅が異なるので、細かい調整をしています。
    • 忘れないように書いておくと、どのパターンも左寄せになっています。中央寄せ・右寄せにすると10秒ごとに全体の位置がガタつく問題があるためです。（Silkscreenを使う以上仕方ないと思います）
  • v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海外の方への配慮）

今後やりたいこと#

• コロンの点滅（点滅の間隔を1～60秒で選べるといいかも）
• パラメータなどで停止するモードを追加する（1秒ごとに動かれると開発ツールが使いにくい）
  • 今も clearInterval(window.__clockTimer) をコンソールに打つと止まる

• FrontPage(9)
• memo/daiso_tws_g273_4(8)
• blog/pad.rtwiki.net(6)
• game/overwatch2(3)
• game/super_monkey_daiboken(2)
• setting/mac_input(2)
• syokubutu/callus_ncr(2)
• memo(2)
• twitch(2)
• twitch/pc_ikou(2)