カバーでカウントダウンタイマーを使う方法

bingo!CMS カウントダウンユニットを、テンプレートのカバー部分で使用する方法をご紹介します。
設定した終了日時まで自動でカウントダウンをおこない、終了後はタイマーの値が0で停止します。
本来はユニットをカバー部分で使用することは出来ませんが、以下の①〜③の設定を行うことにより可能となります。

★事前に準備しておくこと★
  • カウントダウンユニットをbingo!CMS(1.7.0以上)にインストールする。
  • 編集用テンプレート、またはコピーしたテンプレートを用意する。

※公開用テンプレートに直接設定することも可能ですが、変更した内容が即座に公開中のページに反映されますのでご注意ください。
※カウントダウンユニットはカウントダウンユニットダウンロードページからダウンロードが可能です。インストール方法は同ページ内のマニュアルをご覧ください。
※カウントダウンユニットについては新規拡張ユニット「カウントダウンユニット」をリリースしました!をご覧ください。
※このTips内のサンプル画像はbingo!CMS1.7.3のものです。


① テンプレートのフリーエリアに HTML を記述する

  1. bingo!CMS管理画面にログインし、画面上部のデザイン管理/テンプレート管理をクリックします。
  1. テンプレート一覧から任意のテンプレートのテンプレート編集ボタンをクリックし、テンプレート編集画面に入ります。
  1. テンプレート編集画面内のプルダウンをカバーに変更し、カバーで使用したい画像を設定します。
  1. テンプレート編集画面内のプルダウンをベースに変更し、下記の記述例を参考にフリーエリア内にHTMLを記述して保存します。

★HTMLの記述例

<div id="cover_countdown" class="extCountdown">
    <div class="countdown">
        <span class="c_day"></span>
        <span class="c_hour"></span>
        <span class="c_min"></span>
        <span class="c_sec"></span>
    </div>
    <div class="post_t">
        <span class="day">DAYS</span>
        <span class="hour">HOURS</span>
        <span class="min">MINS</span>
        <span class="sec">SECS</span>
    </div>
</div>

★記述のポイント

・以下のDAYS/HOURS/MINS/SECSの記述は、日/時/分/秒のように任意のテキストに変更できます。
<div class="post_t">
  <span class="day">DAYS</span>
  <span class="hour">HOURS</span>
  <span class="min">MINS</span>
  <span class="sec">SECS</span>
</div>

※サンプル画像ではタイマーに関する記述の上にテキストに関する記述をしています。

② ページのCSS・JS設定に CSS を記述する

  1. bingo!CMSページ編集画面上部のCSS/JSボタンをクリックします。
  1. PC・タブレット用のCSS欄に以下を参考に記述し、保存します。
    ※スマホ表示でカウントダウンタイマーを使用したい場合はスマートフォン用のCSS欄にも記述してください。
     このとき、値は適切なものに変更してください。

★CSS記述例

<style type="text/css">
/*全体の幅*/
#cover_countdown { width: 1000px; }
/*タイマー*/
#cover_countdown .countdown {
    font-size: 6rem;
    color: rgba(255,255,255,1);
    text-shadow: -2px -2px 20px rgba(255,255,255,1) , 0 0 1px rgba(0,0,0,.5);
}
/*日時分秒のテキスト*/
#cover_countdown .post_t {
    font-size: 2rem;
    color: #fff;
    text-shadow: -2px -2px 20px rgba(255,255,255,1), 0 0 1px rgba(0,0,0,.5);
}
</style>

★記述のポイント

/*全体の幅*/
#cover_countdown { width: 1000px; }
上記の { 〜 } の記述でカウントダウンタイマー全体の幅の設定をおこないます。

#cover_countdown .countdown { 〜 } 
上記の { 〜 } の記述でカウントダウンタイマーに関する設定をおこないます。

#cover_countdown .post_t { 〜 } 
上記の { 〜 } の記述で日時分秒のテキストに関する設定をおこないます。

③ ページのCSS・JS設定に javascript を記述する

  1. bingo!CMSページ編集画面上部のCSS/JSボタンをクリックします。
  1. PC・タブレット用のjavascript欄に以下を参考に記述し、保存します。
    ※スマホ表示でカウントダウンタイマーを使用したい場合はスマートフォン用のjavascript欄にも記述してください。
     このとき、値は適切なものに変更してください。

★javascript記述例

<script src="/usr-data/extunits/extCountdown/countdown.js"></script>
<script>
(function(){
var d = '2018/12/25 00:00:00';//目標の日時
new Countdown('#cover_countdown', d);
})();
</script>

★記述のポイント

var d = '2018/12/25 00:00:00';
上記の値を任意のカウントダウン終了日時に変更します。

④ 設定したカウントダウンタイマーを確認する

公開用に設定していないテンプレートを使って設定した場合、カウントダウンタイマーは以下の方法でプレビューできます。
 
  1. メニュー&ページ管理画面を開き、テンプレートを適用したいメニューにチェックを入れる。
  2. メニュー操作のプルダウンからテンプレートを変更するをクリックする。
  3. タブを編集用に切替え、適用したいテンプレートを選択し保存する。
  4. カウントダウンタイマーを設置したいページのプレビューボタンをクリックし、プレビュー画面を確認する。

※プレビュー確認後、本公開する際は上記の手順3で公開用のタブを適用したいテンプレートに変更してページを公開してください。

ページトップ