トップ/output/obs_tokei

OBSで使える薄い時計 obs_tokei

最終更新: 2025-02-11 (火) 12:37:41

目次

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

フォントが見やすい v1

preview1.png

ピクセルフォントが好きな人向け v2

preview2.png

左上・右上・左下・右下版があります。

preview2_haishin.jpg

使い方#

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

利用規約#

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

ダウンロード#

zipから利用してもらうのを推奨します。*1

カスタマイズ#

htmlファイルをテキストエディタで開き、9行目～30行目付近の <style> で囲まれたCSSという言語で書かれた箇所を変更すると、色などの調整ができます。

背景・文字色の変更#

初期状態#

custom1.png
background: rgba(0, 0, 0, 0.9); /* 0.9は透明度（1.0で透明なし） */
/* background: #ff9b4e; */ /* 透明度なしの色指定 */
color: #fff;

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

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

custom2.png
background: rgba(40, 80, 0, 0.9);
color: #fff;

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

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

custom3.png
background: #ff9b4e;
color: #fff;

文字色を変更（背景なし）#

custom4.png
background: none;
color: #00f;

角丸をやめる#

custom5.png
border-radius: 0 0 10px 0; /* 角丸の設定。全て角丸にするなら全て 10px にする */

border-radius: 0; にすると角丸なしになります。

もっと薄くしたい#

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

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

もちろんこれは一例なので好きな値を入れてもOKです。ただ横幅 width を狭くしすぎると日時や時間帯によって数字が見切れる可能性があります。

custom_list.png

変更履歴#

  • 2025/1/26
    • 名称を「OBSで使える時計」から「OBSで使える薄い時計」に変更しました。
    • v2 を追加しました。Silkscreenの数字の1や曜日によって横幅が異なるので、細かい調整をしています。
      • 忘れないように書いておくと、どのパターンも左寄せになっています。中央寄せ・右寄せにすると10秒ごとに全体の位置がガタつく問題があるためです。（Silkscreenを使う以上仕方ないと思います）
    • v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海外の方への配慮）
*1 サンプルを「名前を付けて保存」した場合、GoogleFontとDay.jsがローカルに保存されます。外部と通信しないオフライン版のような使い方がしたい人に良いかも？
*2 透明度を設定する場合は10進数である必要があります
*3 透明なしの場合16進数を使うことが一般的ですが、ここも10進数を使うこともできます。
  • Bluesky
  • Hatena
添付ファイル: custom_list.png 72件 [詳細] custom5.png 67件 [詳細] custom1.png 73件 [詳細] custom2.png 71件 [詳細] custom3.png 70件 [詳細] custom4.png 75件 [詳細] obs_tokei_v2c.html 97件 [詳細] obs_tokei_v2d.html 88件 [詳細] obs_tokei_v2.zip 85件 [詳細] obs_tokei_v2a.html 125件 [詳細] obs_tokei_v2b.html 110件 [詳細] obs_tokei_v1b.html 167件 [詳細] obs_tokei_v1c.html 128件 [詳細] obs_tokei_v1d.html 212件 [詳細] obs_tokei_v1.zip 82件 [詳細] obs_tokei_v1a.html 245件 [詳細] preview2_haishin.jpg 93件 [詳細] preview2.png 107件 [詳細] preview1.png 76件 [詳細]