目次
時計を表示してあとで見返してもいつの動画か分かるようにしたい。でもあまり他の要素と被せたくない配信に向いている薄い時計です。
フォントが見やすい v1
#ref(): File not found: "preview1.png" at page "output/obs_tokei"
ピクセルフォントが好きな人向け v2
#ref(): File not found: "preview2.png" at page "output/obs_tokei"
左上・右上・左下・右下版があります。
#ref(): File not found: "preview2_haishin.jpg" at page "output/obs_tokei"
使い方#
obs_tokei_vX.zip をダウンロードして解凍後、OBSのソース追加 > ブラウザ でローカルファイルを読み込んでください
- htmlファイルをOBSにドラッグ&ドロップでもOK
- ブラウザの幅・高さなどはいじらなくてもOKですが、幅700 高さ200とかにしたほうが扱いやすいかも？
- 縮小/拡大などしてもOK
利用規約#
- 改変OK
- 再配布OK・自作発言NG
- 改変したものを配布してもいいですが、「OBSで使える薄い時計を改良しました」などと書いていただけると嬉しいです。
ダウンロード#
- &ref(): File not found: "obs_tokei_v2.zip" at page "output/obs_tokei";
- &ref(): File not found: "obs_tokei_v2a.html" at page "output/obs_tokei"; 左上サンプル
- &ref(): File not found: "obs_tokei_v2b.html" at page "output/obs_tokei"; 右上サンプル
- &ref(): File not found: "obs_tokei_v2c.html" at page "output/obs_tokei"; 左下サンプル
- &ref(): File not found: "obs_tokei_v2d.html" at page "output/obs_tokei"; 右下サンプル
- &ref(): File not found: "obs_tokei_v1.zip" at page "output/obs_tokei";
- &ref(): File not found: "obs_tokei_v1a.html" at page "output/obs_tokei"; 左上サンプル
- &ref(): File not found: "obs_tokei_v1b.html" at page "output/obs_tokei"; 右上サンプル
- &ref(): File not found: "obs_tokei_v1c.html" at page "output/obs_tokei"; 左下サンプル
- &ref(): File not found: "obs_tokei_v1d.html" at page "output/obs_tokei"; 右下サンプル
zipから利用してもらうのを推奨します。*1
カスタマイズ#
htmlファイルをテキストエディタで開き、9行目～30行目付近の <style> で囲まれたCSSという言語で書かれた箇所を変更すると、色などの調整ができます。
背景・文字色の変更#
初期状態#
#ref(): File not found: "custom1.png" at page "output/obs_tokei"
background: rgba(0, 0, 0, 0.9); /* 0.9は透明度（1.0で透明なし） */
/* background: #ff9b4e; */ /* 透明度なしの色指定 */
color: #fff;
背景色を変更（透明度あり）#
ここでは10進数カラーコードを使っています*2
#ref(): File not found: "custom2.png" at page "output/obs_tokei"
background: rgba(40, 80, 0, 0.9);
color: #fff;
背景色を変更（透明度なし）#
ここでは16進数カラーコードを使っています*3
#ref(): File not found: "custom3.png" at page "output/obs_tokei"
background: #ff9b4e;
color: #fff;
文字色を変更（背景なし）
#ref(): File not found: "custom4.png" at page "output/obs_tokei"
background: none;
color: #00f;
角丸をやめる#
#ref(): File not found: "custom5.png" at page "output/obs_tokei"
border-radius: 0 0 10px 0; /* 角丸の設定。全て角丸にするなら全て 10px にする */
border-radius: 0; にすると角丸なしになります。
もっと薄くしたい！#
工事中
変更履歴#
- 2025/1/26
- 名称を「OBSで使える時計」から「OBSで使える薄い時計」に変更しました。
- v2 を追加しました。Silkscreenの数字の1や曜日によって横幅が異なるので、細かい調整をしています。
- 忘れないように書いておくと、どのパターンも左寄せになっています。中央寄せ・右寄せにすると10秒ごとに全体の位置がガタつく問題があるためです。（Silkscreenを使う以上仕方ないと思います）
- v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海外の方への配慮）
