レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ

 

WordPress Theme Gush2 はレスポンシブデザインとなっており、CSSの記述が通常のものとは多少異なるため、はじめてレスポンシブデザインのテーマをさわる方のために基本的な部分を解説します。

レスポンシブWebデザインとは

従来の手法では、PCと携帯・スマホのそれぞれに専用のURLやファイルを用意することで最適化を図っていましたが、レスポンシブデザインはひとつのHTMLファイル・ひとつのCSSで各端末に適した表示を行うことができます。

いまPCでご覧いただいているなら、ウィンドウの幅を変えてみてください。レイアウトが変化しますね。

このように、単一のファイルでウィンドウ(画面)幅によってレイアウトが変わるものがレスポンシブWebデザイン(以下、RWD)と呼ばれています。

※詳細な定義は省略しています

ブレイクポイントとは

ウィンドウ(画面)幅によってレイアウトが変わりますが、その幅は運営者が任意に指定できます。

スマホやタブレットだけで考えても機種によってサイズは変わるため、そのすべてに正確に対応することは難しいですよね。そこで、レスポンシブWebデザインの多くはアバウトに2~4段階で幅を指定してレイアウトを変更しています。

どの幅でどのようなレイアウトにするか、という指定を「ブレイクポイント」と呼びます。

Gush2 では、次の3段階でブレイクポイントを指定しています。

  1. 768px 以下(主にスマホ用)
  2. 768px ~ 1024px(主にタブレット用)
  3. 1024px 以上(主にPC用)

Gush2のCSSと条件分岐タグ

基本的なCSSカスタマイズ方法

style.css をご覧いただくとわかりますが、大きく3つのブロックにわかれています。

たとえばこんな風に記述すると、サイズによって背景色が変わります。

スマホのときは背景色が白く、タブレットはグレー、PCでは黒になります。

どのサイズでも背景色を白にしたいのであれば、わざわざ複数記述する必要はありません。

これだけでOKです。

スマホ用の記述はどのサイズにも通用する基本的な設定で、タブレットやPCで見たときは設定が上書きされるイメージですね。

※@media screen の使い方によって、記述方法は若干異なります

style.css には、「ここからタブレット表示設定」「ここからPC表示設定」とコメントを入れてありますので、それぞれ自由にカスタマイズしてみてください。

RWDでは補いきれない部分を分岐

RWDは慣れてしまえば簡単にカスタマイズできますが、ただレイアウトを変えるだけでは対応しきれない点もたくさんあります。

たとえば、スマホでは広告を表示したくないけど、PCでは表示したい場合。多少慣れている方であれば、display:none を使うことになると思います。

ただ、これを多用することはあまり好ましくありません。検索エンジンからはスパムとみなされるかもしれませんし、ただ表示されないだけでコード自体は読み込まれているからです。

広告部分に #ad というIDをつけていると仮定して、display:none を使うとこのようになります。

この場合、スマホやタブレットで広告は非表示となりますが、実際にソースを確認してみるとコードが吐き出されているのが確認できると思います。それをCSSで見えないようにしているだけです。

もしこれが容量の大きな画像であれば、実際に読み込んだあと隠しているだけになりますから、それだけ表示速度に影響します。

ということは、広告コード自体を出力しないようにするのが最適です。このため、Gush2 ではところどころに条件分岐タグを使用して出力を制御しています。

スマホで出力していない部分

下記のコードを使えば、スマホとタブレット&PCで表示・非表示を切り替えることができます。

>> 【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!

例として、footer.php に記述してある「TOPに戻る」ボタンはスマホで出力しないように振り分けています。

また、フッターのウィジェットエリアもスマホで非表示となっており、かわりに「TOP」と「HOME」アイコンが固定されています。

さらに、投稿記事(single.php)の記事下広告はPCでレクタングル(中)が2つ並ぶよう設定していますが、スマホでは縦に広告が並んで画面を占領しないよう、右側の広告は出力されません。

ちなみに、スマホ&タブレットとPCで分岐したい場合は、wp_is_mobile を使用してください。

さいごに

レスポンシブWebデザインは万能ではありませんが、ブログではCSSの切り替えやリダイレクトを行うことに比べると管理しやすいのではと思います。

まずはあちこち触ってみて、どこを変えるとどのように反映されるのか試してみてください。

不具合があれば、こちらよりご連絡ください

