時計をあなたのサイトに埋め込む
スタイルを選び、タイムゾーンを決めて、コードを 1 つコピーするだけ。時計は iframe の中で動くので、ページの CSS やスクリプトには一切触れません。登録もインストールも不要です。
フリップカード
数字のみ
追加のしかた
- 1
コードをコピー
上のボタンを使います。ごく普通の HTML なので、ビルドもパッケージ導入も要りません。
- 2
ページに貼り付け
生の HTML を書ける場所ならどこでも構いません。カスタム HTML ブロック、コードブロック、テーマのテンプレートなど。
- 3
保存して再読み込み
時計はすぐに表示されます。ほかに設定するものも、後から更新するものもありません。
使えるプラットフォーム
「カスタム HTML」ブロックに入れるか、テキストウィジェットに貼り付けます。
ページに Code Block を追加し、その中に貼り付けます。
/embed と入力し、コード全体ではなく iframe の URL だけを貼ります。
ページを重くしない時計ウィジェット
時計ウィジェットの多くは JavaScript ライブラリと Web フォントを読み込み、さらに外部サーバーへ 1 回リクエストを送ります。このウィジェットは HTML ファイル 1 つだけで、圧縮して約 5 KB、スタイルとロジックはすべてインラインです。iframe として読み込まれるため、ページの CSS を書き換えることも、スクリプトを妨げることも、訪問者の入力を読むこともできません。
スタイルは 2 種類です。フリップカードは、昔の駅の発車標のような分割フラップ表示を再現し、各桁が影を伴って前へ倒れます。数字のみはカードを外し、大きな等幅数字で表示するので、記事ページやダッシュボードに向いています。どちらも同じ基準で拡大縮小するため、切り替えてもレイアウトがずれません。
タイムゾーンは任意の IANA 名に固定することも、訪問者のローカル時刻に任せることもできます。夏時間はブラウザ内蔵のタイムゾーンデータが扱うので、Europe/London に設定した時計は英国夏時間の切り替えにそのまま追随します。こちら側で更新するものはありません。
この埋め込みは無料で、これからも無料です。iframe の中にアカウントも透かしもありません。
よくある質問
この時計ウィジェットは本当に無料ですか？+
はい。アカウントも支払いも透かしもなく、埋め込む数に制限もありません。時計の下のリンクだけ残していただければ十分です。
Clockhub のリンクは必ず残す必要がありますか？+
強制はしていませんし、削除しても時計は動きます。ただしプロジェクトの収入はこれだけなので、できれば残してください。コピーするコードには最初から含まれています。
iframe でページが遅くなりませんか？+
埋め込み全体で圧縮約 5 KB、写真 1 枚より小さいサイズです。しかも loading="lazy" を指定しているので、視界に入るまでブラウザは読み込みません。
WordPress、Squarespace、Notion でも使えますか？+
WordPress と Squarespace は使えます。カスタム HTML ブロックか Code Block に貼り付けてください。Notion は仕組みが違い、HTML ではなく URL を埋め込むため、/embed ブロックには iframe の URL だけを貼ります。その場合、帰属リンクは表示されません。
別のタイムゾーンを表示できますか？+
はい。設定画面でタイムゾーンを選ぶと、コードに tz パラメータが入ります。Asia/Tokyo や America/New_York など、IANA 名なら何でも使えます。
訪問者の端末の時計が狂っていても正しい時刻になりますか？+
いいえ。訪問者の端末時刻を読み取り、選んだタイムゾーンに換算しているため、端末の時計が狂っていれば表示も狂います。正確な時刻を配信するには読み込みのたびにサーバーへ問い合わせる必要があり、5 KB という軽さを保つためにあえてそうしていません。