=========================== フリップ時計ウィジェット OBS / Streamlabs OBS ブラウザソース用ウィジェット =========================== ■ これは何? ---------------------------------------------------------- パタパタ時計(反転フラップ式)風のウェブウィジェットです。 24時間表記の時刻と日付を表示します。フリップアニメーション は純粋な CSS 3D で実装しており、外部ライブラリは一切不要 です。ページ背景は透明なので、配信画面にそのまま重ねられ ます。各スタイルに複数のカラーテーマとフォントを内蔵し、 URLパラメータで切り替え可能。コードの編集は不要です。 ── ファイル一覧 ── flip_clock_pixel.html ピクセル酒場:8-bit RPG ダイアログ 風フレーム+ピクセルフォント。 レトロ/ドット絵系チャンネル向け ■ クイックスタート(OBS / Streamlabs OBS、3スタイル共通) ---------------------------------------------------------- 1. ソース → 追加 → 「ブラウザソース」 2. 「URL」欄にファイルのローカルパスを入力: file:///C:/フォルダ名/flip_clock_leather.html ※ カラー/フォントのパラメータを使う場合は必ず 「URL」欄を使用してください。「ローカルファイル」に チェックを入れるとパラメータが渡せません。 3. 推奨サイズ: pixel 560 x 220 4. 完了。時計は透明背景で画面に重なります。 ■ URLパラメータ(3スタイル共通、& でつなげて併用可能) ---------------------------------------------------------- ?theme= カラーテーマ(下の対応表を参照) ?font= 数字フォント(下の対応表を参照) ?nudge= 数字の上下位置の微調整(単位 em) マイナスで上へ、プラスで下へ移動 例:?nudge=-0.03 ?preview 通常のブラウザでプレビューする際に ダーク背景を表示(OBS内では不要。 OBSでは自動的に透明になります) ── 使用例 ── file:///C:/フォルダ名/flip_clock_leather.html?theme=jade&font=cinzel flip_clock_pixel.html?theme=frost&font=vt323&preview ■ カラーテーマ対応表 ---------------------------------------------------------- ◆ flip_clock_pixel(省略時は amber) amber アンバー(デフォルト) forest フォレストグリーン royal ロイヤルパープル frost フロストブルー crimson クリムゾンレッド slate スレートグレー ■ フォント対応表 ---------------------------------------------------------- ◆ flip_clock_pixel(ピクセルフォント) press Press Start 2P:定番の 8-bit(デフォルト) vt323 VT323:レトロターミナル風 silkscreen Silkscreen:太めのピクセル pixelify Pixelify Sans:柔らかいピクセル ■ サイズ変更 ---------------------------------------------------------- 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/ ==========================================================