【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする

マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント(UA)」情報によってデバイスを判別させるWordPress関数(テンプレートタグ)を利用した方法です。スマートフォンやタブレットなどのモバイル端末用スタイルシートの作成・利用にはHTMLとCSSの知識が少しだけ必要になります。

以下は、ゼロからサイトのテーマを作るのではなく、すでにあるテーマを利用して、モバイル端末からのアクセス時に最適なデザインで表示させる方法です。

メデイアクエリー(Media Query)

メディアクエリーは、画像解像度、ウインドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。

( 『レスポンシブWebデザイン』p.20より引用)

これはPC表示用とモバイル端末用のスタイルシートをあらかじめ別々に用意しておき、サイトにアクセスしてくるデバイスの横幅などを条件にして、使用するスタイルシートを切り替え、最適なデザインを表示させていく方法になります。

ユーザーエージェント(UA)による条件分岐

こちらはWordPressを作っているPHPに、独自のコマンドを設定する方法です。たとえばiPhone やAndroid 端末のときにだけ、個別の処理をさせるように設定します。

WordPressテーマに含まれているfunctions.php にコマンドを追記します。

HTMLとCSSの基礎知識

スマートフォンやタブレットで利用するスタイルシートを別に作る必要があるので、その知識と技術が少しだけ必要です。

今回は全くのゼロから作るのではなく、既存のPC表示用スタイルシートの大部分を利用して、モバイル端末で表示のうまくいかない部分だけを新しい別のスタイルシートで上書きします。

したがって、少しでもCSSのプロパティや値を変更したことのある人なら、そう難しいことはないはずです。

参考図書が必要であれば、以下の2冊をおすすめします。

マルチデバイスに対応したサイトに変更する手順

順番に説明していきます。細かく書いているので長いですが、じっさいにはそんなに時間は掛かりません。

モバイル端末で表示させたいデザインを作る

まず、PC表示用のスタイルシート(CSS)とは別に、スマートフォンやタブレットなどのモバイル端末で表示させるスタイルシートを作成します。

ファイル名を、たとえば

style-mobile.css

としておけば後で参照するときにわかりやすいでしょう。

既存のPC表示用スタイルシートの中身をそのまま全部コピーして、新規ファイルにペーストして利用するのが簡単だと思います。そのあと必要のない箇所を削除したり、プロパティや値を修正していけばいいでしょう。

まったく別々にPC用とモバイル端末用のスタイルシートをゼロから作る方法でもできますが、めんどうだし、長くなるので、ここでは割愛します。

この時点でモバイル端末用デザインのほとんどを完成させたい場合は、後述するGoogle Chrome デベロッパーツールなどを利用してください。

作成したスタイルシートをテーマ内にアップロードする

いま作成したスタイルシート(style-mobile.css)をローカル環境からFTPクライアントソフトなどを使って、レンタルサーバーにあるWordPressテーマのフォルダ内にアップロードします。

レンタルサーバーで提供しているサービスもあるはずです。無料ソフトならFFFTPをどうぞ。

FFFTP (エフエフエフティーピー) プロジェクト日本語トップページ – SourceForge.JP

header.phpにCSS の外部参照先を指定する

次にヘッダー内(header.php)に、モバイル端末用スタイルシートを外部参照させるようHTMLで書くのですが、このときPC表示で利用しているスタイルシートより後に置きます。

理由はサイト表示をするときには、HTMLに書かれている順に読み込まれ、後方に記述されているスタイルシートのデザインが前のスタイルシートを上書きしていくからです。

今回は、既存のPC表示用スタイルシートを先に読み込ませ、それからモバイル端末の表示に必要な箇所を、新しく作ったスタイルシートから参照し、上書きして表示させることになります。

デバイスのスクリーン幅に合わせるViewport を指定

次に<link>設定にViewport を指定します。こちらはGoogle Developers にわかりやすい説明がありました。

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

ビューポートの違いによる表示の違い

ビューポートを設定する – PageSpeed Insights — Google Developers

これを設定してないと、PCで見ることのできる表示を、そのままの比率で縮小させて、小さなスマートフォンの画面に無理やり表示させてしまいます。

たとえば横幅1024pxで作ったPCサイトが、スマートフォンの5インチサイズ(320px)にまで小さくなるので、とても見にくくなってしまいます。

モバイル端末などに合わせた表示に修正してくれる指定を、HTMLのhead要素内にmeta要素で設定します。

  • width=device-width :「横幅をデバイスのスクリーン幅に合わせる」指定
  • initial-scale=1.0 :「最初の表示倍率を1.0」に指定

他にもいろいろ指定できるので、気になる方はさいごに挙げている参考文献か、ネットで調べてみてください。

