WordPressのオリジナルテーマでレスポンシブデザインを作りたいと思われる方も多いでしょう。
今の時代、iPhoneやAndroidなどスマホ向けのページは必須になってきていますよね。PC向けとスマホ向けで別ページを用意するという選択肢もありますが、WordPressで管理するのであればレスポンシブデザインがおすすめです。
レスポンシブデザインはルールさえ分かってしまえばそれほど難しいことはありません。
また、画面の大きさごとのデザイン（見え方）をたくさん用意するのは大変ですが、PC用、スマホ用、もう少し細かく作りこみたい場合はタブレット用と多くても3種類ぐらいにしておくと手間もそれほどかかりません。
本記事ではPC用とスマホ用の2種類をレスポンシブデザインで作っていきます。タブレット用やスマホ用の中でさらに画面サイズごとに細かく分けたい場合は、PC用とスマホ用を作った知識で応用できますので、必要な方はチャレンジしてみてください。
- WordPressのオリジナルテーマを3時間で作成する手順
- WordPressのオリジナルテーマ（記事ページ／固定ページ）を作る
- WordPressのオリジナルテーマ（スマホ用レスポンシブ）を作る ← 今ココ
レスポンシブのページを作る（考え方）
レスポンシブデザインを作るときに編集するのはCSSファイルのみです。画面サイズによる表示の切替をCSSで制御します。
CSSファイルに「画面幅が○○未満だったらこっちの指定を使ってね。それを超えるサイズだったらこっちの指定を使ってね」と書いておくとレスポンシブ対応になります。
ですので、前章や前々章で作ったWordPressのindex.phpやsingle.phpなどのPHPファイルは原則として編集する必要はありません。デザインが特殊な場合はそうとも限りませんが、ややこしくなるので「とりあえず編集しなくてよい」と思ってもらって構いません。これで少し気が楽になりましたよね！よね…？
レスポンシブのページを作る（実際の作業）
レスポンシブのページを作る際に必要な作業は以下の3つです。
- ビューポート（viewport）を宣言する（header.php）
- 画面サイズごとに定義したいCSSファイルを作る（style.css）
- メディアクエリを設定する（style.css）
なんか聞きなれない言葉が出てきたので寝る…ではなくて、意味を知るととてもシンプルですので続けて頑張って読んでくださいね！
それぞれの内容を解説します。
1. ビューポート（viewport）を宣言する
ビューポートはPCサイトのみを作成しているときには使用する機会がなかったと思います。
これは画面サイズに応じてページの表示領域を調整してくださいねという意味です。
これは何も考える必要はありません。次の一行を<head>～</head>に追記するだけです。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
はい、ステップ1完了です。
2. 画面サイズごとに定義したいCSSファイルを作る
画面サイズ（デバイス）ごとにCSSファイルを準備します。
これは作成する人の好みにもよりますが、一般的には2つのやり方があります。
1つ目は、通常の見え方を定義するCSSを「style.css」とし、スマホ用を「smartphone.css」、タブレット用を「tablet.css」のようにそれぞれで分けて準備する方法です。このメリットはそれぞれのCSSがどのデバイス向けに定義しているのかが分かりやすいということがあります。
もう1つのやり方は、これまでのWordPressで使用している「style.css」に全部まとめて書いてしまう方法です。これだとCSSファイルを新たに増やす必要はないので管理が楽です。ただし、style.cssに記述する量は増えますので、修正する際に該当箇所を探すのが少し大変になります。
ちなみに私は後者の「まとめて書く派」です。ですので、CSSファイルを増やす必要もないので、これにてステップ2も完了です！笑
個別に記述したい場合は前者のようにCSSファイルをデバイスごとに用意してくださいね。
3. メディアクエリを設定する
なんとあっという間にステップ3です！
ここでようやくレスポンシブのページを作るために必要な作業をしていきます。コツさえ掴んでしまえば、それほどややこしい話ではないと思いますので、ぜひトライしてみてくださいね。
ここではメディアクエリについて解説します。
メディアクエリを設定するというのは、簡単にまとめるとこの画面サイズだったらこの要素はこの大きさねみたいなことをCSSにひたすら書いていく作業です。
「画面サイズが○○○px以下なら」という定義は↓こんなコードでくくります。
@media screen and (max-width:○○○px){ }
逆のパターン、「画面サイズが●●●px以上なら」というときは↓こちら。
@media screen and (min-width:●●●px){ }
なんともそのまま！
これらをスマホ用、PC用、共通で使うので特に指定なし、など色々と自分の分け方で定義していきます。
例えば、私と同じように後者パターン採用の場合「style.css」はこんな感じに記載します。
スマホ用とPC用で分けれたら十分という方は以下のように640pxを基準にするだけでOKです。
/****************************************
共通テーマ
****************************************/
/* ここに共通で使用する要素を定義 */
/****************************************
スマホ用
****************************************/
@media screen and (max-width:640px){
/* ここにスマホで使用する要素を定義 */
}
/****************************************
PC用
****************************************/
@media screen and (min-width: 641px){
/* ここにPCで使用する要素を定義 */
}
スマホ用、PC用と書いていますが、その中にはそれぞれ同じ要素名が入るのはお分かりになりますか？
例えば、#box という要素があった場合「スマホ用では幅200px、PC用では幅500pxで表示したいな」と思ったら、上記のスマホ用の部分に「#boxは幅200pxだよ」という記述を、上記のPC用の部分に「#boxは幅500pxだよ」を書きます。どちらかの画面サイズで定義すれば、そうでない側のサイズもきちんと書いてあげる必要があるということです。
「スマホでもPCでも#boxは幅100pxでいいや」という場合は「@media screen～」を宣言していない上記の「共通テーマ」の箇所に書くだけでOKです。
最後に
ようやく…
ようやくです…感無量
WordPressのオリジナルテーマ作成に必要なことは書ききったよ！（と本人は思っている）
でもまだまだチューニングするところはあるんだなぁ…
また少しずつ書いていこうと思います。
- WordPressのオリジナルテーマを3時間で作成する手順
- WordPressのオリジナルテーマ（記事ページ／固定ページ）を作る
- WordPressのオリジナルテーマ（スマホ用レスポンシブ）を作る ← 今ココ
第三章までご清聴ありがとうございました！
ジムで使えるLINEスタンプです