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

開始行:
''こちらは旧バージョンですが良いところもあるので引き続き... #title(OBSで使える薄い時計 OBS Slim Clock v1-2) 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにし... ''フォントが見やすい v1'' #ref(output/obs_slim_clock/preview1.png,50%) ''ピクセルフォントが好きな人向け v2'' #ref(output/obs_slim_clock/preview2.png,50%) 左上・右上・左下・右下版があります。 #ref(output/obs_slim_clock/preview2_haishin.jpg,50%) - ChatGPT利用 - GoogleFont利用 [[Roboto:https://fonts.google.com/specim... - Day.js利用 [[Day.js MIT License:https://github.com/iamk... * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSの... -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、幅700 ... - 縮小/拡大などしてもOK * 利用規約 [#h91f29ca] - 改変OK - 再配布OK・自作発言NG -- 改変したものを配布してもいいですが、「[[OBSで使える薄... * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v2.zip); -- &ref(output/obs_slim_clock/obs_tokei_v2a.html); 左上サ... -- &ref(output/obs_slim_clock/obs_tokei_v2b.html); 右上サ... -- &ref(output/obs_slim_clock/obs_tokei_v2c.html); 左下サ... -- &ref(output/obs_slim_clock/obs_tokei_v2d.html); 右下サ... - &ref(output/obs_slim_clock/obs_tokei_v1.zip); -- &ref(output/obs_slim_clock/obs_tokei_v1a.html); 左上サ... -- &ref(output/obs_slim_clock/obs_tokei_v1b.html); 右上サ... -- &ref(output/obs_slim_clock/obs_tokei_v1c.html); 左下サ... -- &ref(output/obs_slim_clock/obs_tokei_v1d.html); 右下サ... zipから利用してもらうのを推奨します。((サンプルを「名前を... * カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、9行目～30行目付近の... ** 背景・文字色の変更 [#v4f18c13] *** 初期状態 [#l63732d5] #ref(output/obs_slim_clock/custom1.png,50%) background: rgba(0, 0, 0, 0.9); /* 0.9は透明度（1.0で透... /* background: #ff9b4e; */ /* 透明度なしの色指定 */ color: #fff; *** 背景色を変更（透明度あり） [#c832cd15] ここでは[[10進数カラーコード:https://beginners-hp.com/col... #ref(output/obs_slim_clock/custom2.png,50%) background: rgba(40, 80, 0, 0.9); color: #fff; *** 背景色を変更（透明度なし） [#k4365422] ここでは[[16進数カラーコード:https://beginners-hp.com/col... #ref(output/obs_slim_clock/custom3.png,50%) background: #ff9b4e; color: #fff; *** 文字色を変更（背景なし） [#v12eecd6] #ref(output/obs_slim_clock/custom4.png,50%) background: none; color: #00f; ** 角丸をやめる [#b98c4156] #ref(output/obs_slim_clock/custom5.png,50%) border-radius: 0 0 10px 0; /* 角丸の設定。全て角丸にする... `border-radius: 0;` にすると角丸なしになります。 ** 秒を非表示にする [#tfdda6f2] #ref(output/obs_slim_clock/custom6.png,50%) - htmlファイルの下の方のコードから `:ss` を削除してくださ... 変更前 now.format('YYYY/MM/DD ddd HH:mm:ss'); 変更後 now.format('YYYY/MM/DD ddd HH:mm'); - 【v2限定】17行目付近の `width: 590px;` を `width: 520px... ** もっと薄くしたい [#a2c54059] 厚さが気になる場合は、paddingの1・3番目を調整してください。 //左上・左下パターン padding: 2px 12px 6px; // 変更前 padding: 0 12px 2px; // 変更後 //右上・右下パターン padding: 2px 4px 6px 20px; // 変更前 padding: 0 4px 2px 20px; // 変更後 もちろんこれは一例なので好きな値を入れてもOKです。ただ横... #ref(output/obs_slim_clock/custom_list.png,50%) * 変更履歴 [#tb2be69e] - 2025/1/26 -- 名称を「OBSで使える時計」から「OBSで使える薄い時計」に... -- v2 を追加しました。Silkscreenの数字の1や曜日によって横... --- 忘れないように書いておくと、どのパターンも左寄せにな... -- v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海... //* 参考 [#o9c3ee39] // //- [[day.jsでの日付処理まとめ:https://zenn.dev/akkie1030... //- [[moment.js を使った日付の計算:https://qiita.com/dain... //- [[moment.js・day.js よりも速くて軽い cdate ライブラリ... #include(parts/feedback,notitle)

