WordPressのサイトをレスポンシブデザインにする方法
WordPress独自の方法があるようなタイトルですが…レスポンシブデザインは、WordPress専用の作り方が特別ある訳ではありません。
WordPressで作られたサイトでも、レスポンシブデザインにすることは難しくありません。
通常のサイトと同じ手順で簡単にレスポンシブデザインにすることができます！
スマホでのSEO対策を行うには、レスポンシブデザインは必須です。
ということで今回は、WordPressで作られたサイトに着目して、レスポンシブデザインを導入する方法をまとめていきたいと思います。
目次
WordPressの初期テンプレート
WordPressのテンプレートフォルダには、多くのファイルがありますが、今回は、こちらのファイルに絞って話を進めます。
1つのページをレスポンシブデザインにしたら後は、他のページも同じような作業を繰り返すだけです。
- index.php：トップページ
- header.php：ヘッダー
- style.css：スタイルシート
ビューポートを設定する
使用するファイル：index.php、header.php（header-index.php）
まず、レスポンシブデザインにするには、ヘッダーにビューポートを記述する必要があります。WordPressはヘッダーが共通ファイルとして別ファイルになっています。
ということは、これを記述してしまうと、レスポンシブデザインの用意ができていないうちに、スマホで見た時に、全てのページが変わってしまいます。
なので、レスポンシブデザインにする時は、まずひとつのページから導入するようにします。
例えば、トップページを最初にレスポンシブデザインにする場合は、ヘッダーにトップページ専用のヘッダーテンプレート「header-index.php」を読み込ませます。
header-index.phpを別途用意して、head内にこちらを記述します。
<meta name="viewport" content="width=device-width">
そして、index.phpの、
<?php get_header(); ?>
を下記のように書き換えます。
<?php get_header('index'); ?>
すると、トップページだけスマホで見た時の見え方が変わっているはずです。
ビューポートとは、表示領域の設定のことで、スマホでこれを設定していないと、デフォルトの980pxでPCサイトが縮小されて表示されます。
ここでは、トップページで話を進めていますが、レスポンシブデザインにする時、アクセスが多いサイトの場合は、テストページなどを用意して作業するようにしましょう。
メディアクエリの設定
使用するファイル：style.css
次に、cssにメディアクエリを記述して、PCとその他のデバイス用に振り分ける設定をします。
メディアクエリは、style.cssに記述します。
/* pc */
@media screen and (min-width: 961px) {
/*ここにpc用スタイルを記述*/
}
/* tablet */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
}
/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}
ここでは横幅が、961px以上の場合（PC）、641px以上960px以下の場合（タブレット）、640px以下の場合（スマホ）とデバイスをそれぞれ振り分けています。
先ほども言いましたが、ビューポートを設定するとスマホでの見え方が変わります。ということは、ビューポートを設定していなければ、メディアクエリでデバイス毎にcssを振り分けて、スタイルを記述しても、反映されることはありません。
レスポンシブデザインにする時は、必ずビューポートを設定してからメディアクエリでcssを振り分けて調整します。
ビューポートと、メディアクエリの詳しい設定方法はこちらをご覧ください。
レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編
それぞれのデバイスに合うように調整する
使用するファイル：style.css
あとは各デバイスや、レスポンシブデザインをチェックできるサイトなどで確認しながらcssを調整していきます。
横スクロールが出るようでしたら、画像サイズの可変設定や、cssの横幅などの設定を確認してみてください。
カラムの調整
2カラム、3カラムのサイトは見やすいカラムにする必要があります。
これは、下記のように、PCではfloatで回り込ませていたcssを他のデバイスの時には、noneにするだけです。
横幅を指定していたら、autoや100%に設定しましょう。
/* pc */
@media screen and (min-width: 641px) {
#main {width:700px; float:left;}
}
/* smartPhone */
@media screen and (max-width: 640px) {
#main {width:auto; float:none;}
}
画像を可変にする
画像の横幅をデバイスの横幅を超えないように、下記cssを記述します。
/* smartPhone */
@media screen and (max-width: 640px) {
img {max-width:100%;}
}
レスポンシブデザインにする際のよく使う項目については、こちらをご覧ください。
レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編
WordPressをレスポンシブにするまとめ
このように、WordPressで構築されたサイトでも、レスポンシブデザインにすることは難しくありません。
対応するページも全て対応しなければいけない訳でもありませんので、ユーザーの使いやすいサイトを目指して、必要に応じてレスポンシブデザインを取り入れましょう。
※作業は、必ずバックアップをとって作業するようにしてください。
また、こちらの「簡単！レスポンシブデザインの作り方のすべて」の記事もご参考ください。
