WordPress 標準のテーマ 『TwentyEleven』 以降からは、どのスクリーンサイズのデバイス（ＰＣ、スマホやタブレットを問わず）でもページデザインを自動で最適化する技術、 『レスポンシブ・ウェブデザイン』 に対応している。

レスポンシブ・ウェブデザインとは、
ＰＣ用もモバイル用も、単一の html を使い、ブラウザーの横幅サイズを基準にｃｓｓ（デザイン）を切り替えて、デバイスごとに表示を最適化するという方法です。

ちなみに、 『雑感日記』 　←このブログは 『TwentyEleven』 を使っているので、ＰＣでもスマホでもレイアウトが少し変わるだけで基本的に同じデザインで表示されます。

ためしに、ＰＣで表示してブラウザーの幅を狭めていくとフレキシブルに表示が最適化され、スマホと同じ表示になるのが分かります。

正直、これは便利です。
デバイスごとに html を分けなくて良いので、ユーザーエージェントごとに、サーバー側で url を振り分ける必要が無いし、単一の html （url）で対応できるのでＳＥＯ的にも優位になる。

しかし、デメリットもあります。
スマホでみている時、ＰＣデザインでみてみたいと思ってもブラウザーの幅を広げれないので見ることができない。それに見た目はスマホに最適化されているようでも、画像などのソースはＰＣと同じものなのでファイルが重い。なのでスマホのＤＬ制限などにかかってしまった場合、表示ができない。できても恐ろしく時間がかかる。などの問題もある。

 

それと、TwentyEleven 自体の問題！

ＰＣでは問題なく表示される画像が、スマホでは画像の幅は合わされるが、縦伸びして表示されることがある。

いくら自動で画像幅を合わせてくれても、これでは使い物にならない。
で、調べてみたところ、解決策が見つかりました！

 

 

 

＜TwentyEleven の画像縦伸び解決法＞
WordPress 管理画面で
ダッシュボード　→　外観　→　テーマ編集　→　スタイルシート（style.css）

884行目にある　/* Images */　の記述に下図のように一行追加する。

/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
height:auto;　　　←この1行を追加する
}

 

 

 

 

 

 

これで問題解決！