output/obs_slim_clock の履歴(No.20)

目次

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

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

#ref(): File not found: "preview1.png" at page "output/obs_tokei"

#ref(): File not found: "preview2.png" at page "output/obs_tokei"

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

#ref(): File not found: "preview3.png" at page "output/obs_tokei"

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

#ref(): File not found: "preview3_haishin.png" at page "output/obs_tokei"

使い方#

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

利用規約#

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

ダウンロード#

  • &ref(): File not found: "obs_tokei_v3.zip" at page "output/obs_tokei";
    • &ref(): File not found: "obs_tokei_v3a.html" at page "output/obs_tokei"; 左上サンプル
    • &ref(): File not found: "obs_tokei_v3b.html" at page "output/obs_tokei"; 右上サンプル
    • &ref(): File not found: "obs_tokei_v3c.html" at page "output/obs_tokei"; 左下サンプル
    • &ref(): File not found: "obs_tokei_v3d.html" at page "output/obs_tokei"; 右下サンプル

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

カスタマイズ#

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

【以下編集中！！】

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

ここでは10進数カラーコードを使っています*2

--bg: rgba(0, 0, 0, 0.95);		 /* 透明度あり背景色（1.0で透明なし） */

背景色を変更（透明度なし）#

ここでは16進数カラーコードを使っています*3

--bg: #6e520d;                     /* 透明度なし背景色 */

文字色を変更#

--bg: none;                  /* 透明度なし背景色 */
--text: #333;                          /* 文字色 */

角丸をやめる#

--corner: 0;                        /* 角丸の強さ（0にすると角丸なし） */

秒を非表示にする#

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

変更前

.ddd-sec{ display:inline; }

変更後

.ddd-sec{ display:none; }

もっと薄くしたい#

厚さが気になる場合は、paddingの1・3番目を調整してください。

//左上・左下パターン
padding: 2px 12px 6px; // 変更前
padding: 0 12px 2px; // 変更後
//右上・右下パターン
padding: 2px 4px 6px 20px; // 変更前
padding: 0 4px 2px 20px; // 変更後

もちろんこれは一例なので好きな値を入れてもOKです。ただ横幅 width を狭くしすぎると日時や時間帯によって数字が見切れる可能性があります。例えばv2では 0000/00/00<span>Mon</span>00:00 のときが一番幅を取ります。

#ref(): File not found: "custom_list.png" at page "output/obs_tokei"

変更履歴#

  • 2025年12月22日
    • v3 を追加しました。タイムゾーンを表示。土日で色変更。他のフォントに変更できるようになりました。
      • 等幅フォントではない Silkscreen を使用すると少し表示がガタつくので Silkscreen を使うなら v2 のが良いかも*5
  • 2025年1月26日
    • v2 を追加しました。Silkscreenの数字の1や曜日によって横幅が異なるので、細かい調整をしています。
      • 忘れないように書いておくと、どのパターンも左寄せになっています。中央寄せ・右寄せにすると10秒ごとに全体の位置がガタつく問題があるためです。（Silkscreenを使う以上仕方ないと思います）
    • v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海外の方への配慮）
*1 v3以降
*2 透明度を設定する場合は10進数である必要があります
*3 透明なしの場合16進数を使うことが一般的ですが、ここも10進数を使うこともできます。
*4 Silkscreenフォントを使用して横幅を固定した場合、秒数が減った分 --width: を減らすと良いかも
*5 v2の秒が1のときにガタつかない理由がわからず踏襲できませんでした