WordPressサイト制作とメンテ/エラー対応から、PHP/CSS/javascriptプログラミング、動画・音・イラスト等制作まで扱うコラム

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

更新: 2024/02/16 1999文字

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

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

レスポンシブって?

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

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

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

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

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

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

などでしょうか。

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

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

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

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

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

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

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

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

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

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

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

あとがき・まとめ

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

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


【カテゴリ】- 雑談/ニュース/ブログ
【タグ】-

関連記事