[解決済み] お勧め商品の商品ブロックを中央に寄せたい

[seka参加者]

動作に関するご質問の場合は必ずご記入ください。

---

WordPress のバージョン：3.1.3

Welcart のバージョン：1.1

ご利用のテーマ：welcartデフォルトテーマ

症状を確認したブラウザ：Firefox

---

お世話になります。

トップページを２カラムにして、お勧め商品を１行に５個並べているのですが、左に寄って表示されています。

これを、中央に寄せて表示させるには、cssのどの部分をどのように変更すれば良いでしょうか？

お忙しいところ恐れ入りますが、ご教示下さい。

[yasumaxキーマスター]

こんにちは。

いただいた内容では、現在どのような表示になっているのか判断し辛いです。

差支えがなければキャプチャ画像を添付してください。

現在の表示がどのようになっているのか確認できれば何かアドバイスができるかもしれません。

また、下記エントリーは参考になりませんでしょうか

TOPページ「お勧め商品」を１列あたり５個にしたい

[seka参加者]

お返事ありがとう御座います。

ご提示いただいたページは既に拝見しております。

トップページのキャプチャ画像を添付いたしました。

５つ並んでいるお勧め商品を、丸ごと右にずらして、グレーの背景の真ん中に表示したいと思っております。

どうぞ宜しくお願い致します。

[seka参加者]

キャプチャ画像のサイズが大き過ぎました。アップロードし直しました。

宜しくお願い致します。

[attachment=7777,144]

[yasumaxキーマスター]

こんにちは。

<div class="clearfix">

お勧め商品個々を表示しているループの外枠に上記divタグがあります。

このdivタグに好きなクラス名を追加して、そのクラスに対して真ん中に表示する指定をいれてあげればいいと思います。

例えば、

【home.php】

<div class="reco_box clearfix">

～中略～

</div>

【style.css】

.reco_box {

margin: 0 auto;

width: 700px;

}

としてみてはどうでしょうか

また、商品を括っている白枠を変更する場合は、

それぞれ予めクラスをふってありますので、適宜修正してください。

thumbnail_box　→　商品枠（白枠）

thumimg　→　商品画像

thumtitle　→　商品名

price　→　商品販売価格

[seka参加者]

ありがとう御座います。

中央に寄せて表示する事が出来ました。

/* thumbnail_box */

#content .thumbnail_box {

width: 119px;

ちなみに、グレーの背景内ぎりぎりまで表示させてみようかと思い、横幅119pxを大きくすると5個表示ではなく、4個表示になりますが、5個表示のまま背景内ぎりぎりまで表示させるのは難しいでしょうか。

ありがとう御座いました。

[yasumaxキーマスター]

こんにちは。

> グレーの背景内ぎりぎりまで表示させてみようかと思い、

でしたら、お勧め商品の枠を真ん中に揃えるやり方は綺麗さっぱり忘れてください。

#content .thumbnail_box{

width: 133px;

～中略～

}

上記指定のみでグレー背景いっぱいに1列5つ並ぶかと思います。

[seka参加者]

グレー背景いっぱいに5つ並びました。

とても嬉しいです。

ありがとう御座います。

[投稿者]

投稿