output/obs_slim_clock をテンプレートにして作成

開始行:
#title(OBSで使える薄い時計 OBS Slim Clock v3) &ref(./obs_slim_clock_banner_slim.png,75%); 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにし... ''フォントが見やすい v1・ピクセルフォントが好きな人向け v... #ref(output/obs_slim_clock/preview1.png,50%) #ref(output/obs_slim_clock/preview2.png,50%) ''最新のv3はタイムゾーン表示・土日で色変更・他のフォント... #ref(output/obs_slim_clock/preview3.png,50%) 表示位置（左上・右上・左下・右下）は設定で変更できます((v... #ref(output/obs_slim_clock/preview3_haishin.png,25%) - ChatGPT利用 - GoogleFonts利用 [[Roboto:https://fonts.google.com/speci... - Day.js利用 [[Day.js MIT License:https://github.com/iamk... * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSの... -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、縮小/拡... * 利用規約 [#h91f29ca] - 改変OK・再配布OK・自作発言NG - 改変したものを配布してもいいですが、「[[OBSで使える薄い... * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v3.zip); -- &ref(output/obs_slim_clock/obs_tokei_v3a.html); 左上サ... -- &ref(output/obs_slim_clock/obs_tokei_v3b.html); 右上サ... -- &ref(output/obs_slim_clock/obs_tokei_v3c.html); 左下サ... -- &ref(output/obs_slim_clock/obs_tokei_v3d.html); 右下サ... zipからの利用を推奨します。v3からは4ファイルとも同じコー... ** カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、ファイル内の設定を... *** 背景色を変更（透明度あり） [#c832cd15] ここでは[[10進数カラーコード:https://beginners-hp.com/col... #ref(./v3-sample0.png,50%) --bg: rgba(0, 0, 0, 0.8); /* 透明度あり背景色（1.0で透... *** 背景色を変更（透明度なし） [#k4365422] ここでは[[16進数カラーコード:https://beginners-hp.com/col... #ref(./v3-sample2.png,50%) --bg: #6e520d; /* 透明度なし背景色 */ *** 文字色を変更 [#v12eecd6] #ref(./v3-sample1.png,50%) --bg: none; /* 透明度なし背景色 */ --text: #333; /* 文字色 */ *** 角丸をやめる [#b98c4156] #ref(./v3-sample3.png,50%) --corner: 0; /* 角丸の強さ（0にすると角... *** 秒を非表示にする [#tfdda6f2] #ref(./v3-sample4.png,50%) - 121行目を変更してください((Silkscreenフォントを使用して... 変更前 .ddd-sec{ display:inline; } 変更後 .ddd-sec{ display:none; } *** タイムゾーンを非表示にする [#v771bcc1] - 115行目を変更してください 変更前 .clock .timezone { color: var(--tzColor); } 変更後 .clock .timezone { display: none; } *** もっと薄くしたい [#a2c54059] #ref(./v3-sample5.png,50%) /* 余白（フォントによっては調整が必要） */ --padT: 2px; --padR: 6px; --padB: 2px; --padL: 12px; もちろんこれは一例なので好きな値を入れてもOKです。 *** 他のフォントを使う [#m1bccf82] #ref(output/obs_slim_clock/v3-sample-font.png,75%) font: 'Roboto', // Google Fontsのフォント名 weight: 700, // 1～1000 - ここでフォントを変更することができます。[[GoogleFonts:h... - 【注意】を選んだ場合、秒数によって時計の幅が変わりやす... - フォントによっては `--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 【注意】 * 変更履歴 [#tb2be69e] - 2026年1月23日 -- 海外の人でも読めるように名称を `obs_tokei` から `obs_s... - 2025年12月22日 -- v3 を追加しました。タイムゾーンを表示。土日で色変更。... --- 等幅フォントではない Silkscreen を使用すると少し表示... - 2025年1月26日 -- v2 を追加しました。Silkscreenの数字の1や曜日によって横... --- 忘れないように書いておくと、どのパターンも左寄せにな... -- v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海... * 今後やりたいこと [#p81c9acb] - コロンの点滅（点滅の間隔を1～60秒で選べるといいかも） - パラメータなどで停止するモードを追加する（1秒ごとに動か... -- 今も `clearInterval(window.__clockTimer)` をコンソール... #include(parts/feedback,notitle)

