[解決済み] 商品ページの画像サイズについて

2013 年 3 月 18 日

ホーム フォーラム 使い方全般 [解決済み] 商品ページの画像サイズについて

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

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

    wishnerrobins
    参加者

    お世話になります。

    商品ページの画像を350×350pxにしたくて、こちらに似たような質問がいくつかあったので、参考にして下記のようにしてみました。

    ・#itempage .itemimgと#itempage .itemimg imgを width:350px; height:350px;に変更。

    ・メディア設定のサムネイルサイズを 350×350pxに変更。

    ・wc_item_single.phpの該当箇所を<?php usces_the_itemImage(0, 350, 350, $post); ?>に変更

    すると希望のサイズにはなるのですが、画質が引き伸ばされたように荒くなってしまいます。

    どうすればきれいに画像サイズを大きく出来るのでしょうか。

    お忙しい中恐縮ですが、どうぞ宜しくお願い致します。

    #66330

    yasumax
    キーマスター

    こんにちは。

    元画像のサイズはいくつでしょうか?

    また、元画像は横長・縦長だったりするのでしょうか?

    #66331

    wishnerrobins
    参加者

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

    元画像は、500px以上の正方形にしています。

    最初、wordpessでは投稿画像が正方形に必ずクロップされてしまうと勘違いし、掲載写真をすべて正方形に直してしまいました(添付①)

    本当は、そのまま(添付②)のような形で、長辺350pxで掲載するのが理想です。

    そのあたりも含めてご教授いただけると幸いです。

    宜しくお願い致します。

    [attachment=9683,218] [attachment=9683,219]

    #66332

    yasumax
    キーマスター

    こんにちは。

    「#itempage .itemimg img」セレクタで横幅・縦幅を350pxで固定してしまっているのが原因かと思われます。

    #itempage .itemimg img {

    width: auto;

    height: auto;

    max-width: 350px;

    max-height: 350px;

    }

    などにしてみると画像の広がりはなくなるかと思います。

    #66333

    wishnerrobins
    参加者

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

    cssを下記のように変更してみました。

    #itempage .itemimg img {

    width: auto;

    height: auto;

    max-width: 350px;

    max-height: 350px;}

    #itempage .itemimg {

    width: 350px;

    height: 350px;

      float: left;

    margin-right: 10px;}

    そうしますと、350px分のスペースは空くのですが、画像は200×200pxになってしまいました。

    念のため、画像を一旦削除し再度アップロードしてみました。

    ということは、cssではなくphpの問題なのでしょうか?

    wc_item_single.phpは以下のようにしています。

    <div id=”itempage”>

    <div class=”itemimg”>

    ” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?><?php usces_the_itemImage(0, 350, 350, $post); ?>

    </div>

    #66334

    yasumax
    キーマスター

    こんにちは。

    おかしな挙動をしているので、今一度確認させてください。


    ★ メディア設定 ★


    管理画面の「設定>メディア」の画像サイズは、WordPressをインストールした状態のままでしょうか?


    ★ コード ★


    <?php usces_the_itemImage(0, 350, 350, $post); ?>をwc_item_single.phpに記述


    ★ 登録画像 ★


    登録した画像は、「500px×500px」もしくはそれ以上。


    こちらでは、以上の条件で350px×350px内にリサイズされたものが表示されたのですが、wishnerrobinsさんのところでは200px×200px内にリサイズされるのでしょうか。。。。

    #66335

    wishnerrobins
    参加者

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

    もう一度色々確認していたところ、原因がわかりました。

    修正するPHPファイルを間違えていました。

    ◯:wp-content>plugins>usc-e-shop>templates>single_item.php

    ☓:wp-content>themes>welcart_defult>wc_templates>wc_item_single.php

    無事に希望通りの修正が出来ました。

    すごく初歩的なことでお恥ずかしいですが、丁寧に対応してくださって感謝しています。

    どうもありがとうございましたm(_ _)m

    #66336

    yasumax
    キーマスター

    こんにちは。

    最新版にアップグレードができなくなってしまうため、Welcart本体を修正するのは推奨しておりません。

    現在お使いのテーマをお聞きするのを忘れておりました。

    現在、welcart_defaultではなくオリジナルテーマでショッピングサイトを制作されているということでしょうか?

    でしたら、下記のどちらかの方法を推奨いたします。


    ・お使いのテーマにwc_templatesをコピーしてマークアップを修正してから画像のサイズを変更

    ・「usces_filter_the_itemImage」というフィルターフックを利用して画像のサイズを変更


    上記方法でしたらWelcart本体のアップグレードは可能となります。

    フィルターフックに関しては下記サイトをご参照ください。

    Welcartコミュニティ|Welcart のカスタマイズとフック

    #66337

    wishnerrobins
    参加者

    はい、オリジナルテーマでショッピングサイトを作成しています。

    フィルターフックがまだよく分からないため、もう一方の方法を試したいのですが、

    オリジナルテーマ内に「wc_templates」を丸ごとコピーし、その中のsingle_item.phpを修正するという感じで大丈夫でしょうか?子テーマ内でなくても大丈夫ですか?

    #66338

    yasumax
    キーマスター

    こんにちは。

    はい。オリジナルテーマに「wc_templates」を丸ごとコピーしてください。

    ただし、「wc_templates」は、welcart_defaultを元にマークアップしております。

    オリジナルテーマで利用する場合は、マークアップを調整してあげないとレイアウトが崩れることがございますのでご注意ください。

    また、商品詳細のテンプレートは「wc_templates/wc_item_single.php」となります。

    #66339

    wishnerrobins
    参加者

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

    オリジナルテーマに「wc_templates」をコピーして、wc_templates/wc_item_single.phpの画像サイズ部分を希望のサイズに編集してみました。

    しかし、アップロードしてみても変化がありませんでした。

    レイアウトが崩れるということはなかったようです。

    そこでこちら→[解決済み] 商品詳細ページのメイン画像サイズ変更についてを参考に、オリジナルテーマのfunction.phpに、以下のフィルターフックを入れてみました。

    add_filter(‘usces_filter_the_itemImage’, ‘my_itemimage_func’, 10, 3);

    function my_itemimage_func() {

    global $post;

    $itemImage = usces_the_itemImage(0, 350, 350, $post);

    return $itemImage;

    }

    すると、画像のサイズは変わってくれましたが・・・

    ①画像の右側に回り込んでいた商品情報部分が、float解除したように下にいってしまいました。

    ②画像をクリックすると拡大するようになっていたのが、できなくなってしまいました(リンクが貼られていない)

    【plugins>usc-e-shop>templates>single_item.php】を直接修正した時のように、表示される画像のサイズのみを修正ということはできますか?

    #66340

    yasumax
    キーマスター

    こんにちは。

    usces_the_itemImage(0, 350, 350, $post);

    usces_the_itemImage(0, 350, 350, $post, 'return');

    にしてみるとどうでしょうか?

    #66341

    wishnerrobins
    参加者

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

    仰せの通りに変更しましたところ、希望通りのレイアウトになりました。

    yasuma様、本当にありがとうございましたm(_ _)m

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

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