WordPress 7.1でレスポンシブデザインが大きく進化！スマホ・タブレット向けのデザイン調整が簡単に

WordPress 7.1では、ブロックエディターのレスポンシブデザイン機能が大きく強化されました。

これまでWordPressで「パソコンでは文字を大きく、スマートフォンでは小さくする」「スマホだけ余白を狭くする」といった調整を行う場合、テーマ側のCSSや追加CSSを使うことが少なくありませんでした。

WordPress 7.1では、新しく「Responsive Style States（レスポンシブ・スタイル・ステート）」という仕組みが導入され、ブロックごとに「タブレット」「モバイル」向けのデザインを設定できるようになりました。

この記事では、WordPress 7.1で何が変わったのかを、できるだけ専門用語を避けながら紹介します。

公式情報

• WordPress 7.1 “メアリー・ルー” – WordPress.org 日本語
• Responsive block styles and configurable viewports in WordPress 7.1 – Make WordPress Core（英語）

WordPress 7.1では何が変わった？

まず大きなポイントは、WordPress自身が、「通常のデザイン」「タブレット向けのデザイン」「スマートフォン向けのデザイン」を区別して管理できるようになったことです。

例えば、見出しの文字サイズを次のように設定できます。

• 通常：40px
• タブレット：32px
• モバイル：24px

これまでもCSSを書けば同じことはできました。しかしWordPress 7.1では、これをブロックエディターのデザイン設定として扱えるようになっています。

つまり、「レスポンシブデザイン＝テーマやCSSだけで行うもの」という従来の考え方から、「WordPressのブロック設定としてレスポンシブデザインを管理する」方向へ一歩進んだことになります。

その他の変更点についてはこちらから

そもそも「レスポンシブデザイン」とは？

レスポンシブデザインとは、パソコン、タブレット、スマートフォンなど、画面の大きさに応じてレイアウトやデザインを変化させる仕組みです。

例えば、パソコンでは、以下のようなレイアウトでも問題ありません。

• 大きな文字を表示する
• 左右に広い余白を取る
• 複数の要素を横に並べる

しかしスマートフォンで同じデザインを使うと、下記のような問題が発生します。

• 文字が大きすぎる
• 余白が広すぎる
• 横並びの要素が窮屈になる

そこで画面幅に応じてデザインを調整するのがレスポンシブデザインです。

WordPress 7.1では「Mobile」と「Tablet」が追加された

WordPress 7.1では、レスポンシブスタイルとして主に次の2つの状態を利用できます。

• Mobile（モバイル）
• Tablet（タブレット）

通常のスタイルを含めると、実質的には3段階です。

状態の名称	標準の画面幅（ブレイクポイント）
Base：通常	782px超
Tablet：タブレット	480px超～782px以下
Mobile：モバイル	480px以下

WordPress 7.1の標準設定では、Mobileは480px以下、Tabletは480px超～782px以下として定義されています。ただし、テーマ側で設定を変更することが可能のため、必ずしも上記のとおりになるわけではありません。

設定例

ブラウザの幅を縮めたり広げたりすると、以下の文章の文字色や背景色が変わるはずです。

「Desktop」という設定はない

少し注意したいのが、WordPress 7.1には「Desktop」「Tablet」「Mobile」という3つの専用スタイルが用意されているわけではないことです。

正確には、以下のような仕組みとなっています。

• 通常のスタイル
• Tabletで必要な部分だけ上書き
• Mobileで必要な部分だけ上書き

そのため、WordPress内部では@desktopというようなスタイルはありません。メニュー上でも「すべてのビューポートをスタイリング」と説明がございます。

公式の説明でも、通常のスタイルがBase Style（基本スタイル）となり、TabletやMobileでは必要な部分だけを上書きする仕組みになっている、ということになっています。

設定していない項目は通常のデザインを引き継ぐ

ここは初心者の方にも重要なポイントです。

通常の見出しを「文字サイズ：40px、文字色：黒」とします。その後、タブレットで「文字サイズ：32px」だけを変更したとします。

するとタブレットでは「文字サイズ：32px、文字色：黒」になります。文字色についてはTablet側で変更していないため、通常設定の「黒」がそのまま使用されます。

モバイルでも同様です。

つまり、すべての項目をPC・Tablet・Mobileそれぞれで設定し直す必要はありません。変えたいところだけ設定すればよいという仕組みです。

文字サイズだけでなく余白や色も変更できる

WordPress 7.1のレスポンシブ設定は、文字サイズだけに限定されません。

「Core Block Supports」と呼ばれるWordPress標準のスタイル機能に対応した項目で利用できます。公式では、主に次の設定が対象として挙げられています。

• Typography（文字設定）
• Color（文字色など）
• Background（背景）
• Border（枠線）
• Dimensions（サイズ）
• Spacing（余白）
• Layout（レイアウト）

