どうもWEBエンジニアのがむしゃらワーカーしゅう丸(@shumarukiti)です！
この記事では、
という疑問にお答えします。
結論ですがWordPressで作られたサイトをレスポンシブ対応にすることは簡単です。
SEOや、スマホの普及率からもレスポンシブ対応は必須なので、この記事ではWordPressで作られたサイトをレスポンシブ対応にする方法について解説します。
ちなみにこの記事を書いている僕は、未経験から独学でプログラミングを勉強しまして、WEBエンジニアとして転職して今ではWordPressでのサイト制作を軸としたフリーランスエンジニアとして活動しています。そんな僕がWordPressで出来たサイトをレスポンシブ対応にする方法について語ります。
〜本記事の内容〜
- WordPressをレスポンシブ化する4ステップ
- プラグインでWordPressをレスポンシブ対応する方法
WordPressをレスポンシブ化する4ステップ
WordPressをレスポンシブ化する4ステップは下記の通り。
- ステップ1. 修正するテンプレートをダウンロード
- ステップ2. ビューポートを設定する
- ステップ3. メディアクエリを設定する
- ステップ4. 必要デバイスでサイズ調整する
ステップ1. 修正するテンプレートをダウンロード
WordPressのテンプレートは数多くありますが、今回は必要最低限WordPressをレスポンシブ化するためのテンプレートは以下の通り。
最低限このテンプレートさえあればレスポンシブ化の準備はOK。
あとは必要に応じて、それぞれ必要なテンプレートをダウンロードしてください。
ちなみにWordPressのテンプレートもあやふやだなという方は、こちらのWordPress初心者向け書籍はこの1冊しか有り得ない【断言します】を読んでみてください。
ステップ2. ビューポートを設定する
レスポンシブ化するにはまずheader.phpにビューポートを設定する必要があります。
タグの中に上記の記述を加えるだけでビューポートの設定はOK。
ちなみにそれぞれのコードの意味は以下の通りです。
- width=device-width：端末画面の幅に合わせる設定
- initial-scale：はじめのズーム倍率
- minimum-scale：最小の倍率
- maximum-scale：最大の倍率
- user-scalable：ズームの操作指示
全てを記述する必要がありませんが、「width=device-width」はレスポンシブ対応するには必須項目なので必ず書くようにしましょう。その他の記述は必要に応じて書いてください。
ステップ3. メディアクエリを設定する
次にビューポートで所得した横幅に応じて使用するCSSを指定します。
PC、タブレット、スマホごとにデザインを設定して違和感がないように仕上げていきます。
ちなみにぶっちゃけ全デバイス毎にメディアクエリを設定するのは無理です。ここらへんは必要に応じて、またクライアントさんと相談しながら決めればOKです。
ちなみに下記の3デバイスを設定しておけば問題ありません。
- PC：横幅769px以上
- タブレット：横幅768px〜640px
- スマホ：横幅640px以下
このメディアクエリの設定は下記のコードです。
PCはそのままCSSに記述して、タブレット、スマホだけ上記の様に分けるのが普通です。
ちなみにビューポートを設定していなければ、このメディアクエリは反映されないので必ずメディアクエリは設定しておいてください。
ステップ4. 必要デバイスでサイズ調整する
ここまででとりあえずの設定は終わりです。
後はタブレット、スマホサイズに応じてそれぞれのメディアクエリ内にCSSを書いていきます。
例えばですが上記のように「.main」クラスがついた要素の大きさをデバイス毎に変えていきます。
こんな感じでそれぞれのデバイスサイズにあうように設定していけばOKです。
以上でWordPressのレスポンシブ化の方法は終わりですが、やっぱりわからないという方はお問い合わせよりご連絡いただければ相談に乗ります。
またプラグインで設定する方法もあるので、ここからプラグインでWordPressサイトをレスポンシブ対応する方法について説明します。
プラグインでWordPressをレスポンシブ対応する方法
コードを書ける人はここまで説明してきた内容でレスポンシブ化すればいいですが、コードが書けない人はプラグインでWordPress化する方法もあります。
プラグインの場合はインストールして、有効化するだけでOKなのでかなり手っ取り早いです。とはいえ注意点もありまして、思った様にレスポンシブ化できなかったり、phpのバージョンの不具合でサイト自体がエラーを起こしたりします。
その1. WordPress Mobile Pack
モバイル端末用のテーマをユーザーの閲覧環境に合わせて表示します。管理画面でできるカスタマイズの幅が広いので、使いやすいプラグインです。簡易的なアクセス解析機能もついています。
このプラグインはスマホ端末用のテーマを環境に合わせて表示してくれるので、きれいなUIとデザインで表示させることができます。また管理画面でできるカスタマイズの幅が広いのも特徴です。
その2. Any Mobile Theme Switcher
このプラグインの特徴はユーザーが使用している端末に合わせてテーマを切り替えてくれるところです。機種毎に切り替えてくれるので幅が広く使い勝手がいいです。
その3. WP Mobile Edition
ユーザーが使用している端末を自動的に判定し、モバイルテーマを表示してくれます。
またこのプラグインの嬉しいのはページを軽量化して、ファイルのサイズを小さくしてくれるところです。また各テーマの色、フォントは管理画面から簡単にカスタマイズ可能です。
その4. MobilePress
スマホ端末で見たときに、フレキシブルなテーマに切り替えてくれます。
また初心者向けに質問が充実しているので、迷ったら質問できる点もコードが書けない人にとっては嬉しいです。
その5. JETPACK
自動でレスポンシブ化してくれるだけでなく、カルーセル設定、パフォーマンス向上など20以上の機能を利用できるプラグインです。
WordPressのレスポンシブ化は必須
以上ですが、WordPressのレスポンシブ化はSEO的な面とスマホ普及率の高さからも必須です。
コードが書けない人は、プラグインを入れて自動でレスポンシブ化する方法もありますが、万が一不具合が出た時に対処できないのでおすすめしません。
その場合はこちらのお問い合わせからご連絡いただければと思います。
コメント