2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. hiro より:

    こんにちは。
    gush2もそろそろですね凄く楽しみにしています。
    そこで今回は質問とご要望です!

    素人的な質問で申し訳ないのですがレスポンシブタイプでフルサイズ表示に切り替えられるようにすることは不可能なのでしょうか!?
    無料で配布している方々のテーマはどれもレスポンシブ対応なんだけどフルサイズに切り替える事が出来ないものしか見たことないので
    もしかして不可能なのかなと思い質問と要望を兼ねてコメントさせて頂いています。

    もしも可能であればフルサイズに切り替え可能であればそうして下さると凄く嬉しいです。
    (jetpackモバイル見たいに)
    全然構造を理解していない質問と要望かもしれませんが悪しからずです。

    もう1つはPCの条件分岐を1040pxから例えば1260pxとかに変更することは可能なのでしょうか!?
    例えば1040の解像度のPCだとスマホ用で表示されるようにするとかです。
    全体的に分かりずらいかもしれませんがよろしくお願いします。

    • Ellora より:

      レスポンシブWebデザインでも、スマホで閲覧したときにPC表示に切り替えることは可能です。実は今回のバージョンアップで実装しようか迷っていたのですが、ご要望をいただきましたので前向きに検討したいと思います。

      ブレイクポイントの指定はCSSで自由に行えますので、追記していただければ変更可能です。

  2. hiro より:

    敏速な回答本当にありがとございます。
    是非ともご負担にならなければPC表示可能にして下さい。
    レスポンシブは色々な面でも良いとは思いますが個人的にどうもカスタマも出来ないせいかしっくりしていないのが本音でした。(すみません)
    PC表示にしたくてぐぐっては見たもののそれらしき記事を見つけることが出来ず断念してる状態でした。

    条件分岐の件本当に助かりました。
    ありがとございました。
    ますますGush2楽しみになり寝不足になりそうです。

  3. hiro より:

    いつも楽しく拝見させて頂いています。
    gush2完成おめでとうございます!
    早速ダウンロードさせて頂きありがとございます。

    今日は少し勉強を兼ねて質問させて頂きたいと思います。
    前回の延長線上になるのですが
    もしレスポンシブを解除するにはどのソースを消せば良いのでしょうか?
    どの端末でアクセスしてもPC表示に出来るようにする方法。
    ほんとうに恐縮なのですが是非とも教えてください。

    • Ellora より:

      最も簡単な方法は、<head>のviewportを変更することです。

      変更前

      変更後

      ただ、PCから見たときはウィンドウの幅を変えるとレスポンシブデザインが反映されるので、これも無効化したいときはCSSの記述を変える必要があります。

      media screen の記述を削除してPC用に統一するというけっこう面倒な作業なので、スマホ・タブレットに通用するviewportの変更をお試しください。

      • hiro より:

        敏速なご回答に感謝感激です!
        早速試してみましたらバッチリやりたい事が出来ました。
        いつも本当にありがとございます。

  4. […] レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ […]

  5. しるび より:

    Gush2、とても愛用させて頂いております。

    1点質問があります。

    スマホ表示にてYoutubeなどの埋め込み動画が入った記事を表示すると動画横幅が自動調整されず困っております。

    どうにかして自動調整させる方法はありませんでしょうか?

    余談ですが、Gush2のテーマテンプレートにSearch.phpが搭載されていないので検索が機能しませんでした。
    別途Search.phpを作成することで機能するようになりました。

    • Ellora より:

      しるびさま

      Gush2をご利用いただきまして、まことにありがとうございます。

      動画に関しましては「見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル」内にあるように、.video-container で囲ってください。

      検索結果の表示は index.php を使用しており、デフォルトで装備されている検索フォームはテスト済みなのですが、ちょっと調べてみます。お手数おかけして申し訳ありません。

      今後ともよろしくお願いします^^

  6. しるび より:

    ご返信ありがとうございます。

    チェックしたはずだと思っていましたが見落としていました。
    お手数おかけいたしました。

  7. しるび より:

    再度ご質問よろしいでしょうか?

    既存の埋め込まれている動画に対して一括作用させる方法は無いでしょうか?

    と言うのも、Youtube埋め込みされている記事が軽く1000を超えるため全てを書き換えるのは現実的では無く、困っております。

    大変お手数ですがお時間あるときで構いませんのでご返答いただけると助かります。

  8. しるび より:

    度々申し訳ございません。
    こちらを参考に自己解決致しました。

    http://nelog.jp/wordpress-iframe-responsiv

    ご報告までに

  9. raopi より:

    たびたび申し訳ありません。
    横長の広告などを貼った場合、スマホ表示では、広告だけはみ出すのですが、何か一括で制御する方法。無ければ単体での記述を教えていただけないでしょうか?

    テーブルでも同様になります。

    お手数ですがよろしくお願いします。

    • Ellora より:

      Google AdSense であればレスポンシブデザイン用の広告コードを使うことで解決しますが、その他 ASP の広告を利用する場合は振り分け処理が必要になるかと思います。

      記事内に広告を貼るなら、DIV 要素などで囲って下記のように指定すると無理やり枠内に収められるかもしれません。

  10. あき より:

    たすかりましたありがとうごさいます

  11. […] をご覧ください。 基本的なCSSカスタマイズ方法|レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ|Gush2説明書 […]

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。