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

開始行:
#title(OBSで使える薄い時計 OBS Slim Clock v3) &ref(./obs_slim_clock_banner_slim.png,75%); 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにし... 表示位置（左上・右上・左下・右下）は設定で変更できます #ref(output/obs_slim_clock/preview3_haishin.png,25%) - [[BOOTH:https://nemusg.booth.pm/items/8740660]]にも同じ... - コーディングにChatGPT利用 - GoogleFonts利用 [[Roboto:https://fonts.google.com/speci... //- Day.js利用（v3以下のみ） [[Day.js MIT License:https:/... * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSの... -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、縮小/拡... * 利用規約 [#h91f29ca] - 改変OK・再配布OK・自作発言NG - 改変したものを配布する場合、「[[OBSで使える薄い時計:htt... * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v3.2.zip); //- &ref(output/obs_slim_clock/obs_tokei_v3.1.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); 右下サ... -- clock-time.php 基本的に利用しなくて大丈夫です。 zipからの利用を推奨します。v3からは4ファイルとも同じコー... ** カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、ファイル内の設定を... *** 時刻のコロン（：）を点滅【v3.1以降】 [#zf9d3064] blinkColon: true, // 時刻のコロンを点滅させる *** 外部サーバーと時刻同期【v3.1以降】 [#ldd529cd] syncTime: true, // 外部サーバーと時刻同期 通常はお使いのPCの時刻を表示しますが、外部サーバー((nemus... *** 背景色を変更（透明度あり） [#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%) - `.ddd-sec` を変更してください((Silkscreenフォントを使用... 変更前 .ddd-sec{ display:inline; } 変更後 .ddd-sec{ display:none; } *** タイムゾーンを非表示にする [#v771bcc1] - `.clock .timezone` を変更してください 変更前 .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年8月26日 -- v3.2 公開。フォントを変更する箇所が間違いやすかったの... - 2026年8月20日 -- v3.1 公開。時刻のコロン（：）を点滅、外部サーバーと時... -- 時刻同期機能の追加に伴い日時処理をJavaScript標準のDate... - 2026年1月23日 -- 海外の人でも読めるように名称を `obs_tokei` から `obs_s... - 2025年12月22日 -- v3 公開。タイムゾーンを表示。土日で色変更。他のフォン... --- 等幅フォントではない Silkscreen を使用すると少し表示... - 2025年1月26日 -- [[v2>output/obs_slim_clock/v1-2]] 公開。Silkscreenの数... --- 忘れないように書いておくと、どのパターンも左寄せにな... -- [[v1>output/obs_slim_clock/v1-2]] の西暦表示を 「YY」... * デバッグモード [#p81c9acb] - 1秒ごとに時計が動くと開発ツールが使いにくいため、下記の... -- `clearInterval(window.__clockTimer)` をコンソールに打つ -- ファイルの末尾に `?debug=1` を付けた状態でファイルを開... #include(parts/feedback,notitle)

終了行:
#title(OBSで使える薄い時計 OBS Slim Clock v3) &ref(./obs_slim_clock_banner_slim.png,75%); 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにし... 表示位置（左上・右上・左下・右下）は設定で変更できます #ref(output/obs_slim_clock/preview3_haishin.png,25%) - [[BOOTH:https://nemusg.booth.pm/items/8740660]]にも同じ... - コーディングにChatGPT利用 - GoogleFonts利用 [[Roboto:https://fonts.google.com/speci... //- Day.js利用（v3以下のみ） [[Day.js MIT License:https:/... * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSの... -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、縮小/拡... * 利用規約 [#h91f29ca] - 改変OK・再配布OK・自作発言NG - 改変したものを配布する場合、「[[OBSで使える薄い時計:htt... * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v3.2.zip); //- &ref(output/obs_slim_clock/obs_tokei_v3.1.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); 右下サ... -- clock-time.php 基本的に利用しなくて大丈夫です。 zipからの利用を推奨します。v3からは4ファイルとも同じコー... ** カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、ファイル内の設定を... *** 時刻のコロン（：）を点滅【v3.1以降】 [#zf9d3064] blinkColon: true, // 時刻のコロンを点滅させる *** 外部サーバーと時刻同期【v3.1以降】 [#ldd529cd] syncTime: true, // 外部サーバーと時刻同期 通常はお使いのPCの時刻を表示しますが、外部サーバー((nemus... *** 背景色を変更（透明度あり） [#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%) - `.ddd-sec` を変更してください((Silkscreenフォントを使用... 変更前 .ddd-sec{ display:inline; } 変更後 .ddd-sec{ display:none; } *** タイムゾーンを非表示にする [#v771bcc1] - `.clock .timezone` を変更してください 変更前 .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年8月26日 -- v3.2 公開。フォントを変更する箇所が間違いやすかったの... - 2026年8月20日 -- v3.1 公開。時刻のコロン（：）を点滅、外部サーバーと時... -- 時刻同期機能の追加に伴い日時処理をJavaScript標準のDate... - 2026年1月23日 -- 海外の人でも読めるように名称を `obs_tokei` から `obs_s... - 2025年12月22日 -- v3 公開。タイムゾーンを表示。土日で色変更。他のフォン... --- 等幅フォントではない Silkscreen を使用すると少し表示... - 2025年1月26日 -- [[v2>output/obs_slim_clock/v1-2]] 公開。Silkscreenの数... --- 忘れないように書いておくと、どのパターンも左寄せにな... -- [[v1>output/obs_slim_clock/v1-2]] の西暦表示を 「YY」... * デバッグモード [#p81c9acb] - 1秒ごとに時計が動くと開発ツールが使いにくいため、下記の... -- `clearInterval(window.__clockTimer)` をコンソールに打つ -- ファイルの末尾に `?debug=1` を付けた状態でファイルを開... #include(parts/feedback,notitle)

ページ名: