web」カテゴリーアーカイブ

レスポンシブ・ウェブデザインに対応したテーマ(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

縦伸びせず正常に表示

 

 

 

 

 

 

これで問題解決!

 

PCとスマホのサイトを振り分ける

サイト構築のために必要な覚書。

PCで見ているサイトと同じurlを指定してスマホからアクセスすると、PCサイトそのまま表示される場合と、スマホ用に最適化されたサイトが表示される場合がある。

スタイルシートへの記述で表示分けする方法もあるが、一般的にはスマホ(モバイル)専用サイトを別に用意して、PCサイトのurlから専用サイトurlにリダイレクトするような仕組みを取ることが多い。もちろん、別サイトとしてアクセス先(url)を分けるだけの場合もある。

自動振り分けの方法としては、ウェブサーバ「Apache」の設定ファイルである「.htaccessファイル」を使って振り分ける。mod_rewriteモジュールを使えば、ユーザエージェント名をチェックして、条件に合致した場合だけに指定したページへ移動(リダイレクト)させることができる。(.htaccessファイルの書き換え、もしくはmod_rewriteモジュールが使用できないサーバーの場合、JavaScriptなどを使う他の方法もある。)

<.htaccessファイル設定の例>
既に.htaccessファイルが存在するディレクトリに設置する場合は、既存の.htaccessファイル内に以下の6行を追記する。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /lite/ [R,L]
</IfModule>

仮に、.htaccessファイルを設置した場所が http://blog.livedoor.jp/syousuke0202/ の場合

スマートフォンでアクセス           http://blog.livedoor.jp/syousuke0202/lite/ へ移動。
スマートフォン以外でアクセス    http://blog.livedoor.jp/syousuke0202/ のまま。
スマートフォンでアクセスしても、http://blog.livedoor.jp/syousuke0202/?mode=pc
URLに?mode=pc が追記されていると、そのまま移動しない。

 

追記; 3行目の解説
RewriteCond %{変数名} (一致パターン) [フラグ]

変数名 : アクセス端末のユーザエージェント名
一致パターン : 「iPhone」または「Android + Mobile」または「Windows + Phone」という文字列が存在する場合という条件。Android タブレットの場合、userAgent に Mobile という文字は入らない。ゆえにAndroid タブレットは条件から省いている。
フラグ : 「R」は「リダイレクトする」という意味。「L」は書き換え規則の最終行であることを意味。