終了行:
''こちらは旧バージョンですが良いところもあるので引き続き... #title(OBSで使える薄い時計 OBS Slim Clock v1-2) 目次 #contents 時計を表示してあとで見返してもいつの動画か分かるようにし... ''フォントが見やすい v1'' #ref(output/obs_slim_clock/preview1.png,50%) ''ピクセルフォントが好きな人向け v2'' #ref(output/obs_slim_clock/preview2.png,50%) 左上・右上・左下・右下版があります。 #ref(output/obs_slim_clock/preview2_haishin.jpg,50%) - ChatGPT利用 - GoogleFont利用 [[Roboto:https://fonts.google.com/specim... - Day.js利用 [[Day.js MIT License:https://github.com/iamk... * 使い方 [#ve565ff2] - `obs_slim_clock_vX.zip` をダウンロードして解凍後、OBSの... -- htmlファイルをOBSにドラッグ&ドロップでもOK - ブラウザの幅・高さなどはいじらなくてもOKですが、幅700 ... - 縮小/拡大などしてもOK * 利用規約 [#h91f29ca] - 改変OK - 再配布OK・自作発言NG -- 改変したものを配布してもいいですが、「[[OBSで使える薄... * ダウンロード [#f6cc09a6] - &ref(output/obs_slim_clock/obs_tokei_v2.zip); -- &ref(output/obs_slim_clock/obs_tokei_v2a.html); 左上サ... -- &ref(output/obs_slim_clock/obs_tokei_v2b.html); 右上サ... -- &ref(output/obs_slim_clock/obs_tokei_v2c.html); 左下サ... -- &ref(output/obs_slim_clock/obs_tokei_v2d.html); 右下サ... - &ref(output/obs_slim_clock/obs_tokei_v1.zip); -- &ref(output/obs_slim_clock/obs_tokei_v1a.html); 左上サ... -- &ref(output/obs_slim_clock/obs_tokei_v1b.html); 右上サ... -- &ref(output/obs_slim_clock/obs_tokei_v1c.html); 左下サ... -- &ref(output/obs_slim_clock/obs_tokei_v1d.html); 右下サ... zipから利用してもらうのを推奨します。((サンプルを「名前を... * カスタマイズ [#q5275e88] htmlファイルをテキストエディタで開き、9行目～30行目付近の... ** 背景・文字色の変更 [#v4f18c13] *** 初期状態 [#l63732d5] #ref(output/obs_slim_clock/custom1.png,50%) background: rgba(0, 0, 0, 0.9); /* 0.9は透明度（1.0で透... /* background: #ff9b4e; */ /* 透明度なしの色指定 */ color: #fff; *** 背景色を変更（透明度あり） [#c832cd15] ここでは[[10進数カラーコード:https://beginners-hp.com/col... #ref(output/obs_slim_clock/custom2.png,50%) background: rgba(40, 80, 0, 0.9); color: #fff; *** 背景色を変更（透明度なし） [#k4365422] ここでは[[16進数カラーコード:https://beginners-hp.com/col... #ref(output/obs_slim_clock/custom3.png,50%) background: #ff9b4e; color: #fff; *** 文字色を変更（背景なし） [#v12eecd6] #ref(output/obs_slim_clock/custom4.png,50%) background: none; color: #00f; ** 角丸をやめる [#b98c4156] #ref(output/obs_slim_clock/custom5.png,50%) border-radius: 0 0 10px 0; /* 角丸の設定。全て角丸にする... `border-radius: 0;` にすると角丸なしになります。 ** 秒を非表示にする [#tfdda6f2] #ref(output/obs_slim_clock/custom6.png,50%) - htmlファイルの下の方のコードから `:ss` を削除してくださ... 変更前 now.format('YYYY/MM/DD ddd HH:mm:ss'); 変更後 now.format('YYYY/MM/DD ddd HH:mm'); - 【v2限定】17行目付近の `width: 590px;` を `width: 520px... ** もっと薄くしたい [#a2c54059] 厚さが気になる場合は、paddingの1・3番目を調整してください。 //左上・左下パターン padding: 2px 12px 6px; // 変更前 padding: 0 12px 2px; // 変更後 //右上・右下パターン padding: 2px 4px 6px 20px; // 変更前 padding: 0 4px 2px 20px; // 変更後 もちろんこれは一例なので好きな値を入れてもOKです。ただ横... #ref(output/obs_slim_clock/custom_list.png,50%) * 変更履歴 [#tb2be69e] - 2025/1/26 -- 名称を「OBSで使える時計」から「OBSで使える薄い時計」に... -- v2 を追加しました。Silkscreenの数字の1や曜日によって横... --- 忘れないように書いておくと、どのパターンも左寄せにな... -- v1 の西暦表示を 「YY」から「YYYY」に変更しました。（海... //* 参考 [#o9c3ee39] // //- [[day.jsでの日付処理まとめ:https://zenn.dev/akkie1030... //- [[moment.js を使った日付の計算:https://qiita.com/dain... //- [[moment.js・day.js よりも速くて軽い cdate ライブラリ... #include(parts/feedback,notitle)

ページ名: