レスポンシブ・ウェブデザインに対応したテーマ(TwentyEleven)

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

レスポンシブ・ウェブデザイン

レスポンシブ・ウェブデザイン
スマホ(android)での表示

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

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

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

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

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

画像が縦伸びする。

 

それと、TwentyEleven 自体の問題!

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

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

 

 

 

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行を追加する
}

Screenshot_2013-07-06-16-07-38

縦伸びせず正常に表示

 

 

 

 

 

 

これで問題解決!

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です