FC2ショッピングカートのカスタマイズ方法について

質問

公式テンプレートのcosmeticを使用してＨＰを作る予定です。
http://sample.cart.fc2.com/?style=cosmetic
真ん中画面下のおすすめ商品の並びが横２つずつになっているのですが、横３つずつに変更したいです。

HTMLやCSSを色々変更してみたのですが結局上手くいかず・・・

どうすれば変更できるのか教えていただけないでしょうか。よろしくお願いします。

回答No.1

fujillin · ベストアンサー

ご提示のサンプルはアイテムが1個しかないので、複数並べた時にどのようなソースが生成されるのかを想像しての回答なので、違うかも知れませんが…

「おすすめ商品」の部分は、外枠<DIV class=MainCenter>（幅410px)の中に、アイテム<DIV class=PickUpBase>（幅205px）をフロートさせて並べているものと思われます。
（↑この想定が違えば、以下の回答は意味がないことになります）
したがって、横に2個並びで自動的に改行されて下に並んでゆくというしくみになっていると思われます。

3個を並べる方法としては、全体の横幅を広げてあげるか、または、全体はそのままでアイテム1個の幅を小さくしてあげるかのどちらかでしょう。

とりあえず、後者で考えるならPickUpBaseの幅を410/3=136pxに指定してあげるだけで、IE以外は一応3個並びになります。
ただし、現状では画像（幅120px）と値段・詳細表示とをテーブルで横並びになるようなソース構成になっているので、結果的に136pxに納まりきらずレイアウトが乱れます。

この対策としては
1）HTMLソースの変更が可能なら、テーブル部分の画像と値段・詳細が縦並びになるように行を変えてしまう。（</tr><tr>を挿入する）
2）画像サイズを小さくする。
CSSで　.PickUpImg img { width:70px; }　などを追加
3）PickUpBaseにoverflowを設定する

などで可能になります。
1）は縦並びに変えているので、画像サイズも現状のままで可能です。
2）はレイアウトはほぼ現状のままですが、画像サイズが小さくなります。
3）は、あまり現実的な方法とは言えないでしょう。

お礼

アドバイス有難うございます。「アイテム1個の幅を小さくして、テーブル部分の画像と値段・詳細が縦並びになるように行を変える」のやり方で横３つずつのレイアウトにできました！本当に感謝しております。教えていただき、有難うございました！