WordPressでのレスポンシブデザインの作り方！おすすめテーマやCSS編集方法も解説

2025年3月1日

本ページはプロモーション（広告）が含まれています。

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

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

今回は、WordPressでレスポンシブデザインにするメリットやデメリットから、具体的なやり方、レスポンシブデザインにおすすめのテーマやプラグインなどについて初心者にもわかりやすくお伝えします。

高速化技術を採用したシンレンタルサーバー

IMG 6864 - WordPressでのレスポンシブデザインの作り方！おすすめテーマやCSS編集方法も解説 — 画像出典：シンレンタルサーバー

ブログの表示速度にこだわるなら、シンレンタルサーバーがおすすめです。

高速化技術を導入し、他社に比べてサイト表示速度がはやいレンタルサーバーとして人気があります。

2025年3月5日(水)までの期間限定で「利用料金最大50%オフキャンペーン」を実施中で、月額539円から始められます。

ハイスペックでコスパのいいレンタルサーバーでブログを運営するなら、シンレンタルサーバーを選びましょう。

＼初期費用無料！永久無料の独自ドメイン付き／

シンレンタルサーバー

※2025年3月時点の情報

レスポンシブとは？

レスポンシブとは、パソコンやタブレット、スマホなどの複数の異なる画面サイズでも、外観や操作方法を最適化したWebサイトを制作するためのWebデザインの手法です。

レスポンシブとは、サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページのレンダリングを変える設定方法です。すべてのGooglebotユーザーエージェントがページとそのアセット(CSS、JavaScript、画像)をクロールできる状態であれば、Googleのアルゴリズムによってこの設定が自動的に検出されます。
引用：Google Developers

Google検索エンジンは、3種類のモバイルサイトを認識しています。

レスポンシブデザイン
PHPなどで作られ、実際のHTMLは存在していない動的な配信
PC向けのHTMLとモバイル向けのHTMLを別々に用意してURLが分けられている状態

Googleでは、レスポンシブデザインの使用を推奨されています。

レスポンシブデザインの場合は、どのデバイスに対しても同じURL、HTML、CSSを使用するため表示エラーが起こりにくいです。

ユーザビリティが向上し、Google検索エンジンのクローラーの巡回の手間が少なくなります。

Googleはレスポンシブデザインの使用を推奨しているため、対応できるようにしておきましょう。

レスポンシブ対応をするメリット3つ

レスポンシブ対応をするメリットは、以下の3つです。

デザインが表示端末に合った大きさに変えられる
1つのソースで管理できる
SEOに有利

サイトを閲覧するユーザーのほとんどは、PCよりもスマホを使用しているのが現状です。

ユーザーが見やすいサイトを目指すなら、レスポンシブ対応は習得しておきましょう。

デザインが表示端末に合った大きさに変えられる

レスポンシブ対応をすると、デザインが表示端末に合った大きさに変えられます。

最近は、以下のような閲覧デバイスが増えてきました。

パソコン
スマホ
タブレット

実際のところ、本記事をスマホで読んでいるという人も多いのではないでしょうか。

レスポンシブ対応させると、各デバイスで見やすいように表示してくれます。

レスポンシブは端末の画面サイズに依存しないため、今後新たに登場する端末に対しても対応ができます。

1つのソースで管理できる

1つのソースで管理できるのは、レスポンシブ対応のメリットの1つです。

レスポンシブを導入することによって、PCサイトとスマホサイトでHTMLが別構築されていません。

サイトのメンテナンス工数を削減することができ、1つのHTMLを更新するだけでどのデバイスでも同じ状態になります。

ミスが少なくなり、修正も簡単にできるようになるのが特徴です。

SEOに有利

レスポンシブ対応するメリットは、SEOに有利な点です。

検索エンジンによる被リンク数の評価は、検索順位に影響を及ぼします。

仮にデバイスごとにWebページを用意してしまうと、ページごとに評価される現象が発生してしまいます。

デバイス別にWebページを分けることで、検索エンジンによる被リンク数の評価がマイナスに。

一方、レスポンシブにすることによって、1つのファイルで複数のデバイスに対応が可能です。

デバイスごとにページを用意する場合に比べ、被リンクの分散を防げます。

プログラミングやWebデザインを学ぶと、自分でレスポンシブの設定ができるようになります。

コーディングできれば、Webサイトのデザインの幅を広げられるのがメリットです。

レスポンシブ対応をするデメリット2つ

レスポンシブ対応をするデメリットは、以下のとおりです。

CSSのデザインが複雑
Webサイトが重くなることがある

レスポンシブ対応にはCSSなどの知識が必要なため、初心者には少し難しいという欠点があります。

他にもレスポンシブ対応によってWebサイトが重くなり、ユーザーの離脱に繋がる恐れも。

ただしレスポンシブ対応はさまざまなデバイスで見やすくする施策であるため、サイトの容量削減などの工夫をしてデメリットを解消していきましょう。

CSSのデザインが複雑

レスポンシブ対応のデメリットは、CSSのデザインが複雑な点です。

レスポンシブは、自動で複数の端末に対応できます。

しかし、デザインを考える際には、デバイスごとの特徴を考慮しなければなりません。

複数の端末に対応してくれますが、縦向きと横向きのそれぞれの向きでデザインが崩れないように考えるのが必要です。

対応させる端末ごとにデザインを用意するとHTMLのコーディングが複雑になり、チェックが必要になります。

CSSのデザインが複雑になり、初心者には構築に時間がかかってしまいます。

Webサイトが重くなることがある

Webサイトが重くなることがあるのも、レスポンシブ対応のデメリットです。

レスポンシブでは、ページを表示する際に見えていないタグの部分も読み込まれます。

例えば、横幅1200pxの場合は画像を表示するが、横幅480pxの場合は画像を表示しないというようにHTMLを構築したケースです。

仮に、480pxで画像を表示しないようになっていたとしても、一度そのタグを読み込もうとします。

サイズが大きい画像をサイト上で使用する場合、スマホサイト上では表示速度が落ちてしまい、動作が重くなってしまいます。

レスポンシブデザインにはデメリットもありますが、多くの人がスマホでインターネットのサイトを閲覧する機会は、今後も増えていくことは間違いありません。

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

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

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

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

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

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

① viewportを設定する

レスポンシブを導入する際に、viewportとメディアクエリの設定を実施。

Viewportは、アクセスしているデバイスの横幅を取得します。

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

各単語の意味は、次のとおり。

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に以下のように記述します。

/* pc */
@media screen and (min-width: 769px) {
/*ここにpc用スタイルを記述*/
}

/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
}

/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}

以上が、基本的なレスポンシブデザインのためのコードです。

「難しい…」と感じた人は、最初からレスポンシブデザイン対応しているワードプレスの有料テーマを利用するのをおすすめします。