このページでは Nishiki Pro 1.0.266 から搭載された「カウントダウン」ブロックについて解説しています。
「カウントダウン」ブロックは、現在から指定した日時まで 1 秒ずつカウントダウンします。
ウェブサイトのリニューアルだったり、期間限定ページだったり「何かのキャンペーンの開始 または 終了までの期間」などに使うと効果的です。
サンプル
カラー/デザイン/単位表記の変更、日/時/分/秒をそれぞれ個別に表示/非表示など、細かい設定が可能です。
- --日
- --時
- --分
- --秒
- --日
- --時
- --分
- --秒
- --Day(s)
- --Hour(s)
- --Minute(s)
- --Second(s)
- --日
- --時
- --分
- --秒
- --Day(s)
- --Hour(s)
- --Minute(s)
- --Second(s)
- --d
- --h
- --m
- --s
「カバー」ブロックの中に入れるなど、
- --Day(s)
- --Hour(s)
- --Minute(s)
- --Second(s)
他のブロックとの併用も可能です。
設定項目一覧
| 項目 | 概要 | デフォルト値 |
|---|---|---|
| 日時設定 | 日時をカレンダーから選択（数字を直接選択することも可能） | 2020-01-01 12:00:00 |
| 表示設定 | 日/時/分/秒 それぞれ 表示/非表示可能 | 全て表示 |
| タイプ | 通常/サークル01/サークル02/コロン(:)で区切る から選択 | 通常 |
| ストローク基準（日） | 残り日数の基準値を変更（サークル01/サークル02 選択時のみ） | 1000 |
| 単位を表示 | それぞれの数字の単位を表示 | 表示 |
| 単位の表記 | 通常/英語/英語（短縮） から選択 | 通常 |
| 色設定 | カラー01/カラー02 から選択（タイプによって適用されるカラーが変わります） | なし |
応用：コードが書ければコンテンツとの連動も可能
「カウントダウン」ブロックは「data-nishiki-blocks-pro-countdown-date」属性に指定した日時が設定されます。
例えば「2025/11/28 10:52」までの期間を設定した場合、以下のような値が設定されます。
data-nishiki-blocks-pro-countdown-date="2025-11-28T10:52:00"なので、JavaScript が書ける方は「data-nishiki-blocks-pro-countdown-date」属性の値を取得して、その取得した値をもとに特定のコンテンツを「表示/非表示/他のコンテンツに差し替える」などできますね。
ぜひ挑戦してみてください。
WordPress テーマ Nishiki Pro
「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載したワードプレステーマです。
ブロックエディター機能を強化し、これまでのワードプレスでは難しかったコンテンツが簡単に作れます。
ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイト、オンラインショップなど、様々な目的のウェブサイトに対応できるテーマです。
最新情報をチェック！
Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀
- リリース情報
- 新機能の紹介
- 便利な使い方
- 開発中の機能紹介
- 導入事例
- あるある日常ネタ
など
