<アイテム比較>でカウントアップカウンター-Volar2

<アイテム比較>でカウントアップカウンター-Volar2

SIRIUS2テンプレート【Volar2】では【パーツ】→<アイテム比較>を利用したカウントアップカウンターを作成できます。
 

アイキャッチ画像

当サイトで使用しているキャプチャ画像は(【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。

 

【Volar2】では【パーツ】→<アイテム比較>を利用して、可視領域に達したらカウントアップするカウンター機能を付けてみました。

 

<アイテム比較>についてはこちらの記事をご参照ください。

 

(※わかりにくかったときはブラウザの更新ボタンをクリックしてみてください)


概要

《カウントアップカウンター》の概要は以下の通り。

 

キャプチャ画像

  • カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まります。
  • アニメーションは1回限りでページをリロード(更新)すれば再度アニメーションします。
  • 数値の色や大きさは変更可。(※専用スタイルシート上での変更)
  • <アイテム比較>「タイプ01」でのみ利用可。

データ設定

【パーツ】→<アイテム比較>を開いたら、指定箇所に表示したい内容を記入します。

説明文は省略可&価格欄には【Volar2】で用意している専用コードをコピー&ペーストします。

キャプチャ画像

 

記入が済んで登録が完了したら、《カウントアップカウンター》を表示したい箇所に登録済みの<アイテム比較>を挿入(独自タグで出力)します。(下の赤文字部分)

続いてその独自タグを【Volar2】で用意している専用のクラスで囲みます。(下の青文字部分)

<div class="xxx">[% compare(※アイテム比較管理名) %]</div>

xxx」は”便宜上”のクラス名です。(マニュアルに実際のクラス名を記載)

直前の準備

《カウントアップカウンター》はトップページにしてもエントリーぺージにしても下のような準備が必要です。

 

この機能を使いたいページの【ページの設定】を開き、[詳細設定]タブの『</head>タグ前に挿入する内容』のところにモジュール『【Volar2】カウントアップ(スタイル)』の独自タグを、『</body>タグ前に挿入する内容』のところにはモジュール『【Volar2】カウントアップ(スクリプト)』の独自タグを挿入します。

 

キャプチャ画像

 

これでサンプルページのようなカウンターが表示されます。

(実際にはアニメーションしながらの表示)