Webサイトに貼れるカウントダウンタイマーのコードを作成するツールです。6種類のデザインから選んで、色や大きさ、表示する単位を自由に変えられます。
キャンペーンやセールの終了、イベントの開始、受付の締め切りなどの告知にお使いください。作成したコードは無料で、商用でもご利用いただけます。
カウントダウンタイマーを作成
プレビュー
設定を変えると、プレビューとコードがその場で更新されます。
1. デザインを選ぶ
2. 日時と表示を設定する
- 終了日時
- タイムゾーン
終了日時をどこの時間で指定するか
- 表示する単位
- からまで
- 単位の表記
-
- 見出し
タイマーの上(帯は左)に表示
- 補足
タイマーの下に小さく表示
3. 色と大きさを設定する
- 色
- 数字の大きさ
- px
- 最大の横幅
スマホでは画面に合わせて縮みます - px
- 角の丸み
- px
- 文字の太さ
4. 終了後の表示を選ぶ
- 終了したら
-
日ごと
5. コードをコピーする
使い方
- 作成したコードを、タイマーを表示したい場所のHTMLに貼り付けてください。
- WordPressなら「カスタムHTML」ブロックに貼るだけで表示されます。
- コードはHTML・CSS・スクリプトが1つにまとまっていて、外部のファイルは読み込みません。
- 1つのページに、複数のタイマーを並べて置くこともできます。
こんな場面に
| 場面 | おすすめのデザイン |
|---|---|
| LPやセールページの終了告知 | 横長の帯、数字を箱で囲む |
| イベント・ライブ配信の開始まで | フリップ時計風、円形の進み具合 |
| 受付・応募の締め切り | シンプルな文字、ミニマルな大きい数字 |
| 毎週・毎月のタイムセール | 「くり返す」を選んだ横長の帯 |
注意点
- 終了日時は、指定したタイムゾーンの時刻として扱います。どこの国から見ても、同じ瞬間に0になります(夏時間は考慮していません)。
- 残り時間は、見ている人の端末の時計で計算します。端末の時計がずれていると、表示もずれます。
- タイマーが0になっても、申し込みフォームの受付や商品の販売が自動で止まるわけではありません。締め切りの処理は別に設定してください。
あわせて使いたいツール
- リアルタイム年齢生成:いつ見ても最新の年齢を表示するコードを作れます。
- ランダム広告生成ツール:複数の広告をランダムに表示するコードを作れます。
このツールは役に立ちましたか?
これからの開発の参考にしたいので、いいねボタンで教えてください。


コメント