そのため、例えば「グループ」ブロックで「通常 余白：48px」「タブレット 余白：32px」「モバイル 余白：16px」といった調整が可能になります。

これまでCSSを書いて調整していたような部分の一部を、WordPressのデザイン設定として管理できるようになったわけです。

個別のブロックにも設定できる

WordPress 7.1では、サイト全体の設定だけでなく、ページ内に配置した個々のブロックにもレスポンシブスタイルを設定できます。例えば「この見出しだけスマートフォンで小さくしたい」といった調整も可能です。

なお、設定いただくにあたっては、投稿・固定ページ等の「プレビュー」リンクに新たに設置された「レスポンシブスタイル」をチェックいただく必要がございます。

内部的には、ブロックのstyle属性に、@mobileや@tabletという情報が保存されます。

例として、モバイルだけ文字サイズを変更した段落ブロックは、内部的には次のような情報を持つことがあります。

<!-- wp:paragraph {"style":{"@mobile":{"typography":{"fontSize":"1rem"}}}} -->
<p>文章が入ります。</p>
<!-- /wp:paragraph -->Code language: HTML, XML (xml)

つまり、単にスマートフォン表示をプレビューしているだけではありません。モバイル用のデザインそのものがブロック情報として保存されるのが大きな違いです。

グローバルスタイルからも設定できる

ブロック一つ一つではなく、「サイト内のすべての見出しをスマートフォンでは小さくしたい」という場合には、サイトエディター上のグローバルスタイルを利用することもできます。

例えば、以下のように設定すれば、見出しブロック全体の基本デザインとして利用できます。

見出しブロック
 ├ 通常：40px
 ├ Tablet：32px
 └ Mobile：26px

その上で特定の見出しだけ個別に変更するといった使い分けもできます。

WordPress 7.1の標準ブレークポイント

レスポンシブデザインでは「何pxからデザインを切り替えるのか」という境界が重要です。この境界をブレークポイント（ブレイクポイント）と呼びます。

WordPress 7.1では、標準で次の値が設定されています。

モバイル（Mobile）

@media (width <= 480px)Code language: CSS (css)

つまり、480px以下です。

Tablet

@media (480px < width <= 782px)Code language: CSS (css)

つまり、480pxより大きく、782px以下です。

全体のイメージ

イメージすると、以下のとおりとなります。

～480px        481～782px        783px～
───────────────────────────────
 Mobile         Tablet           Base

これまでの「プレビュー」と何が違う？

WordPressには以前から、エディターの表示幅を切り替えてスマートフォン表示を確認する機能がありました。しかし、これは主に、「スマートフォンくらいの幅でどう見えるか」を確認するためのプレビューでした。

WordPress 7.1のレスポンシブスタイルでは、「スマートフォンのときは、この文字サイズにする」という実際のスタイル情報を保存できます。ここが大きな違いです。

WordPress側が必要なメディアクエリを生成し、実際のサイト表示にも反映します。

CSSが完全に不要になったわけではない

WordPress 7.1のレスポンシブ機能は便利ですが、CSSがまったく不要になったわけではありません。

現在利用できるのは、基本的にWordPressのブロック設定に対応したデザイン設定です。そのため、「特殊なレイアウト変更」「複雑なアニメーション」「独自のCSSプロパティ」「細かな要素単位の調整」などでは、引き続きCSSが必要になることがあります。

また、自由に何個でもブレークポイントを追加できるわけではありません。基本的には、「Base」「Tablet」「Mobile」という構造です。

したがってWordPress 7.1は、「CSSが不要になるアップデート」というより、これまでCSSで対応していたレスポンシブ調整の一部をWordPress標準機能として扱えるようにしたアップデートと考えるのがよいでしょう。

theme.jsonではブレークポイントを変更できる

ここからは少し開発者向けの内容です。

WordPress 7.1では、テーマのtheme.jsonからMobileとTabletのブレークポイントを変更できます。新しく追加されたのがsettings.viewportです。

例えば、以下のように設定できます（分かりやすくするため、かなり極端な値を入れています）。

{
	"settings": {
		"viewport": {
			"mobile": "30rem",
			"tablet": "45rem"
		}
	}
}
Code language: JSON / JSON with Comments (json)

この場合、以下のように解釈されます。

• 30rem以下→ モバイル
• 30rem超～45rem以下 → タブレット
• 45rem超→ 通常

pxだけでなくemやremも利用できる

settings.viewportでは、次の単位を利用できます。

• px
• em
• rem

そのため、"mobile": "600px"でも"mobile": "40rem"でも構いません。

一方、以下の値は使用できません。無効な値を指定すると、その設定は利用されません。

