リキッドレイアウトで画像を可変にする際の注意点~WordPress覚書き~

いやー今回もだいぶ時間がかかりました。素人パワー全開です。

今回は、レスポンシブデザインで、かつ Media Query で指定したところ以外もサイズが可変する仕様のサイト(つまりはリキッドレイアウトのサイト)をいじっていたのですが、デザインを変更した際に組み込んだ静止画が可変しない!!というので、結構試行錯誤しました。。

フリーのテーマをいじって作っていて、デフォルトでデザインされていた画像の部分は可変していたので、デフォルト部分と追加した部分の何が違うのか CSS とにらめっこしながら原因究明に時間を割いていました。が、結局は、新たに追加した部分の 「img」 に width: 100% を指定していなかったというオチでした…。ずっと、画像を囲ってる id と class しか見ていなかったよ、、ちくしょう。

.class_name img{ max-width: 100%; height: auto; }

結局、こいつを追加するだけであっさり解決。

余談ですが、Wordpress で add_image_size を使って新しくサムネイルサイズをテーマに追加した場合、それまでにアップ済みの静止画(アイキャッチ画像など)は、そのままでは新しいサムネイルサイズに適用されません。
そんな時は、Regenerate Thumbnails が便利ですよ~

参考:
WordPressでサムネイルを指定サイズに切り抜いて表示させる方法
WordPressのサムネイルを再生成するプラグイン「Regenerate Thumbnails」