リキッドレイアウトで画像を可変にする際の注意点～WordPress覚書き～
いやー今回もだいぶ時間がかかりました。素人パワー全開です。
今回は、レスポンシブデザインで、かつ Media Query で指定したところ以外もサイズが可変する仕様のサイト（つまりはリキッドレイアウトのサイト）をいじっていたのですが、デザインを変更した際に組み込んだ静止画が可変しない！！というので、結構試行錯誤しました。。
フリーのテーマをいじって作っていて、デフォルトでデザインされていた画像の部分は可変していたので、デフォルト部分と追加した部分の何が違うのか CSS とにらめっこしながら原因究明に時間を割いていました。が、結局は、新たに追加した部分の 「img」 に width: 100% を指定していなかったというオチでした…。ずっと、画像を囲ってる id と class しか見ていなかったよ、、ちくしょう。
|
1 |
.class_name img{ max-width: 100%; height: auto; } |
結局、こいつを追加するだけであっさり解決。
余談ですが、Wordpress で add_image_size を使って新しくサムネイルサイズをテーマに追加した場合、それまでにアップ済みの静止画（アイキャッチ画像など）は、そのままでは新しいサムネイルサイズに適用されません。
そんな時は、Regenerate Thumbnails が便利ですよ～
参考：
WordPressでサムネイルを指定サイズに切り抜いて表示させる方法
WordPressのサムネイルを再生成するプラグイン「Regenerate Thumbnails」