• %
• vw
• 単位なしの数値
• calc()
• その他のCSS関数

実例：テーマ Lightning の例

実際、有名な無償テーマ「Lightning」では、theme.json内に以下のとおり設定されています（該当箇所のみ抜粋）。

		"viewport": {
			"mobile": "576px",
			"tablet": "992px"
		},Code language: JavaScript (javascript)

ブレークポイントの数値はサイトエディターから変更できない

初心者の方が混乱しやすいポイントとして、settings.viewportそのものは、サイトエディターから自由に変更するための設定ではありません。

サイトエディターでは、「モバイルでは文字を小さくする」「タブレットでは余白を狭くする」といったスタイル変更を行えます。

一方、「Mobileを480pxから600pxに変更する」「Tabletを782pxから900pxに変更する」といったブレークポイントの数値変更はtheme.json側で行います。

整理すると以下のようになります。

内容	サイトエディター	theme.json
Mobile用スタイル	○	○
Tablet用スタイル	○	○
Mobileの境界変更	×	○
Tabletの境界変更	×	○

【補足】このブレークポイントは「表示／非表示」にも適用されます

詳しくは以下の記事をご覧くださいませ。

theme.jsonからレスポンシブスタイル自体も設定できる

ブレークポイントだけでなく、テーマ側からMobile向け、Tablet向けのスタイルをあらかじめ設定することもできます。

たとえば、グループブロックの通常の余白を3rem、Mobileでは1remにする場合は、次のように設定できます。

{
	"styles": {
		"blocks": {
			"core/group": {
				"spacing": {
					"padding": {
						"top": "3rem",
						"right": "3rem",
						"bottom": "3rem",
						"left": "3rem"
					}
				},
				"@mobile": {
					"spacing": {
						"padding": {
							"top": "1rem",
							"right": "1rem",
							"bottom": "1rem",
							"left": "1rem"
						}
					}
				}
			}
		}
	}
}
Code language: JSON / JSON with Comments (json)

これまでテーマのCSSファイルに書いていたレスポンシブデザインの一部を、theme.jsonのデザイン設定としてまとめられるようになったわけです。

注意：「カラム」ブロックの「モバイル」とは意味が違う

WordPress 7.1では特に注意しておきたい点があります。

「カラム」ブロックには以前から、「モバイルでは縦に並べる」という設定があります。

しかし、この「モバイル」はWordPress 7.1の新しい@mobileと同じ意味ではありません。

WordPress 7.1の新しいレスポンシブスタイルでは「モバイル → 480px以下」です。一方、カラムブロックは従来から、基本的に782px未満で1列化するCSSを持っています。

現在のGutenbergのソースでも、カラムブロックでは$break-mediumとして782pxが使用され、781px以下ではカラム幅を100%にする処理が残っています。

つまり、以下の状態になることがあります。

～480px       　 481～781px       782px～
───────────────────────────────────────────
 Mobile     　    Tablet
   │      　         │
   └─ カラムは縦一列 ─┘        　　横並び

「モバイル」という言葉が2種類あると考えると分かりやすい

少しややこしいのですが、WordPress 7.1では、新しいレスポンシブ機能のモバイル（480px以下）と、従来のカラムブロックでいう「モバイル」（782px未満）が混在しています。

これはカラムブロックのレスポンシブ機能がWordPress 7.1よりずっと前から存在するためです。そして、カラムブロックの固定ブレークポイントを改善するための修正事項も以前から提案されているようですが、実装には至っていません。

したがって、WordPress 7.1ですべてのレスポンシブ処理が480px・782pxという新しい仕組みに完全統一されたわけではない点には注意しましょう。

settings.viewportを変更してもカラムの縦並び境界は変わらない

ここも重要です。

例えばtheme.jsonで以下のように変更したとします。

{
	"settings": {
		"viewport": {
			"mobile": "600px",
			"tablet": "900px"
		}
	}
}
Code language: JSON / JSON with Comments (json)

この場合、新しいレスポンシブスタイルでは「Mobile → 600px以下」「Tablet→ 600px超～900px以下」になります。

しかし、だからといってカラムブロックの「モバイルでは縦に並べる」が900pxを基準に変化するわけではありません。カラムブロックには、現在も従来のbreak-medium、つまり782pxを使った独自のCSSがあります。

そのため、settings.viewportはWordPress内のすべてのブレークポイントを一括変更する設定ではありません。正確にはWordPress 7.1で導入されたレスポンシブスタイルやブロック表示制御で使用する共通のViewport設定と考えるのがよいでしょう。

公式記事でも、設定したviewport幅はレスポンシブ・ブロックスタイルやブロック表示制御、エディターのデバイスプレビューで使用されると説明されています。

少なくとも、完全に統一する必要性を感じたら、現時点ではCSSで追加で補正する必要があるわけです。

