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

2012 年 6 月 8 日

ホーム フォーラム 使い方全般 TOPページ「お勧め商品」を1列あたり5個にしたい

このトピックには4件の返信が含まれ、2人の参加者がいます。5 年、 6 ヶ月前 steve-osaki さんが最後の更新を行いました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #51579

    steve-osaki
    参加者

    WordPress のバージョン:3.3.1

    Welcart のバージョン:1.1.5

    ご利用のテーマ:Welcart Default Theme 1.1

    症状を確認したブラウザ: Google Chrome 19.0.1084.54

    サーバー(会社名、サービス名):さくらインターネット

    SSLの利用: 無し

    WordPress のパーマリンク設定:カスタム構造(/%category%/%postname%/)


    お世話になっております。

    トップページの「お勧め商品」の

    商品画像を、

    デフォルトの1列あたり4個 → 1列あたり5個

    に変更したいと考えてます。

    home.phpの中を見まして、

    商品を出力するphpの中のコード

    posts_per_page'=>8

    の値を10に変えたのですが、

    1列あたり4個表示のままで、

    列だけが3列に増えました。

    色々調べてみたのですが、

    どこのコードで1列あたりの個数を制御しているのかが

    分かりませんでした。

    1列あたりの個数を変更する方法orヒント等、

    ご教授いただけますと幸いです。

    #64666

    yasumax
    キーマスター

    こんにちは。

    1列あたり5個にするにはCSSの編集が必要になります。

    style.css内の「#content .thumbnail_box」セレクタの横幅(width)・縦幅(height)を調整してください。

    商品画像のサイズはhome.php内のWelcart専用テンプレートタグ「usces_the_itemImage」の横幅(width)・縦幅(height)の値を変更してください。

    #64667

    steve-osaki
    参加者

    ご返信ありがとうございます。

    ご指示どおりCSSを変更すると、一列あたり5個で表示できました。

    ですが、

    サムネイルのサイズは変えずに5個表示にしたいと考えております。

    「お勧め商品」は、

    全体が

    <div class="clearfix">

    で囲まれていますが、

    このdivタグが現在560px × 630pxで設定されて(?)います。

    私がやりたい事としては、

    サムネイルのサイズはそのままで

    このdivタグの横幅を広げて5個表示にしたい、というイメージです。

    ただ、class=”clearfix” にタテヨコ幅を設定している記述が見つけられませんでしたので、

    ひょっとして関数で制御されてるかなと思っていて、そこで行き詰っています。

    説明不足で申し訳ありません。

    #64668

    yasumax
    キーマスター

    こんにちは。

    > サムネイルのサイズはそのままで

    > このdivタグの横幅を広げて5個表示にしたい、というイメージです。

    3カラムの状態かつ、サムネイルのサイズをそのままで5個表示は厳しいです。

    4個表示が限界です。

    トップページも2カラムに変更してみてはどうでしょうか?

    2カラムにする方法は以下のとおりです。

    ・home.phpの12行目「three-column」を「two-column」に変更

    ・saidebar.phpの「begin right sidebar」~「end right sidebar」の間を全て削除

    あとは、商品一つ一つのブロックを調整すればキレイに表示されると思います。

    #64669

    steve-osaki
    参加者

    yasuma様

    早速のご返信ありがとうございます。

    「two-column」の変更方法を知らず、

    以前から擬似的に2カラムにしていたのが混乱の元でした…。

    ご指示どおりに変更したところ、問題なく5個表示が実現できました!

    ありがとうございました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

このトピックに返信するにはログインが必要です。