＜アイテム比較＞でカウントアップカウンター-Volar2
SIRIUS2テンプレート【Volar2】では【パーツ】→＜アイテム比較＞を利用したカウントアップカウンターを作成できます。
当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。
【Volar2】では【パーツ】→＜アイテム比較＞を利用して、可視領域に達したらカウントアップするカウンター機能を付けてみました。
※＜アイテム比較＞についてはこちらの記事をご参照ください。
（※わかりにくかったときはブラウザの更新ボタンをクリックしてみてください）
概要
《カウントアップカウンター》の概要は以下の通り。
- カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まります。
- アニメーションは1回限りでページをリロード（更新）すれば再度アニメーションします。
- 数値の色や大きさは変更可。（※専用スタイルシート上での変更）
- ＜アイテム比較＞「タイプ01」でのみ利用可。
データ設定
【パーツ】→＜アイテム比較＞を開いたら、指定箇所に表示したい内容を記入します。
説明文は省略可＆価格欄には【Volar2】で用意している専用コードをコピー＆ペーストします。
記入が済んで登録が完了したら、《カウントアップカウンター》を表示したい箇所に登録済みの＜アイテム比較＞を挿入（独自タグで出力）します。（下の赤文字部分）
続いてその独自タグを【Volar2】で用意している専用のクラスで囲みます。（下の青文字部分）
<div class="xxx">[% compare(※アイテム比較管理名) %]</div>
「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）
直前の準備
《カウントアップカウンター》はトップページにしてもエントリーぺージにしても下のような準備が必要です。
この機能を使いたいページの【ページの設定】を開き、［詳細設定］タブの『</head>タグ前に挿入する内容』のところにモジュール『【Volar2】カウントアップ（スタイル）』の独自タグを、『</body>タグ前に挿入する内容』のところにはモジュール『【Volar2】カウントアップ（スクリプト）』の独自タグを挿入します。
これでサンプルページのようなカウンターが表示されます。
（実際にはアニメーションしながらの表示）
『＜アイテム比較＞でカウントアップカウンター』の関連記事
-
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像・シンプル版＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜画像フルワイド化＞のシンプル版。使い勝手が向上しました。