アイテム比較

上のキャプチャ画像では1列3個分のコンテンツを最後だけ1列1個のコンテンツで表示させてます。

 

ここでたまたま1個だけ余った最後のコンテンツをそのまま表示させたのが下のキャプチャ画像。

 

デフォルト設定では下の画像のように他のコンテンツの横幅（3個分）と同じ幅まで広がって表示されてしまいます。

これはちょっとバランスが悪いですね。

 

 

ということでカスタムテンプレート【Volar2】ではこれを解消できる独自クラスを追加搭載しました。

 

 

こちらが最後の1コンテンツの＜アイテム比較＞内の編集画面です。

表示したいコンテンツ（ここでは1個）だけの追加でOK。

 

 

 

そしてこちらが実際の編集画面で、5ブロックに分けて作成した＜アイテム比較＞の独自タグです。

（最後はコンテンツ1個だけのブロックです）

 

 

これらをとりあえず【Volar2】の独自クラスで囲みます。

（カスタム文字装飾などに登録しておけば1発入力が可能）

 

そしてハンパな数になってしまった最後の1個の独自タグにだけ、『並んでいるコンテンツ数』に該当する「view3」というクラスを追加してます。

 

 

並んでるコンテンツが4個なら「view4」になります。

 

これでPCでは他のコンテンツ幅と同じ幅で表示されるようになります。

 

【Volar2】ではリンク付きボタンを一番下に移動させてます。

 

ただ単にそっちの方がすっきりするという理由で。