ウェブサイトにカウントダウンを埋め込む方法
Blogger、WordPress、Drupal などのコンテンツ管理またはブログ用ソフトウェアを使用している場合は、埋め込みコードを貼り付ける際に、コンテンツを HTML モードで編集していることを必ず確認してください。
CountingDownTo.com のカウントダウンウィジェットを埋め込む方法は、YouTube.com などのサイトから動画を埋め込むのとよく似ています。CountingDownTo.com で、「マイカウントダウン」をクリックし、埋め込みたいカウントダウンの名前をクリックして、埋め込みたいカウントダウンを見つけます。または「新しいカウントダウン」をクリックして、新しいカウントダウンウィジェットを作成することもできます。カウントダウンの下に「サイトに埋め込む」と表示されたボタンがあります。それをクリックしてください。ボタンの下に HTML コードが表示されます。コードは下のスクリーンショットのような見た目になります。コードをコピーして、ウェブサイトやブログに貼り付けてください。
このページの手順に従ったにもかかわらず、まだカウントダウンを埋め込めない場合は、 お問い合わせ ください。
ライブカウントダウンを埋め込めるプラットフォームは？
カスタム HTML や iframe URL の貼り付けを許可しているほとんどのサイトでは、 カウントダウンがライブで動作して表示されます。一部のページビルダーやデザインツールは iframe を 完全にブロックします。実際に確認した結果は以下のとおりです：
| プラットフォーム | ライブカウントダウン？ | 備考 |
|---|---|---|
| WordPress（自己ホスティング） | はい | ブロックエディターで カスタム HTML ブロックを追加し、埋め込みコードを貼り付けます。または、WordPress プラグインのリリース後にご利用ください。 |
| WordPress.com | プランによる | 無料プランでは iframe が削除されます。有料プランでは、カスタム HTML が機能する前に「ホスティング機能」を有効にする必要があります。詳細。 |
| Squarespace | はい（Business プラン以上） | コード ブロックを追加し、埋め込みコードを貼り付けます。Business プラン以上が必要です。 |
| Wix | はい | HTML を埋め込む 要素を使用します。iframe の幅と高さをカウントダウンに合わせて設定し、切り取られたりスクロールバーが表示されたりしないようにしてください。 |
| Google Sites | はい | 挿入 → 埋め込み を使用し、埋め込みコードまたは iframe URL を貼り付けます。 |
| Shopify | はい（注意あり） | テーマの カスタム Liquid またはカスタム HTML セクションで動作します。商品説明では 動作しません （Shopify はそこで iframe を削除します）。 |
| Notion | はい |
/embed
と入力し、カウントダウンの直接 /w4/
リンク（通常の共有リンクではありません）を貼り付けます。
|
| Canva | いいえ | Canva は iframe やライブの外部埋め込みをサポートしていません。これは Canva の制限であり、操作ミスではありません。 |
| Blogger、Drupal、Weebly、Joomla! | はい | 埋め込みコードをカスタム/生 HTML として貼り付けます — 以下のプラットフォーム別の手順を参照してください。 |
| Facebook、WhatsApp、YouTube | いいえ | これらのプラットフォームではサードパーティの iframe 埋め込みは許可されていません。公開済みのカウントダウンページへのリンクを共有してください。 |
| メールクライアント | いいえ（GIF を使用） | メールクライアントは iframe をブロックします。代わりに メール用 GIF カウントダウン をご利用ください。 |
WordPress にカウントダウンを埋め込む
自己ホスティング WordPress： ブロックエディターで カスタム HTML ブロック（+ → 「Custom HTML」を検索）を追加し、提供した埋め込みコードを貼り付けます。カウントダウンはエディターのプレビューには表示されません — ページを公開またはプレビューして確認してください。
WordPress.com： 無料の WordPress.com サイトは iframe をサポートしていません （詳細）。 有料プランでは、カスタム HTML ブロックが iframe をレンダリングする前にホスティング機能を有効にする必要があります。WordPress プラグインのリリース後、このページを更新します。
クラシックエディターのユーザー： 従来のビジュアル/HTML エディターをまだ使用している場合は、貼り付ける前に HTML （ビジュアルではない）を選択してください。ブロックエディターについては、この動画でカスタム HTML の方法を説明しています：
Squarespace にカウントダウンを埋め込む
Squarespace では、カスタムコードを埋め込むために Business プラン以上 が必要です。ページを編集し、+ をクリックしてブロックを追加し、コード を検索して、コードブロックに埋め込みコードを貼り付けます。保存してプレビュー — 公開ページでカウントダウンがライブで動作するはずです。
Wix にカウントダウンを埋め込む
Wix エディターで、+ 要素を追加 → コードを埋め込む → HTML を埋め込む をクリックします。埋め込みコードを貼り付け、更新 をクリックします。
重要 — iframe のサイズ設定：
カウントダウンが切り取られたりスクロールバーが表示されたりする場合は、埋め込み要素の設定を開き、埋め込みコード内の寸法（通常は
<iframe>
タグと同じ幅と高さ）に合わせて幅と高さを設定してください。Wix は埋め込まれた iframe を常に自動サイズ調整するわけではありません。
短い動画を見る — Wix にカウントダウンを追加する方法のデモです。
Google Sites にカウントダウンを埋め込む
サイトの編集中に、挿入 → 埋め込み をクリックします。埋め込みコード を選択し、提供した埋め込みコードを貼り付けます。ページ上の埋め込みボックスのサイズを調整し、カウントダウン全体が表示されるようにしてください。
Shopify にカウントダウンを埋め込む
埋め込みコードを カスタム Liquid セクションまたはテーマのカスタム HTML ブロックに追加します（オンラインストア → テーマ → カスタマイズ → セクションを追加）。配置したページでカウントダウンがライブで表示されます。
商品説明では動作しません： Shopify は商品説明から iframe HTML を削除します — これはプラットフォームの制限であり、CountingDownTo の制限ではありません。代わりにランディングページ、コレクション説明、またはカスタムページセクションを使用してください。
Notion にカウントダウンを埋め込む
Notion の任意のページで /embed
と入力し、Enter を押します。カウントダウンの直接リンク（埋め込みパネルの /w4/
URL、通常の共有リンクではありません）を貼り付けます。Notion はカウントダウンウィジェットのみを iframe で表示します。
Canva — 現在は不可能
Canva のウェブサイトおよびデザインエディターは、iframe 埋め込みやライブの外部ウィジェットをサポートしていません。埋め込みコードやリンクを貼り付けても、動作するカウントダウンは表示されません。将来 Canva が iframe や外部 URL 画像のサポートを追加した場合、このページを更新します。
Blogger にカウントダウンを埋め込む
Blogger ブログに埋め込みコードを貼り付ける前に、「HTML を編集」を選択していることを確認してください（「作成」ではありません）。 投稿の編集中はカウントダウンは表示されないことに注意してください。投稿を公開またはプレビューしたときにのみ表示されます。
Drupal にカウントダウンを埋め込む
Drupal サイトに埋め込みコードを貼り付ける前に、「入力形式」設定で「Full HTML」を選択していることを確認してください。ページの編集中はカウントダウンは表示されないことに注意してください。ページを保存またはプレビューしたときにのみ表示されます。
Weebly にカウントダウンを埋め込む
カスタム HTML 要素を使用して、Weebly サイトにカウントダウンウィジェットを埋め込みます。
Joomla! にカウントダウンを埋め込む
以下の手順を参照してください： Joomla! にカウントダウンを埋め込む
Joomla のデフォルトの TinyMCE エディターは、保存時に iframe タグを削除または書き換える場合があります。カウントダウンが表示されない場合は、その記事の WYSIWYG エディターを無効にするか、Mod HTML モジュールを使用して埋め込みコードを直接配置してみてください。
iframe 埋め込みをサポートしないプラットフォーム
以下のプラットフォームは、どの埋め込みコードを使用してもライブの iframe カウントダウンを 表示できません：
- Facebook — 公開済みのカウントダウンページへのリンクを共有してください。
- WhatsApp — リンクを共有してください。WhatsApp は埋め込み HTML をレンダリングしません。
- YouTube — YouTube のチャンネルページや動画の説明ではサードパーティの iframe はサポートされていません。
- メールクライアント — Gmail、Outlook、Mailchimp などのメールアプリはセキュリティ上の理由で iframe をブロックします。代わりに メール用 GIF カウントダウン 機能をご利用ください — ほぼすべてのメールクライアントで動作するアニメーション画像を生成します。