これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki(Pro)
  4. 「カウントダウン」ブロック

このページでは 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 テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など