【WPの仕組み】スマホとかに対応するレスポンシブ化(デバイスに応じてレイアウト変動)ってどうなってるの？

今回は、よくある疑問『wordpressのスマホ対応とかレスポンシブの仕組み』を確認します。 最近のWPテーマはそのままでもスマホ対応できるものが多いのですが、その仕組みを中心にみていってみましょう。

レスポンシブって何なの？メリット・デメリットは？

レスポンシブって？

簡単にいうと、『１つのHTMLページで、パソコンやスマートフォンなどのデバイスに応じて、レイアウトが変動するタイプのwebサイト』のことです。例えば、『pcでアクセスしたときは、サイドバーとメインの記事で２列』『タブレットやスマホでは１列』みたいに変動するものです。

2010年代はじめころから概念が出始めて、2018年あたりでは(スマートフォンの普及率が高くなっているというのもあるので)主流になっています。

レスポンシブメリットとデメリット

• 『URLが１つだから、別々に検索エンジン登録されることがない』
• 『モバイルフレンドリー評価を取りやすい』
• 『モバイル・PC別々に更新しなくて良い、メンテが楽』

最近では検索のgoogleが（スマホなどからの検索が増えているということもあるので）デバイスに応じてきちんと表示できるページを優遇したりと、seo上も有効です。sxo(ユーザーの検索体験最適化)上も、デバイスに応じて見やすいことがポイントになっています。読みにくいと『よい体験だった』とならないですからね。

• 『完全ガラケーやスマホ向けに作ったページよりは重い』
• 『ガラケーや古いブラウザーは対応してないことが多い』
• 『派手な演出のページは作りにくい』

などでしょうか。

wordpressでレスポンシブになる仕組みとは？

最近のWPテーマでは、初期状態で『スマホ・タブ・PC』みたいにレイアウト変動できることが多いのですが、その仕組みはどうなってるのか？ここで押さえていきましょう。

プラグイン(wptouchなど・今はあまり見られない)

レスポンシブ対応のテーマが少なかったころは、モバイルページに対応した表示をするプラグインがありました。機能としては、『スマホ対応していないテーマに対して、スマホ向けレイアウトのシンプルなテーマを出力してやる』というような感じです。

管理人もwordpressに初めて手を出した2013年には使ってみました（ただし、テーマがプラグインなしでもスマホ対応していた）。 現在はプラグイン無しでもスマホ表示できるテーマが多いので、そんなに使われなくなってきているかもしれません。

モバイル/PCで、読み込むCSSを変える

昔のバージョンのstingerの例です（バージョン3）。HTMLは一緒で、モバイル用のCSSを別途用意してあるという状態でした。 ユーザーエージェント変更で確認します。ＰＣのクロームブラウザではこのＣＳＳが出ていますが・・・・

ユーザーエージェントをiosにしたところ、スマホ用の『smart.css』が出てきました。技術的には『if(is_mobile())で、smart.cssを出力』という形になります。

ひとつのCSSを、メディアクエリで(デバイス幅ごとに書いて)複数デバイスに対応させる

最近多いのが『メディアクエリでデバイス幅指定して、レイアウトを変動させる』みたいなテクです。通常は『ＣＳＳのfloatがオンになっていて2列表示』、『この例でいうと、横幅がmax-widthで指定された780px以下のデバイスでfloatが解除されて一列表示』という形になります。

細かく作っていけばいくほど『横長PCディスプレイ・中型PCディスプレイ・タブレット縦/横・スマートフォン』というようにいろいろ対応させやすくなります。 wpのテーマにおいても、ここ数年はこの形でつくられているものが多いといえます。wpだけに限らず、静的htmlサイトでもよく使われる方法です。

あとがき・まとめ

wpサイトの『スマホなどに対応させる、レスポンシブの仕組み』ということでしたが、プラグイン以外だったら他のタイプのwebサイトでも対応できそうです（サーバーがPHP対応していれば、条件分岐でCSSを出すことも可能）。

また、どういう仕組みでレスポンシブになっているかを押さえておくと、細かい調整をするときにも対応しやすいかもしれません。