パーツ<アイテム比較>は、複数の商品やサービスを一覧表示して比較できる機能です。
「どの商品がおススメか」を強調表示可能な『ピックアップ』機能も搭載。
また商品・サービスに限らず、シンプルに項目別に分けた一覧表示用としても使えます。
<アイテム比較>の設定画面を開くには、
【パーツ】→【アイテム比較】→【アイテム比較の管理】→【追加】
もしくは
【パーツ】→【アイテム比較】→【アイテム比較の追加】
から開けます。
すでにいくつか設定済みの画面でご説明していきます。
登録したコンテンツがここに表示されます。(現在は3個格納中)
1列に5個までという制限はありますが、画面幅を考えると3個並びが限度じゃないでしょうか。
(スマホでは1個ずつの縦列表示)
表示タイプは3種類。(タイプ1~タイプ3)
背景色の付き方の違いです。(※色とかはデフォルト設定のまま)
ここで背景色を変えることができます。
ONにするとボーダーの角が丸くなります。
ピックアップをONにすると商品枠が強調表示され、ここに表示したテキストが最上段に表示されます。
(ピックアップ機能は1商品のみに適用可)
コンテンツの順番を入れ替えできます。
ここをクリックするとプレビュー画面に切り替わり、編集中でも雰囲気を確認することができます。
※タイプ02・ゴールド・角丸ONでプレビューしてみた結果がこちら。
ボタンリンクの色やテキストをここで設定できます。
新規追加、もしくは再編集したいコンテンツを選択して編集ボタンをクリックすると編集画面が立ち上がります。
必ずしも全部入力する必要はありません。
空欄の項目は非表示扱いになります。
ご覧になる時期によっては説明用のキャプチャ画像の内容やデザインが変更になってる可能性もあります。予めご了ください。
当サイトのトップページでは、パーツ<アイテム比較>を「【Volar2】の独自機能」紹介ブロックで使ってます。
上のキャプチャ画像では1列3個分のコンテンツを最後だけ1列1個のコンテンツで表示させてます。
ここでたまたま1個だけ余った最後のコンテンツをそのまま表示させたのが下のキャプチャ画像。
デフォルト設定では下の画像のように他のコンテンツの横幅(3個分)と同じ幅まで広がって表示されてしまいます。
これはちょっとバランスが悪いですね。
ということでカスタムテンプレート【Volar2】ではこれを解消できる独自クラスを追加搭載しました。
なお<画像レイアウト>では表示数に端数が出た場合、並んでる個数に合わせるように空白コンテンツを足す必要がありましたが、アイテム比較においてはその必要はありません。
※【Volar2】<画像レイアウト>についてはこちらの記事をご参照ください。
こちらが最後の1コンテンツの<アイテム比較>内の編集画面です。
表示したいコンテンツ(ここでは1個)だけの追加でOK。
筆者
数合わせのための空のコンテンツは必要ありません…というか空のコンテンツは作れない仕様です。
そしてこちらが実際の編集画面で、5ブロックに分けて作成した<アイテム比較>の独自タグです。
(最後はコンテンツ1個だけのブロックです)
これらをとりあえず【Volar2】の独自クラスで囲みます。
(カスタム文字装飾などに登録しておけば1発入力が可能)
そしてハンパな数になってしまった最後の1個の独自タグにだけ、『並んでいるコンテンツ数』に該当する「view3」というクラスを追加してます。
並んでるコンテンツが4個なら「view4」になります。
これでPCでは他のコンテンツ幅と同じ幅で表示されるようになります。
筆者
”面倒なのはイヤ!”って言う方は頑張って全列同じ数で揃えてください。
【Volar2】ではリンク付きボタンを一番下に移動させてます。
ただ単にそっちの方がすっきりするという理由で。
筆者
パーツ<画像レイアウト>は内容量が異なると背景色を付けた場合にバラバラの高さで表示されてちょっとみっともない感じになってしまいますが、パーツ<アイテム比較>は同じ高さで表示される仕様のようです。
パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、(ブラウザ or内蔵)プレビューでの表示チェックが不可欠になります。