サポート » プラグイン » 画像サイズの変更

  • 解決済 ysatocinema

    (@ysatocinema)


    下記ページの商品画像ですが、サイズを少し小さく表示したいと思っています。
    http://yupachino.watson.jp/product/00026/
    ※プラグインにwoocommerceを使用しています。

    ↓のようなCSSを追加したのですが、ページを読み込む際一瞬画像が小さくなるだけで
    すぐに元に戻ってしまいます。
    解決方法を教えて頂けないでしょうか?

    .single-product.woocommerce-page .product .images .thumbnails a {
    width: 300px;
    height: 300px; }

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • thumbnails a {
    の部分がAタグの属性のみ指定で下位クラスを参照していないようですがAタグとほかのタグを分ける必要がなければ別途、サイズ用のクラスを設置して画像にクラスを追加してはどうでしょうか。
    画像でしたらAタグではなく、画像用にクラスを別途作成してみてはいかがでしょうか。

    こんにちは

    aタグではなくimgタグにスタイルを適用されてはどうでしょうか。

    画像自体は300pxのようですが、PCではwidth:100%;のスタイルがあたって362pxになっています。
    スマホでも300pxにしてしまっていいのか分かりませんが・・・

    WOOCOMMERCE側で

    .woocommerce div.product div.images img {
        width: 100%;
    }

    が設定されているからでしょうか。要は外側の要素に引っ張られて大きくなっていますね。(こちらでは幅418pxになり下がちょっと切れてますね。)
    他の画像も300×300pxのサイズを超えなくてもいいというのであれば

    .woocommerce div.product div.images img {
        max-width:300px !important;
    }

    を追加してあげるとimg自体の大きさは幅300pxまでで制限されるのではないでしょうか。
    レスポンシブでスマホにした時に真ん中からずれるのが嫌であれば上にmargin:0 auto;も入れてあげると真ん中にいきます。スマホとはいえ、やっぱり元サイズから大きくなるとぼやけてしまいますからね…

    みなさん
    ご連絡ありがとうございます。

    いくつかご意見を参考にCSSを設定しましたが、
    スマホの場合はこうしたい、もう少し横にずらしたいなど、いろいろと問題点がでてきて
    単純にサイズを変更するだけではダメだという事がわかりました。

    自身でももう少しhtmlやCSSなどを学んで再度挑戦したいと思います。

    ありがとうございました。
    また、わからなくなった時はよろしくお願い致します。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    CSSやHTMLのデバッグについては、Chromeの開発ツールを使われると簡単にテストができて便利です。
    http://www.aiship.jp/knowhow/archives/28745

    いきなり本番のソースを変更するのは勇気がいると思いますので、ぜひお試しください。

    Okamoto Hidetaka さん

    ご連絡ありがとうございます。

    デベロッパーツールはスマホ表示くらいにしか使っていなかったんですが、
    いろいろとできるんですね。

    情報提供ありがとうございます。

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