Googleが検索結果においてWEBサイトがモバイルフレンドリーかどうかを判断する基準を2015年4月21日に発表しました。この内容は、スマホでみたときにWEBページのデザインがデバイスサイズに適当しているかというものです。
これは全世界で実装されたことで、モバイルフレンドリーに対応していないWEBサイトは検索順位がさがる可能性があります。
今回このような記事をかこうと思ったのはモバイルフレンドリーかどうか確認するため、または詳しくなるためではありません。WordPressのテーマによってはおそらく対応しているのがほとんどだと思います。
▼目次
以前こんな記事を紹介しました。
関連記事 : 「wp_is_mobile」PC・スマホ画面で表示される内容を切り替える
これはPHPファイルのみでスマホ (タブレット端末) とパソコン表示を切り替えるというものです。この方法を知っているとより自由なカスタマイズをすることができます。
それに対し今回はCSSでスマホとパソコンの表示を切り替えて、自由自在にカスタマイズしたいというのが目的です。いわゆるレスポンシブWEBデザインというものです。
レスポンシブWEBデザイン
GoogleがモバイルフレンドリーのWEBサイトを評価すると発表したことからそうした流れになり、様々なサイズの端末が増えたことにより注目されたのがレスポンシブWEBデザインです。
略してRWDともいわれます。これはパソコン・タブレット端末・スマホなどのことなるサイズでもそれぞれの画面サイズにあわせて調整して表示する、という手法になります。
レスポンシブWEBデザインの特徴が一つのHTML、CSSで異なるデバイスに適応した表示をするというものです。それを実装しているのがメディアクエリになります。
メディアクエリ / Media Queries
CSS2ではメディアタイプによってパソコン画面、テレビ画面、印刷用と媒体別に設定することができました。メディアクエリとはその拡張版でCSS3から存在します。
▼メディアタイプの記述例
type=”text/css” media=”screen”>
メディアクエリはデバイスの種類で画面サイズを区別しているわけではなく、画面サイズによって表示を切りかえています。ちなみにパソコン画面だとサイドバーが横にきていてスマホ画面でみるとサイドバーがページの一番下にきているのはこのメディアクエリによるものです。
WordPressではレスポンシブに対応しているテーマを選択すればそれでOKです。ただしそのテーマデザインをカスタマイズしたいという場合は自分自身で記述する必要があります。
IE8以前の2％程のシェアをどうするかというところですが、すでにサポートが終了していてその今後減少していく可能性がある。と考えると対応する必要はないような気がします。
ブレークポイント
ブレークポイントは、パソコンやスマホによってどのサイズで切りかえるかというポイントです。例えば幅が768px以上だとタブレット端末表示に切りかえ、980px以上はパソコン表示に切りかえるといった切りかえる区切りポイントがブレークポイントです。
確認したらこのブレークポイントに対しての考え方はサイト管理者によってまちまちなようです。ここが迷いところですよね。どのサイズにすればいいのかはっきりとした正解がないということですから。
これは運営サイトがAndroid向けなのか、Mac、iPhone向けなのかとかによっても変わってくるでしょうし、自分が運営するサイトの訪問ユーザーに合わせればいいのではないのでしょう。
解像度は、Googleアドセンスの「ブラウザとOS」→「画面の解像度」で確認することができます。これはサイトによっても違うのでしょうが、私が管理しているサイトの場合は「1920(幅)x1080(高さ)」が圧倒的に多いです。この大きさはパソコンです。
スマホでは「320×568」あたりが一番多いです。「320×568」はiPhone5からのアクセスとなります。
デバイス別にまとめると以下のサイズです。
- 「スマホ」… 480px
- 「タブレット」… 768px
- 「パソコン」… 1024px～
今回、記述したコードはこちらです。
ここにCSSを指定
} /* パソコン表示 */
@media screen and (min-width: 768px) and (max-width: 979px) {
ここにCSSを指定
} /* タブレット端末表示 */
@media screen and (max-width: 479px) {
ここにCSSを指定
} /* スマホ表示 */
ちなみに有効にするにはメタで「viewport」を指定している必要があるようです。これはテーマによってはデフォルトで指定している場合もあります。コードを指定する前に事前確認しておいてください。
まとめ
当サイトが使っているテーマ「Simplicity2」では、デフォルトでこの「メディアクエリ」でさらに細かく指定してありました。今回子テーマで指定したら指定したところは上書きされたようです。
[ad2]