ヴィジュアル・カウントダウンタイマーの設定・設置

カウントダウンタイマー

更新日: 2018年9月30日

カウントダウンタイマーはアクセスした瞬間に、サイト右下でカウンターを回わりはじめ、その瞬間からXデー(表示終了日時)までの残り日数をカウントします。
Xデー(表示終了日時)をキャンペーン終了日、あるいは予約受付終了日に設定し、イベント終盤の追い込みをはかろりましょう。

ヴィジュアル・カウントダウンタイマーを見る

フォルダとファイルの構成

ヴィジュアル・カウントダウンタイマーは、以下のようなフォルダとファイルの構成になっています。

counterdown
  |-counter.js (動きを制御するプログラム)
  |-counter.css (デザインファイル)
  |-setting (設定ファイル)
  |-c0.png (タイマー用画像)
  |- ・・・
  |- ・・・

ヴィジュアル・カウントダウンタイマーの設定

設定項目は以下の通りです。

  • 表示開始日時
  • 表示終了日時(この日時までをカウントダウンします)
  • コピー文
  • リンク先アドレス
  • 終わり方
    (カウントダウン後、バナーを閉じるかそのまま開けておくかを指定します)
  • テストモード
    (最後にテストしてから1時間経っていなくても、起動します)

すでに弊社サイト内バナーをご購入された方は、下記、設定ファイル生成ページで簡単に設定ファイルを生成・ダウンロードできます。

設定ファイルの生成とダウンロード

ヴィジュアル・カウントダウンタイマーの設置

設定ファイルsettingができたら、countdownフォルダに移動し、古い設定ファイルに上書きします。
以下、通常のhtmlファイルに設置する場合と、Wordpressに設置する場合に分けて、設置の仕方を説明します。

通常のhtmlファイルに設置する場合

  1. countdownフォルダを、カウントダウンタイマーを呼び出したいページと同じ階層にアップロードします。
  2. カウントダウンタイマーを呼び出したいhtmlファイルからcssファイルとjsファイルへのリンクコードを書きます。その際、jquery.jsへもリンクを貼ります。
    jquery.js はjsファイルより先に呼び出しておきます。(</head> の直前に書くといいでしょう。)

例)
<link href="countdown/countdown.css" type="text/css" rel="stylesheet" />
<script src="https://
ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="countdown/countdown.js" type="text/javascript"></script>
</head>

  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

wordpressに設置する場合

  1. countdownフォルダを、themesフォルダ中の現在のテーマフォルダにアップロードします。
  2. カウントダウンタイマーを呼び出すために、テーマフォルダ内のfunctions.phpにcssファイルとjsファイルへのリンクとcountdownフォルダへのパス(countPath)を書きます。
    以下は、スラッグxxxというページから呼び出す場合の書き方です。

例)

function cb_enqueue(){
  if (is_single ('xxx')) {
    echo '<script type="text/javascript">var counterPath 
="'.get_template_directory_uri()."/countdown/".'";</script>';
    wp_enqueue_script ('countdown_script', 
get_template_directory_uri()."/countdown/counter.js", 
array('jquery'), false, true);
    wp_enqueue_style ('countdown_style', 
get_template_directory_uri()."/countdown/counter.css");
  }
}
add_action ('wp_enqueue_scripts', 'cb_enqueue');
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

設定するWebサイトが通常のhtmlでもWordpressでもない場合は、サイトのテクニカル・サボートに設置をご依頼ください。

注意事項

  • 設定項目は省略できません。
  • カウントダウンタイマーは表示終了日までカウントダウンし、指定した時間を過ぎると表示されません。
  • 表示終了日時は2016/03/01 23:59という形式で指定します。時分は省略できません。
  • リンク先がとくにない場合は、設置したWebページを指定してください。
  • コピー文が長いと、フォントサイズが小さくなります。
▲このページのトップへ