| web creators特別号 |
| スマートフォン・ソーシャルメディア・WordPress Web制作テクニック総特集 |
WordPress 11-1
WordPressにおけるスマートフォン対応(前編)
ここではWordPressにおけるスマートフォン対応について解説する。WordPressでは、各端末ごとに最適な表示を同一URLで実現させる方法で対応できる。また、オープンソースCMSであることから無料でスマートフォン対応できる点も魅力だ。
解説／星野邦敏（株式会社コミュニティコム）
WordPressによるスマートフォン対応の方法
WebPressサイトのスマートフォンへの対応は、次の3つの方法がよく使われているようだ。(1)レスポンシブ・ウェブデザインに対応したWordPressテーマによって画面サイズに応じた振り分けを行う。
(2)端末のヘッダー情報によりユーザーエージェントで振り分けて、PC・スマートフォン・携帯電話、それぞれのWordPressテーマを作る。
(3)スマートフォンに自動対応するプラグインをインストールして有効化する。
それぞれの方法の実装方法の解説に入る前にまず、どの方法がよいのか、という結論から考えていく。この際、2012年6月12日に発表されたGoogleの公式見解【01】が判断するのに役立つので以下に引用してみよう。
スマートフォンに最適化されたこの記事からもわかる通り、Googleはレスポンシブ・ウェブデザインに基づいてスマートフォンに最適化されたサイトを構築することを推奨している。ちなみに、現在の日本の検索エンジンは、Yahoo! JAPANもGoogleの検索エンジンを採用していることから、事実上Googleの一強である。
サイト構築の推奨方法
スマートフォンに最適化されたサイトを構築する際に、Googleは、次の 3 つの構成をサポートしています。
1.レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じHTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2.すべてのデバイスに対し単一の URLで、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML とCSS を提供するサイト。
3.モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。
この点からも、まずはレスポンシブ・ウェブデザインで画面サイズに応じて最適な閲覧を行えるようにWordPressテーマを構築することを優先するべきだろう。
そして、JavaScriptで用意されたバナー広告など、レスポンシブ・ウェブデザインに基づくCSS3のメディアクエリでは対応しづらい点を、端末のヘッダー情報によりユーザーエージェントで振り分けて対応する、というのがよいと思われる。
ただし、レスポンシブ・ウェブデザインでの対応や、ユーザーエージェントでの振り分け対応などは、制作に一定の工数が掛かる。予算規模などから工数を掛けられない案件については、プラグインによる対応で工数を下げる必要があるかもしれない。
【01】全文は「Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」（http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html）にある。このブログは、Webサイト制作や運営において、Googleの考えがわかる有用な情報が多いので、チェックしておくとよいだろう。
レスポンシブ・ウェブデザインで対応する方法(1)
まず、レスポンシブル・ウェブデザインとはは何かについて考えよう。この点についても先ほどの記事に書かれているので引用する。レスポンシブ・ウェブデザインは、CSS3のメディアクエリを使用して見た目を変更するWeb ページの構築手法です。つまり、デバイスに関わらず共通の1つのHTML を用意し、CSSメディアクエリを使用して、そのページを表示する画面サイズからデバイスを判断しCSSを選択し、そのデザインを変更します。すなわち、レスポンシブ・ウェブデザインとは、CSS3のメディアクエリ（Media Queries）により、CSS側で振り分ける方法だと考えられる。WordPress3.2からのデフォルトテーマである「Twenty Eleven」テーマはメディアクエリに対応しているので、このデフォルトテーマのstyle.cssを見ながら解説していきたい。「Twenty Eleven」テーマのstyle.cssを見ると、ファイルの下の方に、【02】のソースコードがある。
ここにある「@media (max-width:800px)」とは、画面サイズの最大幅のことである。ここでは800pxより小さい場合に、「{}」内に書かれているスタイルが適用される。メディアクエリの振り分けに使う属性は、そのほかにも複数ある。たとえば、「@media (min-width:800px)」と書けば800pxより大きい場合に適用されるし、「@media (max-devicewidth:800px) 」と書けば画面サイズではなく端末のデバイスサイズに応じて振り分けることができる【03】【05】【05】。
このように、CSS3のメディアクエリを使用してレスポンシブ・ウェブデザインでWordPressテーマを制作すると、画面サイズに応じてWebサイトデザインを最適化することができる。
【02】
【03】画面サイズが800pxより大きい場合。２カラムでサイドバーが右側に付いている。
【04】画面サイズが800px以下の場合。１カラムとなる。
【05】画面サイズが650px以下の場合。検索ボックスがタイトル部分の上に来る。
（後編に続く）
[目次に戻る]
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
