wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

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

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

   

こんにちは、管理人@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サイト制作 【タグ】 -

Message

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

  関連記事

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のweb …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行い …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …