【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。
そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。
また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。
パーツ＜アイテム比較＞は、複数の商品やサービスを一覧表示して比較できる機能です。
「どの商品がおススメか」を強調表示可能な『ピックアップ』機能も搭載。
また商品・サービスに限らず、シンプルに項目別に分けた一覧表示用としても使えます。
アイテム比較・設定画面
＜アイテム比較＞の設定画面を開くには、
【パーツ】→＜アイテム比較＞→【アイテム比較の管理】→【追加】
もしくは
【パーツ】→＜アイテム比較＞→【アイテム比較の追加】
から開けます。
基本画面
すでにいくつか設定済みの画面でご説明していきます。
縮小版
- ①コンテンツ置き場
-
登録したコンテンツがここに表示されます。（現在は3個格納中）
1列に5個までという制限はありますが、画面幅を考えると3個並びが限度じゃないでしょうか。
（スマホでは1個ずつの縦列表示）
- ②タイプ
-
表示タイプは3種類。（タイプ1～タイプ3）
背景色の付き方の違いです。（※色とかはデフォルト設定のまま）
- ③カラー
-
ここで背景色を変えることができます。
- ④角丸
-
ONにするとボーダーの角が丸くなります。
- ⑤ピックアップテキスト
-
ピックアップをONにすると商品枠が強調表示され、ここに表示したテキストが最上段に表示されます。
（ピックアップ機能は1商品のみに適用可）
- ⑥（左に移動）右に移動
-
コンテンツの順番を入れ替えできます。
- ⑦プレビュー
-
ここをクリックするとプレビュー画面に切り替わり、編集中でも雰囲気を確認することができます。
※タイプ02・ゴールド・角丸ONでプレビューしてみた結果がこちら。
- ⑧ボタンの設置
-
ボタンリンクの色やテキストをここで設定できます。
編集画面
新規追加、もしくは再編集したいコンテンツを選択して編集ボタンをクリックすると編集画面が立ち上がります。
必ずしも全部入力する必要はありません。
空欄の項目は非表示扱いになります。
追加機能【Volar2】
『価格』欄を空白にすると＜アイテム比較＞でも、＜画像レイアウト＞の”横並び”レイアウトで表示可能な「コンテンツの横並び表示」ができます。
（当サイトのトップページ［【Volar2】の独自機能］で実際の表示がご覧になれます。
この時たとえば表示したいコンテンツが4個くらいあるものの、レイアウト上の見やすさから4個＋1個の2段レイアウトでの表示にしたとします。
（2個の＜アイテム比較＞を作成）
これをPCで表示してみると2段目の（1個だけの）コンテンツが横いっぱいに広がって表示されてしまいます。
これを1段目と同じレイアウトに揃える方法は筆者が試した限りではないようです。
＜画像レイアウト＞では表示数に端数が出た場合、並んでる個数に合わせるように空白コンテンツを足せば”一応の解決”にはなりましたが、アイテム比較においては空のコンテンツは作れない仕様のようです。
ということでカスタムテンプレート【Volar2】ではこれを解消できる独自クラスを追加搭載してみました。
やり方は【Volar2】で用意している専用のクラスで＜画像レイアウト＞の独自タグを囲むだけです。
これでPCでは他のコンテンツ幅と同じ幅で表示されるようになります。
【Volar2】の独自クラスをつけた2段目の＜アイテム比較＞ではボタンリンクの位置が最下段に変わってます。
（設定で変えてます）
キャッチコピーと説明文は隣接していた方が見やすいかなという理由で。
他にも追加機能があります。
概要はこちらのページでご確認いただけます。
パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、（ブラウザ or内蔵）プレビューでの表示チェックが不可欠になります。
