loce asked 3年 前
HOME（TOP)の出品掲載数ですが、横４列、縦６列の計２４点。それ以上の商品の閲覧は「もっと見る」となっていると思います。
ただ、「商品の特集機能」をONにし、最初の３点を特集エリアに表示すると、商品欄が残り２１点となり、横４列、縦５列、プラス１点となり非常にバランスが悪く、訪問者からするとパッと見でそれで全ての商品なのかと勘違いされると思います。
なので、「商品の特集機能」をONにしてもバランスが崩れないように横４列、縦６列。または横４列、縦５列で余りが出ないようにすることはできないでしょうか？
よろしくお願いいたします。
BaseDesignInfo 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 }
}
取り急ぎで書いたコードのため、もし何か問題あればまたご報告ください。
テーマの改善点として、設定項目でスイッチで切り替えるような改善アップデートも検討させていただきます。
