WordPress(賢威)のCSSをスマホ・PCで条件分岐して表示させる方法 | LIVE YOUR LIFE

WordPress(賢威)のCSSをスマホ・PCで条件分岐して表示させる方法

 

WordPress(賢威)でスマホのみ・PCのみで表示内容を分岐する方法【HTML】の記事では、HTMLにおいてスマホ・ PCそれぞれの表示内容を変更させる方法を解説しました。

今回はそれに対して、CSSでスマホとPCの条件分岐をする方法について解説していきます。

 

HTMLの場合であればヘッダーやグローバルナビ、フッターなどのブログパーツを条件分岐することができますが、CSSではそれぞれのパーツの具体的な表示形式を分岐することができます。

この方法を使うことにより、より自由自在にブログデザインをカスタマイズすることができるので、ぜひとも解説を参考に設定してみましょう。

 

CSS条件分岐に便利な『メディアクエリ』

 

まず、CSS2においてはメディアの種類によってそれぞれ『パソコン画面』『テレビ画面』『印刷用』といったように、媒体別に表示内容を設定することができていました。

 

しかしCSS3からは『メディアクエリ』が実装されるようになりましたが、この機能によりCSS2とCSS3では次のような大きな違いが生まれることとなりました。

  • CSS2:メディア媒体の種類によって表示内容を分岐
  • CSS3(メディアクエリ):画面サイズによって表示内容を分岐

 

このように、メディアクエリでは画面のサイズによって表示内容を分岐させています。

例えば『100px以下の画面サイズでは〇〇で表示』『500px以上の画面サイズでは△△で表示』といったように、デバイスの画面サイズによって表示されるものが変わってくるということです。

 

WordPressのテーマでレスポンシブ対応しているものであれば、テーマのCSS内にこのメディアクエリのコードが記載されています。

 

当サイトで使用している『賢威』でも、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『mobile.css』にてメディアクエリ対応のコードを確認することができます。

 

上記画像の赤枠で囲ってあるコードを見てみると、『モバイル用レイアウト(640px以下の解像度のスクリーン含む)』という説明がされています。

これはつまり、『以下のCSSコードは640px以下の画面サイズの場合に適応される』ということを表しています。

 

このようにレスポンシブ対応しているテーマではデフォルトでメディアクエリが設定されているため、例えば賢威でもしスマホ画面での表示内容を変えたいという場合には、この『mobile.css』や『design.css』内のコードに手を加えていけば良いわけです。

 

それではここから、スマホ・パソコン・タブレットごとに表示内容を変更するための、具体的なコードについて解説していきます。

 

画面サイズごとに表示内容を分岐させる方法

 

実際にCSSを画面サイズごとに分岐させるには、以下のようなコードを使用していくことになります。

 

コードについて解説すると、上からそれぞれ『パソコンのみ適応』『タブレットのみ適応』『スマホのみ適応』となっており、『ここにCSSを指定』という箇所に記載したコードが画面サイズごとに適応されるようになっているんですね。

 

また、『min』『max』の違いにも注目してみましょう。

上から順に、

  • パソコン(min-width: 980px):980px以上
  • タブレット(min-width: 768px) and (max-width: 979px):768px~979px
  • スマホ(max-width: 479px):479px以下

というように、それぞれの画面サイズに合わせて『min』『max』を使い分け、デバイスの画面サイズごとに表示内容を分岐するように設定しています。

 

そのため、パソコンのみ適応させたいCSSがあるという場合には、以下のコードで囲み、

 

タブレットのみ適応させたいCSSがあるという場合には、以下のコードで囲み、

 

そしてスマホのみ適応させたいCSSがあるという場合には、以下のコードで囲んでみましょう。

 

ちなみに参考までに、当サイトではSNSボタンの表示内容を、『design.css』内の以下のCSSコードで分岐しています。

 

ここでは、SNSボタンのリスト幅やフォントのサイズなどを、736px以下の画面サイズで表示された場合に分岐されるように設定しています。

 

このように、画面サイズごとに自由自在にブログデザインをカスタマイズすることができるので、ぜひともメディアクエリをどんどん活用していきましょう。

 

最後に

 

以上、WordPressのCSSを画面サイズによって条件分岐して表示させる方法について解説しました。

 

確認のため、今一度『パソコン』『タブレット』『スマホ』でCSSを条件分岐させるコードを記載しておきます。

 

ウェブサイトがレスポンシブ対応されているかどうかということは、単純にiPhoneなどのモバイルデバイスが普及したことの影響も大きく、実際にGoogleからもサイト評価の基準として提示されています。

モバイルフレンドリーで高品質なウェブサイトを作成していくためにも、ぜひとも今回ご紹介したメディアクエリを活用するようにしましょう。

 

MAIL MAGAZINE

 

 

     
公開日:2017/06/30 更新日:2017/07/06

コメントを残す

サブコンテンツ
FEATURED ARTICLE

TO THE TOP