iPhoneから見た「TwentyEleven」の画像表示を最適化するたったひとつのおまじない

WordPress Stickers Everywhere Photo by teamstickergiant

こんにちは、Yuichi(@flavour47)です。

先日、WordPressのテーマを「Twenty Eleven」に変更しました。このテーマは現在のWordPressデフォルトテーマであり、色々と最新機能が盛り込まれているようです。

その中で目立った機能と言えば、MacやiPhone/iPadを問わず、どのスクリーンサイズでも自動的にページのデザインを最適化する技術、すなわち「レスポンシブ・ウェブデザイン」が採用されてます。

参考：レスポンシブ・ウェブデザインとは？—メリット、デメリット、注意点を調べてみた | ihayato.news

参考：[Å] これから対応必須な「レスポンシブWebデザイン」を紹介しているサイトのまとめ | あかめ女子のWebメモ

今まではスマートフォン向けにWPTouchを使ってましたが、「Twenty Eleven」ならパソコンだろうがスマートフォンだろうが同じデザインで表示されるのでこれはかなり便利だろうと思ってました…。

最適化のハズが画像の表示がおかしい…。

まずはこちらを見て頂きたい。

120723 0003

こちらは当ブログの記事をMacから表示したものです。

そしてこちらがiPhoneで表示した場合。iPhoneのスクリーンサイズに最適化されているが、画像は最適化されず細長く表示されているのがわかる。

せっかくの「レスポンシブ・ウェブデザイン」なのに画像がこんな表示では見づらくてしょうがない。

女神が降臨した！

WordPressのデフォルトテーマの「TwentyEleven」ならちょっとググれば解決策もたくさんヒットするだろうと思い、色々と調べてみるものの意外と解決策には結びつかず途方に暮れてたが、この悩みをあるお方にご相談したところ、サクッと解決策を教えて頂いた。

赤メガネの女神@mk_mizuhoさんだ。

画像表示を最適化するたったひとつのおまじない

「TwentyEleven」を使用していて同じように画像が最適化されずに縦長に表示されているサイトを結構見かけるので、@mk_mizuhoさんに教えて頂いたTipsをシェアしておきます。

[css padlinenumbers="3" firstline="866"]
/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
[/css]

WordPressの管理画面から外観 > テーマ編集 > スタイルシート（style.css）を開き866行目あたりにある/* Images */を見て頂きたい。

[css padlinenumbers="3" firstline="866" highlight="871"]
/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
height:auto;
}
[/css]

「max-width: 97.5%; /* Fluid images for posts, comments, and widgets */」の直下に「height:auto;」の記述を入れるだけです。(ハイライト表示されている部分)