HOMEの商品掲載数

質問一覧対象テーマ: MasterpieceHOMEの商品掲載数
loceloce asked 3年 前

HOME(TOP)の出品掲載数ですが、横4列、縦6列の計24点。それ以上の商品の閲覧は「もっと見る」となっていると思います。
ただ、「商品の特集機能」をONにし、最初の3点を特集エリアに表示すると、商品欄が残り21点となり、横4列、縦5列、プラス1点となり非常にバランスが悪く、訪問者からするとパッと見でそれで全ての商品なのかと勘違いされると思います。
なので、「商品の特集機能」をONにしてもバランスが崩れないように横4列、縦6列。または横4列、縦5列で余りが出ないようにすることはできないでしょうか?
よろしくお願いいたします。
 

2 Answers
baseadminBaseDesignInfo Staff answered 3年 前

PCでの表示、さらにブラウザを広げて商品が4列になる状態での場合ですね。
(一般的にわかりやすいよう、縦が「列」、横が「行」という呼び方をします)

まずBASEの商品表示数は24づつで決められています。
3つを特集として抽出すると残り21隣、ブラウザ幅が980px以下の3列表示では割り切れるものの、ブラウザ幅が980px以上の4列表示の状態では1つ余るという見え方となります。

レスポンシブであるため割り切れない場面があるのは仕様としていますが、「ブラウザ幅が980px以上でも3列にする」というカスタマイズは可能です。
もしその案で大丈夫でしたら、以下をお試しください。

テーマ設定の一番下、「独自CSS」の欄に以下のコードをそのままコピーペーストしてください。

@media only screen and (min-width: 979px) {
.item-box { width: 31.4%; margin:0 2.9% 23px 0}
.item-box:nth-child(4n) { margin-right:2.9% }
.item-box:nth-child(4n + 1) { clear:none }
.item-box:nth-child(3n) { margin-right:0 }
#itemthumbs .item-box:nth-child(3n + 1) { clear:both }
}

取り急ぎで書いたコードのため、もし何か問題あればまたご報告ください。

テーマの改善点として、設定項目でスイッチで切り替えるような改善アップデートも検討させていただきます。

loceloce answered 3年 前

とても丁寧でわかりやすいご回答に感謝します。
早速試してみます。
ありがとうございました、