レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ
WordPress Theme Gush2 はレスポンシブデザインとなっており、CSSの記述が通常のものとは多少異なるため、はじめてレスポンシブデザインのテーマをさわる方のために基本的な部分を解説します。
この記事の目次
レスポンシブWebデザインとは
従来の手法では、PCと携帯・スマホのそれぞれに専用のURLやファイルを用意することで最適化を図っていましたが、レスポンシブデザインはひとつのHTMLファイル・ひとつのCSSで各端末に適した表示を行うことができます。
いまPCでご覧いただいているなら、ウィンドウの幅を変えてみてください。レイアウトが変化しますね。
このように、単一のファイルでウィンドウ（画面）幅によってレイアウトが変わるものがレスポンシブWebデザイン（以下、RWD）と呼ばれています。
※詳細な定義は省略しています
ブレイクポイントとは
ウィンドウ（画面）幅によってレイアウトが変わりますが、その幅は運営者が任意に指定できます。
スマホやタブレットだけで考えても機種によってサイズは変わるため、そのすべてに正確に対応することは難しいですよね。そこで、レスポンシブWebデザインの多くはアバウトに2～4段階で幅を指定してレイアウトを変更しています。
どの幅でどのようなレイアウトにするか、という指定を「ブレイクポイント」と呼びます。
Gush2 では、次の3段階でブレイクポイントを指定しています。
- 768px 以下（主にスマホ用）
- 768px ～ 1024px（主にタブレット用）
- 1024px 以上（主にPC用）
Gush2のCSSと条件分岐タグ
基本的なCSSカスタマイズ方法
style.css をご覧いただくとわかりますが、大きく3つのブロックにわかれています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@charset "utf-8"; /* Theme Name: Gush2 Theme URI: http://wp-gush.com/ Description: レスポンシブデザイン無料テーマ Version: 1.0.0 Author: Ellora Author URI: http://naifix.com/ */ /* ここにスマホ・タブレット・PCの記述 */ @media screen and (min-width : 768px){ /* ここにタブレット・PCの記述 */ } @media screen and (min-width : 1024px) { /* ここにPCの記述 */ } |
たとえばこんな風に記述すると、サイズによって背景色が変わります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { background-color: #fff; } @media screen and (min-width : 768px){ body { background-color: #ccc; } } @media screen and (min-width : 1024px) { body { background-color: #000; } } |
スマホのときは背景色が白く、タブレットはグレー、PCでは黒になります。
どのサイズでも背景色を白にしたいのであれば、わざわざ複数記述する必要はありません。
|
1 2 3 |
body { background-color: #fff; } |
これだけでOKです。
スマホ用の記述はどのサイズにも通用する基本的な設定で、タブレットやPCで見たときは設定が上書きされるイメージですね。
※@media screen の使い方によって、記述方法は若干異なります
style.css には、「ここからタブレット表示設定」「ここからPC表示設定」とコメントを入れてありますので、それぞれ自由にカスタマイズしてみてください。
RWDでは補いきれない部分を分岐
RWDは慣れてしまえば簡単にカスタマイズできますが、ただレイアウトを変えるだけでは対応しきれない点もたくさんあります。
たとえば、スマホでは広告を表示したくないけど、PCでは表示したい場合。多少慣れている方であれば、display:none を使うことになると思います。
ただ、これを多用することはあまり好ましくありません。検索エンジンからはスパムとみなされるかもしれませんし、ただ表示されないだけでコード自体は読み込まれているからです。
広告部分に #ad というIDをつけていると仮定して、display:none を使うとこのようになります。
|
1 2 3 4 5 6 7 8 9 10 11 |
#ad { display: none; } @media screen and (min-width : 1024px) { #ad { display: block; } } |
この場合、スマホやタブレットで広告は非表示となりますが、実際にソースを確認してみるとコードが吐き出されているのが確認できると思います。それをCSSで見えないようにしているだけです。
もしこれが容量の大きな画像であれば、実際に読み込んだあと隠しているだけになりますから、それだけ表示速度に影響します。
ということは、広告コード自体を出力しないようにするのが最適です。このため、Gush2 ではところどころに条件分岐タグを使用して出力を制御しています。
スマホで出力していない部分
下記のコードを使えば、スマホとタブレット＆PCで表示・非表示を切り替えることができます。
|
1 2 3 4 5 |
<?php if(is_mobile()) { ?> スマホで出力したいもの <?php } else { ?> タブレット・PCで出力したいもの <?php } ?> |
>> 【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！
例として、footer.php に記述してある「TOPに戻る」ボタンはスマホで出力しないように振り分けています。
|
1 2 3 4 5 6 7 |
<!-- ページトップへ スマホ非表示 --> <?php if(is_mobile()) { ?> <?php } else { ?> <div id="page-top"><a href="#header"><i class="fa fa-arrow-up"></i> </a></div> <?php } ?> <!-- //ページトップへ--> |
また、フッターのウィジェットエリアもスマホで非表示となっており、かわりに「TOP」と「HOME」アイコンが固定されています。
|
1 2 3 4 5 6 |
<!--スマホ表示エリア--> <ul class="top-home"> <li><a href="#header"><i class="fa fa-arrow-up"></i><br />TOP</a></li> <li><a href="<?php echo home_url();?>"><i class="fa fa-home"></i><br />HOME</a></li> </ul> <!--//スマホ表示エリア--> |
さらに、投稿記事（single.php）の記事下広告はPCでレクタングル（中）が2つ並ぶよう設定していますが、スマホでは縦に広告が並んで画面を占領しないよう、右側の広告は出力されません。
ちなみに、スマホ＆タブレットとPCで分岐したい場合は、wp_is_mobile を使用してください。
|
1 2 3 4 5 |
<?php if(wp_is_mobile()): ?> スマホ・タブレットで出力したいもの <?php else: ?> PCで出力したいもの <?php endif; ?> |
さいごに
レスポンシブWebデザインは万能ではありませんが、ブログではCSSの切り替えやリダイレクトを行うことに比べると管理しやすいのではと思います。
まずはあちこち触ってみて、どこを変えるとどのように反映されるのか試してみてください。
不具合があれば、こちらよりご連絡ください。
2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
Ellora 
hiro 
raopi 
あき
こんにちは。
gush2もそろそろですね凄く楽しみにしています。
そこで今回は質問とご要望です！
素人的な質問で申し訳ないのですがレスポンシブタイプでフルサイズ表示に切り替えられるようにすることは不可能なのでしょうか！？
無料で配布している方々のテーマはどれもレスポンシブ対応なんだけどフルサイズに切り替える事が出来ないものしか見たことないので
もしかして不可能なのかなと思い質問と要望を兼ねてコメントさせて頂いています。
もしも可能であればフルサイズに切り替え可能であればそうして下さると凄く嬉しいです。
(jetpackモバイル見たいに）
全然構造を理解していない質問と要望かもしれませんが悪しからずです。
もう1つはPCの条件分岐を1040pxから例えば1260pxとかに変更することは可能なのでしょうか！？
例えば1040の解像度のPCだとスマホ用で表示されるようにするとかです。
全体的に分かりずらいかもしれませんがよろしくお願いします。