テーマ制作者にとっても大きな変更

WordPress 7.1以前では、テーマ制作者がレスポンシブデザインを設定するとき、

@media (max-width: 768px) {
	.example {
		font-size: 16px;
	}
}Code language: CSS (css)

といったCSSを書くことが一般的でした。

もちろん今後もCSSは必要ですが、WordPress 7.1では、theme.jsonによる仕組みを利用できる場面が増えました。すなわち、WordPressのデザイン設定をよりtheme.jsonに集約しやすくなっています。

特にブロックテーマでは重要な変化でしょう。

レスポンシブ編集自体を無効化することもできる

テーマやサイトによっては、「投稿者にはモバイルやタブレットの設定を変更させたくない」というケースもあります。

WordPress 7.1では、responsiveEditingEnabledというエディター設定が追加されており、レスポンシブ編集のUIを無効化できます。デフォルトはtrueです。

例えば、functions.phpに以下のとおりに記載すれば表示はされなくなります。

function example_disable_responsive_editing( $settings ) {
	$settings['responsiveEditingEnabled'] = false;
	return $settings;
}

add_filter(
	'block_editor_settings_all',
	'example_disable_responsive_editing'
);
Code language: PHP (php)

ただし、これはレスポンシブ機能そのものを無効化する設定ではありません。すでに保存されているレスポンシブスタイルやtheme.jsonの設定はそのまま利用されます。

あくまで、「ユーザーにレスポンシブスタイルを編集させるUIを表示するかどうか」を決める設定です。

WordPress 7.1以前と比較すると？

今回の変更を簡単に整理すると、次のようになります。

項目	従来	WordPress 7.1
スマホ向け文字サイズ	CSSなどで対応することが多い	標準UIから設定可能
Tablet向けスタイル	テーマ依存	標準対応
個別ブロックのレスポンシブ設定	限定的	対応
グローバルスタイル	通常スタイル中心	Mobile / Tablet対応
ブレークポイント	テーマCSSなどで管理	settings.viewportを利用可能
CSS生成	主にテーマ側	WordPress側でも生成
theme.json	基本デザイン中心	レスポンシブスタイルにも対応

WordPress 7.1は「レスポンシブデザイン完全統一」ではない

WordPress 7.1のレスポンシブ機能は大きな進歩ですが、現時点では「WordPress内のすべてのレスポンシブ処理が一つになった」と考えない方がよいでしょう。

カラムブロックのように、以前から独自のレスポンシブCSSを持つブロックも存在します。

Gutenbergのブレークポイント定義自体にも、現在、分かる範囲だけで以下のような値が残っているようです（今後消去される可能性があります）。

• 1920px
• 1440px
• 1280px
• 1080px
• 960px
• 782px
• 600px
• 480px

したがってWordPress 7.1は、「WordPress全体のレスポンシブデザインが完成した」というよりも、「レスポンシブデザインをWordPress標準のデザインシステムで扱うための共通基盤が本格的に導入された」アップデートと考えると分かりやすいでしょう。

初心者はまず何を覚えればよい？

細かな仕様まで覚える必要はありません。まずは次の3点だけ押さえておけば十分です。

1. WordPress 7.1では「モバイル」「タブレット」ごとにデザインを変更できるようになった
2. 標準では「モバイル」が480px以下、「タブレット」が480px超～782px以下
3. 従来からあるカラムなどのレスポンシブ機能とは、一部仕組みが異なる

特に通常のサイト運営であれば、theme.jsonまで編集する必要はありません。サイトエディターやブロックエディターから必要な部分だけ調整する使い方で十分でしょう。

まとめ

WordPress 7.1では、ブロックのレスポンシブデザイン機能が大きく進化しました。

これまではCSSで対応することが多かった、

• スマートフォンでは文字を小さくする
• タブレットでは余白を減らす
• 画面幅によって背景やサイズを変更する

といった処理を、WordPressのブロックスタイルとして管理できるようになりました。

標準のブレークポイントは、「モバイル：480px以下」「タブレット：480px超～782px以下」「通常：782px超」です。さらにテーマ制作者はtheme.jsonのsettings.viewportを利用して、この境界を変更できます。

一方で、カラムブロックの「モバイルでは縦に並べる」など、従来から存在するレスポンシブ処理までsettings.viewportに統一されたわけではありません。

そのためWordPress 7.1は、レスポンシブ機能の「完成形」というより、WordPress自身がレスポンシブデザインを本格的に管理するための大きな一歩と見るのが適切でしょう。

これまで「スマートフォンだけデザインを変えたいけれどCSSは難しい」と感じていたユーザーにとっても、テーマ開発者にとっても、WordPress 7.1を代表する重要なアップデートの一つといえそうです。