メディアクエリーを使ってスクリーン幅に応じたCSSの切り替えを行う

メディアクエリー(Media Query)」を使って、PC用CSSとモバイル端末用CSSの切り替えを設定します。この切り替えの条件を「ブレイクポイント(Break Point)」と呼んでいます。

今回はPC表示とモバイル端末用表示の2つなので、既存のPC表示の横幅であればstyle.cssを、それ以下の横幅であればstyle-mobile.cssでデザインを切り替えるようにします。

ここではわかりやすいように、ブレイクポイントを1024pxに指定して切り替えることにしておきます。

  • モバイル端末用表示:~1023px
  • PC表示:1024px~

モバイル端末用スタイルシートを、外部参照する<link>内に、media属性を追記します。

media=”(max-width:1023px)”

いったん、これまでのところをまとめておきます。

 

ここまでの内容であれば「レスポンシブWebデザイン」でも手順は同じです。

「ブレイクポイントをどう設定するか?」は、 ファブレットであるiPhone 6 Plus(5.5インチ)が登場してきた2014年になっては、また頭を悩ませる話題ですね。

当ブログはまだ未対応なので、これから年末にかけてゆっくり考えていきます(`・ω・´)ゞ

WordPress関数を追加する

さて、ここからはWordPress関数です。多くの技術ブログでも紹介されているので、知っている方も多いかもしれません。

functions.php にユーザーエージェント(UA)を判別するコマンドを作成する

今回は、ふだん利用するPC表示をデフォルトのデザインにして、スマートフォンやタブレットなどのモバイル端末で閲覧するときにだけ、特別なデザインを表示する方法にしています。

そこでスマートフォンやタブレットなどのモバイル端末でアクセスされたときにだけデザインを変えるよう、WordPress関数にユーザーエージェント(UA)を判別するコマンドを書いていきます。

やっていることは単純で、

  1. 「is_mysmartphone()」というコマンドを独自に設定
  2. 閲覧するデバイスのユーザーエージェント(UA)情報を取得
  3. チェックしたUA情報に含まれる文字列を分析して、「Android」や「iPhone」が含まれていれば「true」を返して判別
  4. 含まれていなければ「false」を返す

といった手順になります。

コマンド名はWordPressに元々あるテンプレートタグと重ならなければ別の名前にもできますし、UA情報を判別する文字列をもっとたくさん追加することも可能です。さらに細かな分岐条件を組み込むこともできます。

今回はfunctions.php に以上のコマンドを追加するだけにします。

【追記:11月27日】BlackBerry の UA について

BlackBerry のスマートフォンやタブレットを Google Developer Tools (F12 ボタン「要素の検証」)でユーザーエージェントの判別を調べられるのは、以下の3点です。

  • BlackBerry PlayBook:2011年4月11日発売のタブレット
  • BlackBerry Z10:2013年1月31日発売のスマートフォン
  • BlackBerry Z30:2013年10月21日発売)のスマートフォン

やってみたところ、「BlackBerry」と書いているだけでは判別してくれませんでした。そこで、いろいろ調べて、試してみた結果、タブレットは「RIM Tablet OS」、スマートフォンは「BB10」にすると UA 情報を判別をしてくれるようです(上のコードは「BB」にしてみました)。

じっさいの端末で検証したのではなく、Google Developer Tools のみです。「BlackBerry」で上手くいかない場合は、こちらで試してみてください。

以下は参考にどうぞ。BlackBerry Developer Blog の公式ページになります。

BlackBerry PlayBook Simulator adds support for the BlackBerry Browser | BlackBerry Developer Blog

The BlackBerry 10 User Agent String Has Arrived! | BlackBerry Developer Blog

BlackBerry Torch 9800: What Developers Need to Know! | BlackBerry Developer Blog

BlackBerry は日本であまり使われていないので、情報が少ないですね。

【追記:11月27日】その他いろいろと追加

古いバージョンの Android や新しく注目されているブラウザ「Palm」、それに Kindle に付属している「Silk」などを追加しました。

header.php にモバイル端末の分岐条件を追加

いまfunctions.php に追加したコマンドをstyle-mobile.css にだけ適用させます。そうすることでモバイル端末でアクセスがあったときにだけ、モバイル端末用スタイルシートでサイトを表示させるように変更します。

さきほど書いたheader.php の部分を少し修正して以下のようにしました。

Viewport の指定と<link>を、<?php if( is_smartphone() ): ?>~<?php endif; ?>で囲うことで、ここに書かれた部分だけがユーザーエージェント(UA)情報で判別して条件分岐されるようにしています。

基本的な設定は、以上で終了です。

あとはブラウザの表示を見ながらデザインの修正を行う

これでモバイル端末での表示がうまく切り替わっているはずです。

サイトの表示を見ると、まだ細かい点がおかしくなっていますので、これからstyle-mobile.css の記述をひとつずつ修正していきます。おそらくいちばん時間ががかるのはこの作業です。

修正時にいちいちスマホやタブレットで表示させているとめんどうです。スマホだとローカル環境にアクセスできないので、ブラウザのツールを利用します。

Internet Explorer やSafari でもいいですが、わたしが使ったのはGoogle Chrome です。

Google Chrome デベロッパーツールが便利!

無料で利用できて、しかも高機能。CSSの修正時にはこちらを利用することをおすすめします。

起動したら、まず右上にあるメニューボタンをクリックして、「その他のツール」→「デベロッパーツール」と進みます。

メニューボタン

すると画面の下にいろんな文字列の書かれた部分が表示されます。

Google Chromeデベロッパーツールを起動したところの表示

(ここまでの手順は「F12」ボタンを押せば一回で表示されます)

左上にスマホマークがあるのでクリックすると、ブラウザ表示が切り替わり、スマートフォンに合わせた見え方になります。

スマホボタン

しかし、じつはまだ切り替わっていません。もういちどサイトのページを再読み込みをするよう注意があるはずです。

再読み込みが必要な表示

再読み込みをするとうまく機能します。

デベロッパーツールのモバイル端末表示

CSSのデザイン修正はこちらを確認しながらやっていきます。マウスを使って自由に縦横の幅を調整できますが、上の「Device」でモバイル端末の種類を選択することも可能です。

デベロッパーツールのモバイル端末切り替えボタン

また、このボタンをクリックして別ウインドウにすると、作業がやりやすいかもしれません。

Google Chromeデベロッパーツールを起動したCSS部分(矢印)

別の記事でも書きましたが、表示されているCSSのプロパティや値は変更可能です。これは、サイトのスタイルシートを書き換えているのではなく、ブラウザの表示のみを変更しているのにすぎません。

Google Chrome デベロッパーツール「要素の検証」を利用したHTMLとCSSの学び方(素人向き) | かっぱのWordPress入門ブログ

下の画像で黄色マーカーがされているところは、自由にプロパティや数値を書き換えて、サイトの表示を変えることが可能です。

Google Chromeデベロッパーツールを起動したCSS部分(色付き)

マウスで合わせてクリックすれば、変更することが可能になります。あれこれと変更を試してから、そのプロパティと値をそっくりコピーして、style-mobile.css にペーストするのが簡単です。

もちろん、HTMLでも同じことが試せます。

【注意点】

Google Chrome デベロッパーツールの表示でデザインがうまく表示されたとしても、じっさいのモバイル端末で表示されるときには、個々の機器の性能などにより、うまく表示されない場合があります

とはいえ、すべての端末にあわせた完璧な設定をすることは現実的に不可能ですので、ブラウザのツールで確認してCSSを修正し、それから各主要ブラウザの表示を確認、さいごに手持ちのモバイル端末でサイト表示が大きく崩れなければ「これでOK!」としておくのがいいと思います。

あるいは、はじめから「多少表示が崩れても閲覧するには問題のないデザイン」にするとかでも、いいですね。

さいごに

やや長い記事になりましたが、難しいことはそんなにありません。HTMLとCSSの知識が少しあれば十分です。WordPressの関数については上記のコードをコピペするだけでいいですから、PHPをほとんど知らない人でもできると思います。

くわしく勉強したい人には、こちらの書籍が参考になります。

WordPress 以外なら「レスポンシブWebデザイン」の本がいいと思います。

関連記事

CSS で h タグをちょっとだけカスタマイズしてみました

見出しは超重要! 多くのブロガーさんや大手サイトでは「記事の書き方」を解説してくれています。それを読むと、見出しを効果的に使うことが、読みやすい記事を書く上での必須項目であるとわかります。 見出しの種類 見出しというのはHTMLで書くときの…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

新しく自作 WordPress テーマに変更しました

なんとか、完成にまでこぎつけました。 昼にテーマのファイルをアップロードして、変更してみたら、いろいろ表示に不具合が発生して、そのときに訪問された方にはご迷惑をお掛けしました。 ページによって新テーマと旧テーマの表示が違っていて「なんでやろ…

自作 WordPress テーマのためのメモ

前回のところから、もうすこしおもしろいデザインにしたいと思って、いろんなサイトデザインを調べて見ることにしました。 とくに参考になったのが、 Themegraphy – WordPressテーマギャラリー Media Queri…