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などを学んで再度挑戦したいと思います。
ありがとうございました。
また、わからなくなった時はよろしくお願い致します。
CSSやHTMLのデバッグについては、Chromeの開発ツールを使われると簡単にテストができて便利です。
http://www.aiship.jp/knowhow/archives/28745
いきなり本番のソースを変更するのは勇気がいると思いますので、ぜひお試しください。
Okamoto Hidetaka さん
ご連絡ありがとうございます。
デベロッパーツールはスマホ表示くらいにしか使っていなかったんですが、
いろいろとできるんですね。
情報提供ありがとうございます。
