カウントアップカウンター-Volar2
SIRIUS2テンプレート【Volar2】では【パーツ】→＜アイテム比較＞を利用したカウントアップカウンターを作成できます。
事前準備
事前準備ですが、トップページとエントリーページで若干異なります。
トップページ
上部メニューからテンプレート→HTMLテンプレート編集→トップページを開き、下のモジュールのコメントアウトを解除します
<!-- ★[% module(【Volar2】カウントアップ（スクリプト）) %]★ -->
エントリーページ
この機能を使いたいページの【個別ページの設定】を開き、［詳細設定］タブの『</body>タグ前に挿入する内容』のところに【Volar2】で用意しているモジュールを挿入します。
操作のやり方
【パーツ】→＜アイテム比較＞を開いたら、指定箇所に表示したい内容を記入します。
（説明文は省略可・価格欄には専用のコードをコピー＆ペースト）
記入が済んだら独自タグで出力します。
その独自タグを【Volar2】で用意している専用のクラスで囲みます。
<div class="xxx">[% compare(※アイテム比較管理名) %]</div>
これでトップページのサンプルのようなカウンターが表示されます。
（実際にはアニメーションしながら表示）
カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まります。
アニメーションは1回限りでページをリロード（更新）すれば再度アニメーションします。
数値の色や大きさは変更可。（スタイルシート上での変更）
「タイプ01」でのみ利用可。
『カウントアップカウンター』の関連記事
-
SIRIUS2テンプレート【Volar2】にはテーブル（表）のデータの背景にアイコンをつけたりセル幅を自在に調節できたりする便利な機能が搭載されてます -
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞のシンプル版。使い勝手が向上しました。