CSS?条件分岐?テーマ切替?WordPressの賢いモバイル対応

WordPressで多様化するデバイスサイズに対応するには

サイトの表示をデバイス画面ごとに振り分けて表示させる、レスポンシブ。ただ、昨今のデバイス画面のサイズ多様化に対処するには、昔ながらの方法では厳しい面も見えています。

今回はWordPressサイトで、これに賢く対応する方法について書いてみました。

レスポンシブデザインをCSSで設定する時の弱点

CSSでレスポンシブデザインのサイトを作成する際、表示されるコンテンツをそのサイトが表示される画面サイズの大きさによって、どのように表示されるかをスタイル設定できる機能がメディアクエリです。

このスタイルの切替ポイントをブレークポイントといいます。

こんな感じでデバイスの表示幅でCSSの設定をします。
ブレークポイントのイメージ

しかし、メディアクエリでの設定は、CSSをそれなりにわかっていても結構面倒ですし、デバイスサイズの多様化に合わせてブレークポイントを増やすのも大変ですね。

また、display:noneの連発というあまり好ましくない事態も招きかねません(^_^;)

display:noneの連発が好ましくない理由
display:noneについては、レスポンシブデザインを作る上で仕方ない場合はSEO上でも問題ない、とされてはいます。

特にHTMLサイトは仕方ない場合が結構あります(^^ゞ

レスポンシブサイトを作る上で仕方ない場合というのは、PCではデザイン的にヘッダーに配置した画像を表示させたいけれど、モバイルでは画面の狭さから非表示にしないとファーストルックがヘッダー画像だけになってしまう、または、画像が大きいと読み込みが遅くなる、といった場合です。

以下は、WOMAN Onlineの記事ページのキャプチャで、display:noneで対処されているわけではありませんが、モバイル表示を適正な形にしている実例として引用しています。

左のPCページではヘッダーの広告バナーや記事タイトルロゴ画像が大きく表示され目を引く仕組みだが、右のスマホ表示では、バナーは縮小され、タイトルロゴ画像は表示されない様になっているWOMANOnlineの記事ページ
引用:
http://wol.nikkeibp.co.jp/atcl/column/15/108817/112700010/?ref=top-kanban

このような形でモバイル表示を適切な形にしたい場合、CSSでのメディアクエリで対応すると、モバイル画面上では表示させたくない画像のCSSで、display:noneと設定し、表示されないようにするのが一般的です。

が、HTML上にはヘッダー画像のHTMLは残っています。

このやり方を多用してしまい、画面には表示されない要素のHTMLがページ内にたくさんある状態だと、

  1. 非表示テキスト多数
  2. → 隠しテキスト多数、と勘違いされ
  3. → スパム

とみなされる可能性が否めないのです。

勘違いであっても、スパムとされると検索順位に悪影響が出るので、連発は控えたいところです。

WordPressなら、条件分岐で表示させるコンテンツの制御が可能

さて、WordPressの場合はCSSで制御しなくても、wp_is_mobileを使った条件分岐でモバイルとPCで表示の切り替えができる、というお話は以前の記事「WordPressウィジェット エリアの追加・表示・条件分岐の方法」で書きました。

この方法なら、WordPressが静的なHTMLを生成する段階で、モバイルではこの表示、PCではこの表示、とすることができるので、HTML上もきれいです。

しかし、wp_is_mobileの場合、「モバイルとPC」という2つの振り分けのみ、

携帯電話・スマートフォンを特定して検知するわけではなく、タブレットもモバイルデバイスとして認識される
-引用:「WordPress Cordex関数リファレンス/wp is mobile」

なので、タブレット端末もモバイルに振り分けられる、んですね。

タブレットと言うと、iPadが真っ先に思い浮かぶのではないかと思いますが、昨今では各メーカーが競うようにタブレット端末を発表しています。

ここで問題になるのが、ノートPCの様に使われるタブレット端末でもモバイル表示で良いのか?というコト。

例えば、サーフェス プロ3 はモバイル端末として認識されるので、wp_is_mobileで振り分けると、表示もモバイル仕様になります。

スマートフォン想定表示を12インチ画面で見ると・・すっかすかになっちゃいますね(・∀・;)

もし、それが嫌なら、レスポンシブにするためのCSS設定(前述のメディアクエリですね)にIE用の特別なCSS設定をしとけってことらしいです^^;

まあ、相変わらずの唯我独尊なMSはさておき、このような事から、

  • スマートフォン表示はなるべく軽く「モバイルフレンドリー」に
  • でもタブレットにはPC寄りの見た目にしたい
  • PC画面だけは大画像のスライドショーなども載せてデザインにこだわりたい

といった、よりデバイスに沿った表示振り分けを、出来れば簡単にしたいですよね。

そこでここでは、WordPressサイトでの、こういった場合の対応方法についてまとめてみました。

条件分岐設定をカスタマイズする

プラグインなどを使わずに、自分でカスタマイズしたい場合、次の記事の「is_mobileを使ってスマホとそれ以外を分岐する」で実現できます。

is_homeとis_mobileを使ってカスタマイズの幅を広げよう!【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!http://naifix.com/is_home-and-is_mobile/

※Elloraさん、いつも参考にさせていただいております、ありがとうございます(^^)

分岐する条件をコピー、後は表示・非表示の条件分岐をテーマに加筆していけば、OKです(^^)

条件分岐についての理解も深まる素晴らしい記事なので、ぜひご一読を(^^)

カスタマイズするのはやぶさかではないけれど、モバイルの細かい設定を管理するのが面倒だなぁという方には、プラグインもあります。

WordPressプラグイン、mobbleを使用する

WordPressプラグインmobbleイメージ

mobbleのFAQページを見ると、実際に使用できる表示の条件分岐用タグを確認することができます。
mobble・FAQ

一般的には、is_mobile と is_tablet さえあれば何とかなりそうですが、これだけ有れば条件分岐に困ることはなさそうです。

但し、このプラグインではキャッシュプラグインW3 Total Casheとのコンフリクト(:プログラム同士の競合してうまく働かなくなる状態)が報告されています。

フォーラムなどで確認してみた限りでは、時々うまく動かないといった報告が寄せられています。キャッシュプラグインを使われている方は最初の方法をとられた方が良いと思います。

いっそのことMulti Device Switcher

Multi Device Switcher

さて、ちまちま条件分岐なんかしてるのめんどくさい!!!でも画面切り替えはしたい!!!もっと簡単にできるの無いの!?という方々は、いっそのこと、プラグインMulti Device Switcherが良いんじゃないかな、と思います。

PC画面の場合、タブレットの場合、スマホの場合、とテーマを切り替えることができるので、WordPressサイトをレスポンシブじゃないテーマで作っちゃった~(T-T)といった場合にはほんとに助かるプラグインという認識でしたが、

デバイスサイズの多様化が進む昨今、CSSでのレスポンシブだけで細かく対応するのも厳しい、条件分岐はテーマをいじらないとできない、でもPHPなんてわからないし!!(>_<)という場合にも良いじゃん!!(^^)とその良さを再認識した次第です。

SNSなどの独自の設定もプラグインを使えば全ての場合に適用されるので、簡単です(^^)
PCだけ、スマホだけ、といった設定はそれぞれ指定したテーマに設定すればOKです。

ではでは、今日はこの辺で。
「CSSメディアクエリ?条件分岐?テーマ切替?WordPressの”レスポンシブ”考」の巻でした(^^)

お役に立ちましたらシェアなどしていただけるとハッピーです(^^)

Published:2015/12/03

Written by

コメントを残す