ウェブページにパタパタ時計を埋め込む（iframe ひとつ）

どんなウェブサイトにも貼れるコードです。貼れば、そのページに動くパタパタ時計ができます。

プラグインのインストールも、テーマファイルの編集も、アカウント登録も、支払いも要りません。

以下では四つを説明します。追加のしかた、スタイルの種類、使える場面、自分のサイトに馴染ませる方法です。

I. 3 分でサイトに追加

まず埋め込みジェネレーターを開きます。左でスタイル・タイムゾーン・色を選ぶと、右のプレビューがその場で変わります。気に入ったら「コードを表示」を押してコピーします。

あとはサイトに貼るだけです。貼る場所はプラットフォームによって違います。

保存して再読み込みすれば、時計が出ています。

つまずきやすいところをいくつか。WordPress のクラシックエディタは「ビジュアル」ではなく「テキスト」に切り替えてください。Elementor などのページビルダーには「HTML」ウィジェットがあります。Notion は URL しか受け付けないので、時計の下の小さなクレジット行は表示されません。

II. 2 つのスタイルから選ぶ

左がパタパタ、右が数字だけ。どちらも本物で、動いています。

パタパタは、昔の駅や空港の出発案内板を模したものです。各数字が横の継ぎ目で上下に分かれ、数字が変わるときに上半分が前に倒れます。存在感があるので、ページの上部、イベントページ、目を引かせたい場所に向いています。

数字だけは大きな文字が一行だけ。静かで読みやすく、サイドバー、記事の途中、ダッシュボードに向いています。時計を眺めるのではなく、時刻を読む場所です。

ひとことで言えば、時計そのものを飾りにしたいならパタパタ、時刻が読めればいいなら数字だけ。

よく使うサイズは三通りです。

これより狭くすると、時計全体が縮小されます。切れはしませんが、文字は小さくなります。

III. どんな場面で使えるか

同じコード、4 つの場面。色とサイズが違い、コードの差は数個のパラメータだけです。

イベントページ。 発表会、開店、結婚式の招待、年末のページ。動く時計は、静止画のスクリーンショットより重みがあります。

営業時間。 カフェ、レストラン、工房のサイトなら、「平日 9:00–18:00」と書くより、現地時刻を示す時計のほうが直感的です。いま開いているかどうかが一目で分かります。

リモートチーム。 ダッシュボードにクライアントの都市の時計を置けば、会議の前に時差の計算をしなくて済みます。

ポートフォリオと個人ブログ。 小さく動く要素はほぼコストゼロで、ページがテンプレートに見えなくなります。

ランディングページと製品ページ。 フッターや隅に。内容の邪魔をせず、ページが生きている感じになります。

向かないのはカウントダウンが必要な場所です。「公開まであと 3 日」はこの時計の仕事ではありません。表示するのは現在時刻で、残り時間ではありません。

IV. サイトの色に合わせる

既定では背景がありません。透明です。だからあなたのページに、もともとそこにあったかのように収まります。白い板も黒い穴も出ません。

ただし透明ということは、あなたのページが何色かを知らないということでもあります。明るいページなら既定のライトテーマで合いますが、暗いページなら教えてあげる必要があります。

方法は二つ。

ひとつ目はテーマ。 ジェネレーターで「ダーク」か「ライト」を選ぶだけ。配色が揃った二組で、切り替えはワンクリックです。

ふたつ目は自分で配色。 パラメータは三つ。

• bg — 全体の背景。既定は透明
• card — パタパタのカードの色
• ink — 数字の色

カードを琥珀色にしました。後ろの暗い面はこの記事のもので、時計のものではありません。時計自身は背景を持ちません。

ジェネレーターにはカラーピッカーがあるので、パラメータ名を覚えなくてもクリックだけで済みます。

V. 時刻と中身

タイムゾーン。 既定では訪問者のパソコンの時刻を表示します。都市に固定したいときは都市名を書きます。Asia/Tokyo、Europe/London、America/New_York など。夏時間にも自動で追従するので、年二回の切り替えを気にする必要はありません。

12 時間制か 24 時間制か。 数字ひとつで変わります。format=12 か format=24。

秒。 秒が動き続けるのが落ち着かないなら、切れます。

日付と都市名。 数字だけのスタイル限定です。日付の行を足したり、「TOKYO」のような都市ラベルを出したりできます。

クリック時の遷移。 既定では時計をクリックすると Clockhub が開きます。訪問者をページに留めたいなら切ってください。

どれもジェネレーターのスイッチです。チェックを入れるとコードが変わるので、手で書き換える必要はありません。

VI. サイトが重くなりませんか

ウェブページに載る普通の写真は 200 KB 前後。この時計は 3.6 KB です。

なりません。

圧縮して 3.6 KB、リクエストは 1 本です。比較として、ウェブページの普通の写真は 200 KB 前後。この時計はその 56 分の 1 未満です。

React も、ウェブフォントも、アイコンライブラリも読み込みません。書体は端末にもともと入っているもの（ヒラギノ、メイリオ、Helvetica）を使うので、ダウンロードは発生しません。

しかも既定で遅延読み込みです。訪問者がその位置までスクロールしなければ、そもそも読み込まれません。

唯一増えるのはアクセス解析のスクリプトで、これは何サイトで使われているかを知るためのものです。ページが暇になってから動き出すので、あなたのコンテンツと帯域を奪いません。ローカルのプレビューでは送信しません。

VII. よくある質問

有料ですか。登録は必要ですか。

不要です。アカウントも、透かしも、「Pro にアップグレード」もありません。

広告は入りますか。

時計に広告はなく、ポップアップも出ません。ClockHub 本体は広告で運営していますが、埋め込まれた時計には広告を入れていません。

スマホで崩れませんか。

崩れません。指定した枠に合わせて自動で拡大縮小するので、縦でも横でも切れずに収まります。

1 ページに複数置けますか。

いくつでも置けます。それぞれ別のタイムゾーンにできます。東京・ロンドン・ニューヨークを並べたチームページはよくある使い方です。

別のプラットフォームでも使えますか。

HTML か iframe を貼れるプラットフォームなら使えます。上の表に代表的なものを挙げました。URL しか受け付けない場合（Notion など）は、コード全体ではなくアドレスだけを貼ってください。

表示される時刻が自分のパソコンと違います。

タイムゾーンのパラメータを確認してください。指定しなければ訪問者の現地時刻、指定すればその都市の時刻に固定されます。

SEO に悪影響はありますか。

ありません。iframe の中身はあなたのページの内容として数えられません。逆に言えば、「時間」に関するキーワードをこれで足そうとは考えないでください。ページを遅くすることもありません。3.6 KB で、遅延読み込みです。

商用利用できますか。

できます。個人サイトも商用サイトも、申請もクレジット表記も不要です。

コードの末尾には既定で小さな「Clockhub」リンクが付きます。不要ならその行を消してください。時計はそのまま動きます。

VIII. コードを取ってくる

上の時計はどれも本物で、スクリーンショットではありません。これから受け取るファイルと同じものが、一字違わず動いています。

埋め込みジェネレーターへ。スタイルとタイムゾーンを選び、色を調整すればコードができます。コピーして貼れば終わり。1 分もかかりません。

時刻だけでなく、設定ドロワー、書体、旧暦、全画面まで欲しいなら、サイト内のパタパタ時計です。こちらは高機能ですが、他人のページには引っ越せません。

埋め込むほうはひとつのことだけをします。あなたのページの隅で静かに、一秒に一度めくるだけです。