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

フォーラム テンプレート(テーマ) [解決済み] お勧め商品の商品ブロックを中央に寄せたい

  • このトピックには7件の返信、2人の参加者があり、最後にsekaにより11年、 7ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #51739
    seka
    参加者

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


    WordPress のバージョン:3.1.3

    Welcart のバージョン:1.1

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

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


    お世話になります。

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

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

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

    #65171
    yasumax
    キーマスター

    こんにちは。

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

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

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

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

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

    #65172
    seka
    参加者

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

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

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

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

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

    #65173
    seka
    参加者

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

    宜しくお願い致します。

    [attachment=7777,144]

    #65174
    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 → 商品販売価格

    #65175
    seka
    参加者

    ありがとう御座います。

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

    /* thumbnail_box */

    #content .thumbnail_box {

    width: 119px;

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

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

    #65176
    yasumax
    キーマスター

    こんにちは。

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

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

    #content .thumbnail_box{
    width: 133px;
    ~中略~
    }

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

    #65177
    seka
    参加者

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

    とても嬉しいです。

    ありがとう御座います。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。