終了行:
#title(OBSで使える薄い時計 OBS Slim Clock v3) &ref(./obs_slim_clock_banner_slim.png,75%); 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにし... ''フォントが見やすい v1・ピクセルフォントが好きな人向け v... #ref(output/obs_slim_clock/preview1.png,50%) #ref(output/obs_slim_clock/preview2.png,50%) ''最新のv3はタイムゾーン表示・土日で色変更・他のフォント... #ref(output/obs_slim_clock/preview3.png,50%) 表示位置（左上・右上・左下・右下）は設定で変更できます((v... #ref(output/obs_slim_clock/preview3_haishin.png,25%) - ChatGPT利用 - GoogleFonts利用 [[Roboto:https://fonts.google.com/speci... - Day.js利用 [[Day.js MIT License:https://github.com/iamk... * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSの... -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、縮小/拡... * 利用規約 [#h91f29ca] - 改変OK・再配布OK・自作発言NG - 改変したものを配布してもいいですが、「[[OBSで使える薄い... * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v3.zip); -- &ref(output/obs_slim_clock/obs_tokei_v3a.html); 左上サ... -- &ref(output/obs_slim_clock/obs_tokei_v3b.html); 右上サ... -- &ref(output/obs_slim_clock/obs_tokei_v3c.html); 左下サ... -- &ref(output/obs_slim_clock/obs_tokei_v3d.html); 右下サ... zipからの利用を推奨します。v3からは4ファイルとも同じコー... ** カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、ファイル内の設定を... *** 背景色を変更（透明度あり） [#c832cd15] ここでは[[10進数カラーコード:https://beginners-hp.com/col... #ref(./v3-sample0.png,50%) --bg: rgba(0, 0, 0, 0.8); /* 透明度あり背景色（1.0で透... *** 背景色を変更（透明度なし） [#k4365422] ここでは[[16進数カラーコード:https://beginners-hp.com/col... #ref(./v3-sample2.png,50%) --bg: #6e520d; /* 透明度なし背景色 */ *** 文字色を変更 [#v12eecd6] #ref(./v3-sample1.png,50%) --bg: none; /* 透明度なし背景色 */ --text: #333; /* 文字色 */ *** 角丸をやめる [#b98c4156] #ref(./v3-sample3.png,50%) --corner: 0; /* 角丸の強さ（0にすると角... *** 秒を非表示にする [#tfdda6f2] #ref(./v3-sample4.png,50%) - 121行目を変更してください((Silkscreenフォントを使用して... 変更前 .ddd-sec{ display:inline; } 変更後 .ddd-sec{ display:none; } *** タイムゾーンを非表示にする [#v771bcc1] - 115行目を変更してください 変更前 .clock .timezone { color: var(--tzColor); } 変更後 .clock .timezone { display: none; } *** もっと薄くしたい [#a2c54059] #ref(./v3-sample5.png,50%) /* 余白（フォントによっては調整が必要） */ --padT: 2px; --padR: 6px; --padB: 2px; --padL: 12px; もちろんこれは一例なので好きな値を入れてもOKです。 *** 他のフォントを使う [#m1bccf82] #ref(output/obs_slim_clock/v3-sample-font.png,75%) font: 'Roboto', // Google Fontsのフォント名 weight: 700, // 1～1000 - ここでフォントを変更することができます。[[GoogleFonts:h... - 【注意】を選んだ場合、秒数によって時計の幅が変わりやす... - フォントによっては `--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 【注意】 * 変更履歴 [#tb2be69e] - 2026年1月23日 -- 海外の人でも読めるように名称を `obs_tokei` から `obs_s... - 2025年12月22日 -- v3 を追加しました。タイムゾーンを表示。土日で色変更。... --- 等幅フォントではない Silkscreen を使用すると少し表示... - 2025年1月26日 -- v2 を追加しました。Silkscreenの数字の1や曜日によって横... --- 忘れないように書いておくと、どのパターンも左寄せにな... -- v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海... * 今後やりたいこと [#p81c9acb] - コロンの点滅（点滅の間隔を1～60秒で選べるといいかも） - パラメータなどで停止するモードを追加する（1秒ごとに動か... -- 今も `clearInterval(window.__clockTimer)` をコンソール... #include(parts/feedback,notitle)

ページ名: