========================================================== フリップ時計ウィジェット — OBS / Streamlabs OBS ブラウザソース用ウィジェット ========================================================== ■ これは何? ---------------------------------------------------------- パタパタ時計(反転フラップ式)風のウェブウィジェットです。 24時間表記の時刻と日付を表示します。フリップアニメーション は純粋な CSS 3D で実装しており、外部ライブラリは一切不要 です。ページ背景は透明なので、配信画面にそのまま重ねられ ます。各スタイルに複数のカラーテーマとフォントを内蔵し、 URLパラメータで切り替え可能。コードの編集は不要です。 ── ファイル一覧 ── flip_clock_leather.html ダークレザー:レザー質感カード+ メタリックなセリフ体数字。 落ち着いた高級感 ■ クイックスタート(OBS / Streamlabs OBS、3スタイル共通) ---------------------------------------------------------- 1. ソース → 追加 → 「ブラウザソース」 2. 「URL」欄にファイルのローカルパスを入力: file:///D:/フォルダ名/flip_clock_leather.html ※ カラー/フォントのパラメータを使う場合は必ず 「URL」欄を使用してください。「ローカルファイル」に チェックを入れるとパラメータが渡せません。 3. 推奨サイズ: leather 560 x 240 4. 完了。時計は透明背景で画面に重なります。 ■ URLパラメータ(3スタイル共通、& でつなげて併用可能) ---------------------------------------------------------- ?theme= カラーテーマ(下の対応表を参照) ?font= 数字フォント(下の対応表を参照) ?nudge= 数字の上下位置の微調整(単位 em) マイナスで上へ、プラスで下へ移動 例:?nudge=-0.03 ?preview 通常のブラウザでプレビューする際に ダーク背景を表示(OBS内では不要。 OBSでは自動的に透明になります) ── 使用例 ── file:///D:/フォルダ名/flip_clock_leather.html?theme=jade&font=cinzel flip_clock_pixel.html?theme=frost&font=vt323&preview ■ カラーテーマ対応表 ---------------------------------------------------------- ◆ flip_clock_leather(省略時は gold) gold ゴールド(デフォルト) rose ローズカッパー silver ムーンライトシルバー jade 翡翠グリーン amethyst アメジストパープル ice アイスブルー ■ フォント対応表 ---------------------------------------------------------- ◆ flip_clock_leather(セリフ体、数字は等高) dm DM Serif Display:上品で高コントラスト(デフォルト) cinzel Cinzel:ローマ碑文の彫刻風 bodoni Bodoni Moda:ファッション誌風 marcellus Marcellus:クラシックで柔らかい ■ サイズ変更 ---------------------------------------------------------- HTMLファイルをテキストエディタで開き、冒頭の :root 内に ある2つの値を変更してください: --digit-w: 62px; /* 数字カード1枚の幅 */ --digit-h: 92px; /* 数字カード1枚の高さ */ その他の要素(文字サイズ・余白・日付)は自動的に 比率を保ってスケールします。 ■ よくある質問 ---------------------------------------------------------- Q: 数字が表示されない、フォントがおかしい? A: フォントは Google Fonts からオンラインで読み込むため、 初回読み込み時はインターネット接続が必要です。 Q: 背景が透明にならない? A: OBSのブラウザソースはデフォルトで透明です。通常の ブラウザで開くと白背景になります。?preview を付けると ダーク背景でのプレビューが確認できます。 Q: パラメータが反映されない? A: OBSの「URL」欄に入力しているか、「ローカルファイル」の チェックが外れているかを確認してください。パラメータは & でつなぎ、最初のパラメータの前には ? を付けます。 Q: 数字が上下中央に見えない? A: フォントごとに内部の寸法(メトリクス)が異なるため、 各フォントにはあらかじめ補正値を設定しています。 それでもずれて見える場合は ?nudge= で微調整して ください(マイナスで上、プラスで下)。例:?nudge=-0.03 Q: 時刻がずれている? A: 時刻はPCのシステム時計をそのまま読み取ります。 システムの時刻設定を確認してください。 ■ 共有について ---------------------------------------------------------- 自由に使用・共有していただけます。 TWITCH:https://www.twitch.tv/rein0919 X(TWITTER):https://x.com/Rein55523042 BOOTH:https://reinnier.booth.pm/ ==========================================================