WordPress

WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

apple 490485 1920 - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

突然ですが、あなたが運営しているサイトは、スマホに対応しているでしょうか?

スマホに対応したサイトにすることで、より多くの人が見てくれる可能性も高くなります。

そこで今回は、WordPressでレスポンシブデザインにする方法についてお伝えします。

WordPressをレスポンシブ対応にするCSSの書き方

internet 594148 640 - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

それでは早速WordpressでのレスポンシブCSSの書き方や、Wordpressをレスポンシブに対応させるための設定方法についてお伝えします。

まず結論ですが、レスポンシブ対応させる場合は、メディアクエリを使っていくようになります。

メディアクエリとは、表示された画面環境に応じて適用するスタイルを切り替える機能。(IT用語辞典 e-Wordsより)

簡単に言うと、「スマホやタブレットなどにレスポンシブ対応させるための機能」になります。

このメディアクエリはHTMLとCSSだけで制御していくことになりますので、実装するのは難しくはありません。

実際にレスポンシブ対応する時にやるべきこととしては、以下の2つです。

  1. viewportを設定する
  2. CSSでメディアクエリを指定する

① viewportを設定する

まず、レスポンシブを導入する際にviewportとメディアクエリの設定を行います。Viewportは、アクセスしているデバイスの横幅を取得します。

取得した値に応じて、パソコンやタブレット、スマホのそれぞれに対応したCSSで画面に出力します。

デバイスの横幅を取得するためには、以下のviewportをHTMLのヘッダー部分に設置します。(横幅を「ブレイクポイント」と呼ぶこともあります。)

それぞれの意味は次のようになります。

  • width=device-width:端末画面の幅に合わせる
  • initial-scale:初期のズーム倍率
  • minimum-scale:最小倍率
  • maximum-scale:最大倍率
  • user-scalable:ズームの操作(yes or no)

contentの最初に書いてある「width=device-width」は、レスポンシブ対応させる際には必須項目になりますので、忘れずに記述しておきましょう。

② メディアクエリでCSSを指定する

viewportで取得した横幅に応じて使用するCSSを指定します。

横幅の数値は任意なので、様々なデバイスがあり、悩むこともあるかもしれませんが、おおよその目安としては以下のようになります。

  • パソコン:横幅769px以上
  • タブレット(android):横幅768px
  • スマホ(android):横幅640px

OSによって横幅は異なってきますので、実際の画面を見ながら試してみると良いです。

具体的には、CSSに以下のように記述します。

プラグインを使ってレスポンシブ対応させる方法

graphic design studio 1563080 640 - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

続いて、直接コードを書くのではなく、プラグインを使うことで対応することも可能です。プラグインによっては、自動的にスマホやタブレット向けのページを生成してくれます。

プラグインの場合、インストールして有効化するだけで、すぐにスマホやタブレット向けのページを生成してくれます。

なので、プログラミングができない方であっても、最低限使う分には難しい設定はほとんどありません。そこで今回は、レスポンシブ対応できるプラグインを5つ紹介します。

① WPtouch Mobile Plugin

WPtouch Mobile Pluginは、スマホ向けのサイトを自動生成してくれるプラグインの中でも特に人気があります。

設定で「Japanese」を選択さえすれば、管理画面が日本語表記になります。

このプラグインは「WPtouch」の無料版のプラグインなので、使用できる機能は限定されています。

ですが、バージョンアップされたことによってデザインは非常に洗練されるようになってきました。

② WordPress Mobile Pack

WordPress Mobile Packは、モバイルアプリのようなきれいなデザインとUIに変えることができます。色やフォントの設定も細かくできるので、自由にデザインを変更することができます。

また、簡易的ではありますが、アクセス解析機能も付いています。そのため、Webサイトを閲覧しているユーザーの中に「どれだけスマホなどのモバイルユーザーがいるのか」ということも知ることができます。

③ MobilePress

