ウェブサイトにカウントダウンを埋め込む方法
Blogger、WordPress、Drupal などのコンテンツ管理またはブログ用ソフトウェアを使用している場合は、埋め込みコードを貼り付ける際に、コンテンツを HTML モードで編集していることを必ず確認してください。
CountingDownTo.com のカウントダウンを埋め込む方法は、YouTube.com などのサイトから動画を埋め込むのとよく似ています。
- カウントダウンを開きます。新しく作成するには、ページ上部のメニューで ウェブサイトカウントダウン をクリックします。以前に作成したカウントダウンを見つけるには、右上のアカウントアイコン（人のアイコン）をクリックし、私のカウントダウン をクリックします。
- カウントダウンの下にある 埋め込み をクリックします。
- ボタンの下に表示されるコードをコピーします。コードの横に Copy ボタンがある場合は、代わりにそれをクリックしてもかまいません。
- ウェブサイトやブログの、カウントダウンを表示したい場所にコードを貼り付けます。
Notion と Google Sites では、コードの代わりにリンクが必要です。このリンクはエディターのコードの下に表示されます。Canva ではカウントダウンの共有リンクが必要です。元のエディターでは、まず 共有 をクリックして共有リンクを取得してください。新しいエディターでは、Notion と Google Sites 用のリンクの下に共有リンクが表示されます。
このページの手順に従ったにもかかわらず、まだカウントダウンを埋め込めない場合は、 お問い合わせ ください。
ライブカウントダウンを埋め込めるプラットフォームは？
カスタム HTML や iframe URL の貼り付けを許可しているほとんどのサイトでは、カウントダウンがライブで動作して表示されます。一部のページビルダーやデザインツールは iframe を完全にブロックします。当社が実際に確認した結果は以下のとおりです。Canvas と Schoology の行は、これらのプラットフォームの多くのコースサイトでカウントダウンが読み込まれていることを示す当社のログと、Canvas については公式ガイドに基づいています：
| プラットフォーム | ライブカウントダウン？ | 備考 |
|---|---|---|
| WordPress（自己ホスティング） | はい | ブロックエディターで カスタム HTML ブロックを追加し、埋め込みコードを貼り付けます。 |
| WordPress.com | プランによる | 無料プランでは iframe が削除されます。有料プランでは、カスタム HTML が機能する前に「ホスティング機能」を有効にする必要があります。詳細。 |
| Squarespace | はい（Core プラン以上） | コード ブロックを追加し、埋め込みコードを貼り付けます。Core プラン以上、または旧 Business プランか旧 Commerce プランが必要です。 |
| Wix | はい | 要素を追加 → Embed Code → Popular Embeds → Embed HTML を使います。カウントダウンが切れたりスクロールバーが出たりしないよう、iframe の幅と高さをカウントダウンに合わせてください。 |
| Google Sites | はい |
挿入 → 埋め込み
を使用します。埋め込みコード
タブに埋め込みコードを貼り付けるか、URL
タブに埋め込みコードの src="..."
の中のアドレスを貼り付けます。そのアドレスが .js
で終わる場合は、.js
を除いてください。
|
| Shopify | はい（注意あり） | テーマの Custom Liquid セクションを使います。商品説明のエディターはテーマによって埋め込みコードを保持しないため、商品ページでも Custom Liquid セクションを使ってください。 |
| Notion | はい |
/embed
と入力し、埋め込みコードの src="..."
の中のアドレス（共有リンクではありません）を貼り付けます。そのアドレスが .js
で終わる場合は、.js
を除いてください。
|
| Canva | はい（オンライン表示時） | Embed アプリを追加し、カウントダウンの共有リンクを貼り付けます。ダウンロードした画像、PDF、動画では動くカウントダウンは表示できません。 |
| Canvas | はい | Rich Content Editor で Insert → Embed を選び、埋め込みコードを貼り付けて Submit をクリックし、ページを保存します。この手順は Canvas の講師向けガイドに基づいています。 |
| Schoology | はい（手順は未検証） | Schoology のサイトでカウントダウンが表示されていますが、手順は当社で検証していません。エディターの HTML 表示で埋め込みコードを貼り付けてください。 |
| Blogger、Drupal、Weebly、Joomla! | はい | 埋め込みコードをカスタム/生 HTML として貼り付けます — 以下のプラットフォーム別の手順を参照してください。 |
| Facebook、WhatsApp、YouTube | いいえ | これらのプラットフォームではサードパーティの iframe 埋め込みは許可されていません。公開済みのカウントダウンページへのリンクを共有してください。 |
| メールクライアント | いいえ（GIF を使用） | メールクライアントは iframe をブロックします。代わりに メール用 GIF カウントダウン をご利用ください。 |
WordPress にカウントダウンを埋め込む
自己ホスティング WordPress： ブロックエディターで カスタム HTML ブロック（+ → 「Custom HTML」を検索）を追加し、提供した埋め込みコードを貼り付けます。ブロックのプレビューにカウントダウンが表示されない場合は、公開したページで確認してください。
WordPress.com： 無料の WordPress.com サイトは iframe をサポートしていません （詳細）。 有料プランでは、カスタム HTML ブロックが iframe をレンダリングする前にホスティング機能を有効にする必要があります。
クラシックエディターのユーザー： 従来のビジュアル/テキストエディターをまだ使用している場合は、貼り付ける前に テキスト （ビジュアルではない）を選択してください。
Squarespace にカウントダウンを埋め込む
Squarespace では、カスタムコードを埋め込むために Core プラン以上、または旧 Business プランか旧 Commerce プラン が必要です。ページを編集し、+ をクリックしてブロックを追加し、コード を検索して、コードブロックに埋め込みコードを貼り付けます。保存してプレビューしてください。公開ページでカウントダウンがライブで動作するはずです。
Wix にカウントダウンを埋め込む
Wix エディターで 要素を追加 → Embed Code → Popular Embeds → Embed HTML をクリックします。Enter Code をクリックし、埋め込みコードを貼り付けて Apply をクリックします。
重要 — iframe のサイズ設定：
カウントダウンが切り取られたりスクロールバーが表示されたりする場合は、埋め込み要素の設定を開き、埋め込みコード内の寸法（通常は
<iframe>
タグと同じ幅と高さ）に合わせて幅と高さを設定してください。Wix は埋め込まれた iframe を常に自動サイズ調整するわけではありません。
短い動画を見る — Wix にカウントダウンを追加する方法のデモです。
Google Sites にカウントダウンを埋め込む
サイトの編集中に、挿入
→ 埋め込み
をクリックします。埋め込みコード
タブで、提供した埋め込みコードを貼り付けます。または URL
タブで、カウントダウンの埋め込みリンク（埋め込みコードの src="..."
の中のアドレス）を貼り付けます。そのアドレスが .js
で終わる場合は、.js
を除いてください。
その後、ページ上の埋め込みボックスのサイズを調整し、カウントダウン全体が表示されるようにしてください。
Shopify にカウントダウンを埋め込む
テーマの Custom Liquid セクションに埋め込みコードを追加します（オンラインストア → テーマ → カスタマイズ → セクションを追加）。配置したページでカウントダウンがライブで表示されます。
商品説明： 商品説明のエディターは、テーマによって埋め込みコードを保持しません。代わりに商品ページのテンプレートに Custom Liquid セクションを追加してください。
Notion にカウントダウンを埋め込む
Notion の任意のページで /embed
と入力し、Enter を押します。カウントダウンの埋め込みリンクを貼り付けて確定します。Notion にはカウントダウンだけが表示され、リアルタイムで動きます。
埋め込みリンクとは、埋め込みコードの src="..."
の中のアドレスです（例：https://countingdownto.com/w4/abc123
や https://w2.countingdownto.com/1234567）。コードが script タグの場合は、末尾の
.js
を除いてください。共有リンクや埋め込みコード全体は貼り付けないでください。ブロックの端をドラッグするとサイズを変更できます。
Canva にカウントダウンを埋め込む
Canva では、オンラインで表示するデザインや Canva のウェブサイトにライブのカウントダウンを表示できます。Canva エディターで アプリ を開き、Embed を選んで、カウントダウンの共有リンクを貼り付けます。
新しいエディターで作成したカウントダウンの代わりに静止したプレビュー画像が表示される場合は、その埋め込みリンクを貼り付けてください。埋め込みリンクは、埋め込みコード内の
src="..."
のアドレスです。従来のエディターで作成したカウントダウンには共有リンクを使ってください。その埋め込みリンク（w2.countingdownto.com）は Canva では使えません。ダウンロードした画像、PDF、動画では、動くカウントダウンは表示できません。
Blogger にカウントダウンを埋め込む
投稿エディターで、埋め込みコードを貼り付ける前に 作成ビュー から HTML ビュー に切り替えてください。投稿の編集中はカウントダウンは表示されません。投稿を公開またはプレビューしたときにのみ表示されます。
Drupal にカウントダウンを埋め込む
本文フィールドの下にある テキストフォーマット リストで Full HTML を選び、埋め込みコードを貼り付けます。ページの編集中はカウントダウンは表示されません。ページを保存またはプレビューしたときにのみ表示されます。
Weebly にカウントダウンを埋め込む
Embed Code 要素をページにドラッグし、クリックして埋め込みコードを貼り付けます。カウントダウンを確認するには、サイトを公開してください。
Joomla! にカウントダウンを埋め込む
記事エディターの下にある Toggle Editor をクリックしてプレーンな HTML を編集できる状態にし、埋め込みコードを貼り付けて保存します。
Joomla のデフォルトの TinyMCE エディターは、保存時に iframe タグを削除する場合があります。カウントダウンが表示されない場合は、エディターをオフにした状態で Custom モジュールに埋め込みコードを貼り付けるか、サイト管理者に TinyMCE プラグインの設定で iframe を許可するよう依頼してください。
iframe 埋め込みをサポートしないプラットフォーム
以下のプラットフォームは、どの埋め込みコードを使用してもライブの iframe カウントダウンを 表示できません：
- Facebook — 公開済みのカウントダウンページへのリンクを共有してください。
- WhatsApp — リンクを共有してください。WhatsApp は埋め込み HTML をレンダリングしません。
- YouTube — YouTube のチャンネルページや動画の説明ではサードパーティの iframe はサポートされていません。
- メールクライアント：Gmail、Outlook、Mailchimp などのメールアプリはセキュリティ上の理由で iframe をブロックします。代わりに メール用カウントダウン をご利用ください。ほとんどのメールアプリで表示されるアニメーション画像を作成します。
メール用カウントダウンの埋め込み
メールアプリは iframe をブロックするため、メールカウントダウンはアニメーション GIF 画像になっています。 メールカウントダウンのページ で作成し、メールに追加 をクリックしてコードを取得してください。Mailchimp、Constant Contact、AWeber、Kit (ConvertKit) などのメールマーケティングツールでは、HTML ブロックまたはコードブロックにコードを貼り付けます。Gmail などの個人のメールアカウントからカウントダウンを送信するには、同じページの このカウントダウンをメールで送る を使い、届いたメールを転送してください。
Kajabi をご利用ですか？Kajabi カウントダウンタイマーガイドをご覧ください。
画像には読み込まれた時点の残り時間が表示されます。一部のメールアプリは画像を事前に読み込むため、前の時刻が表示されることがあります。日付はメールの本文にも書いてください。