wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/05/01

こんにちは、管理人@SS_mshpです。

今回は、よくある疑問『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を出すことも可能)。

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - サイトのモバイル対応 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい

今回は、スマホ対応や管理をしやすくするためにレスポンシブにしたはいいけど …

【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。

今回は、fc2ぶろぐの検索タグを、スマホ向けで使える簡単な方法を行ってみ …

【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応

今回は、WordPress(4.9などの新しいバージョン)の管理画面で、 …

【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする

今回は、管理人のこのサイトを使って、『記事一覧のタイトル表示場所をPC/ …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

お知らせ:楽曲受付サイトをレスポンシブ・スマートフォン対応にしました。しなかった場合考えられるリスクは?効果は?

今回は音楽制作ではなく、管理人がお仕事サイト(アトリエss)をスマートフ …