MobilePressは、スマホ向けのサイトを自動生成してくれます。このプラグインも無料版なので機能は限定されていますが、専用テンプレートのカスタマイズもできます。

④ Any Mobile Theme Switcher

Any Mobile Theme Switcherは、ユーザーが使用している端末に合わせてテーマを自動的に切り替えてくれます。

機種ごとにテーマを細かく設定できるので、端末に合わせて最適化することができます。

⑤ WordPress PDA & iPhone

WordPress PDA & iPhoneは、iPhoneやタブレット端末向けのサイトを自動生成してくれます。難しい設定は一切なく、インストールすればすぐに利用することができます。

このプラグインは英語表記になっていますが、デフォルトの専用テンプレートがシンプルで洗練されたデザインになっています。

レスポンシブ対応のWordpressおすすめテーマ

chicks 1176197 640 - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

ここでは、レスポンシブに対応したWordPressのテーマを5つ紹介します。

最初からレスポンシブに対応しているので、レスポンシブに対応したWebサイト構築する手間を減らすことができます。

今回は、レスポンシブに対応していて日本語にも対応しているWordPressのテーマを紹介します。

Simplicity2

simplicity - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

https://wp-simplicity.com/

Simplicityは、内部SEP対策も住んでいるシンプルなデザインの無料で使えるWordPressのテーマです。

テーマのカスタマイズ機能が豊富で様々なレイアウトを実装することができるようになっています。アップデートも頻繁に行われているので、最新のWeb技術やデザインのトレンドも取り入れています。

STINGER

stinger - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

http://wp-fun.com/

STINGERは、GoogleアドセンスやAmazonアソシエイトを簡単に埋め込めるように設計されたWordPressのテーマです。

カスタマイズで配色も細かく設定することができるので、このテーマを使っている方も多いです。

Xeory Base

xeory base - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

https://xeory.jp/template/xeory-base/

Xeory Baseは、Webマーケティングのメディアで有名な「バズ部」から提供されているWordPressのテーマです。

そのため、バズ部を運用しているノウハウをもとにして作成されていて、SEO対策もしっかりとされています。

「Xeory」には、ブログ型テーマの「Xeory Base」と企業向けのサイト型テーマの「Xeory Extension」の2種類があります。このサイトでも「Xeory Base」が使われています。

Graphy

graphy - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

http://themegraphy.com/ja/wordpress-themes/graphy/

Graphyは、タイポグラフィーの美しさにこだわって作成されたWordPressのテーマです。

タイポグラフィーとは、活字を用いる印刷技術や活字書体のデザインやその選択・配列などのデザイン表現全般を意味しています。(コトバンクより)

スマートフォンやタブレットでの表示も最適化されているので、美しさが損なわれることはありません。シンプルなテーマですが、洗練された印象を与えています。

Emanon

emanon free - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

https://wp-emanon.jp/0 - WordPressでレスポンシブデザインにする方法!CSS編集やおすすめのテーマまとめ

Emanonは、内部SEO対策が施されているWordPressのテーマです。

Google Adsenseなどの広告をサイドバーや記事に表示できる「広告設定機能」や、SNSでシェアされたときにアイキャッチ画像を表示する「SNS用OPG設定機能」などこのテーマ独自のカスタマイズメニューが多く用意されています。

このテーマでは無料版も用意されていますが、きちんと対応するのであれば有料版のEmanonがおすすめです。

WordPressのレスポンシブ対応に関するまとめ

以上、いかがでしたか?

今回はWordPressのレスポンシブ対応についてお伝えしてきました。

CSSを自分でいじっていくのは不安な方やプラグインのアップデートなどに不安がある方は、すでにレスポンシブに対応した有料テーマ(Emanonなど)を使うのも一手です。

それだけでもスマホやタブレットでも見やすくなるので、アクセスが自然と集まるようになるでしょう。最後まで読んでいただき、ありがとうございました。