
当サイトで使用しているキャプチャ画像は(【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。
【Volar2】では【パーツ】→<アイテム比較>を利用して、可視領域に達したらカウントアップするカウンター機能を付けてみました。
※<アイテム比較>についてはこちらの記事をご参照ください。
(※わかりにくかったときはブラウザの更新ボタンをクリックしてみてください)
《カウントアップカウンター》の概要は以下の通り。
【パーツ】→<アイテム比較>を開いたら、指定箇所に表示したい内容を記入します。
説明文は省略可&価格欄には【Volar2】で用意している専用コードをコピー&ペーストします。
記入が済んで登録が完了したら、《カウントアップカウンター》を表示したい箇所に登録済みの<アイテム比較>を挿入(独自タグで出力)します。(下の赤文字部分)
続いてその独自タグを【Volar2】で用意している専用のクラスで囲みます。(下の青文字部分)
<div class="xxx">[% compare(※アイテム比較管理名) %]</div>
「xxx」は”便宜上”のクラス名です。(マニュアルに実際のクラス名を記載)
《カウントアップカウンター》はトップページにしてもエントリーぺージにしても下のような準備が必要です。
この機能を使いたいページの【ページの設定】を開き、[詳細設定]タブの『</head>タグ前に挿入する内容』のところにモジュール『【Volar2】カウントアップ(スタイル)』の独自タグを、『</body>タグ前に挿入する内容』のところにはモジュール『【Volar2】カウントアップ(スクリプト)』の独自タグを挿入します。
これでサンプルページのようなカウンターが表示されます。
(実際にはアニメーションしながらの表示)