【WordPress 7.1新機能】レスポンシブスタイルの使い方

今回は、先日（2026年8月20日）リリースされたWordPress 7.1から使えるようになった新機能「レスポンシブスタイル」の使い方を解説します。

これまで、WordPressでPC表示とSP（スマホ）表示でフォントサイズや余白などを変更したい場合は、別途CSSを記述する必要がありました。

しかし、この「レスポンシブスタイル」を使うと、エディタ画面上の操作だけで、デバイスごとに最適なスタイルを直感的に設定できるようになります。

コードの知識がない方でも、CSSを書かずに手軽にスマホ対応を最適化できるので、ぜひ使ってみてください。

WordPress 7.1の新機能「レスポンシブスタイル」とは？

レスポンシブスタイルは、ブロックエディタの右サイドバーから、デバイスの画面幅（PC・タブレット・スマートフォン）ごとに独立したデザインを直接設定できる機能です。

この機能が追加される前は、例えば「メインビジュアルのキャッチコピーをPC版では大きめに、スマホ版では小さめに設定したい」といった場合、対象のブロックに追加CSSクラスを付与し、テーマのファイルやカスタマイザーに@media (max-width: 768px) { ... }といったメディアクエリ（CSS）を記述して調整してあげる必要がありました。

しかし、レスポンシブスタイルを使うと、この作業が完全なノーコード（CSS不要）で完結するようになります。

なお、レスポンシブスタイルでデバイス幅ごとに変更できるのは、Typography（文字）・Color（色）・Background（背景）・Border（枠線）・Dimensions（寸法）・Spacing（余白）・Layout（レイアウト）といった「WordPress標準のスタイル設定機能（コアブロックサポート）」を持っているすべてのブロックです。

WordPress 7.1 introduces responsive style states for blocks. Styles can now be defined for Tablet and Mobile viewports both through Global Styles for each block type and on individual block instances. They can be applied to all block types (and their block style variations) that use core block supports such as typography, color, background, border, dimensions, spacing, and layout.

引用：Responsive block styles and configurable viewports in WordPress 7.1 – Make WordPress Core

レスポンシブスタイルの基本的な使い方

レスポンシブスタイルの基本的な使い方は、以下の通りです。

今回は例として、見出しのフォントサイズを「PCでは40px、タブレットでは30px、スマホでは20px」に設定する手順を解説します。

STEP. 1：PC時（通常時）のスタイルを設定する

まずは、PC時（通常時）のスタイルを設定します。

今回は、「代表挨拶」と書かれた見出しブロックを選択し、フォントサイズを「40px」と設定します。

なお、ここでは説明のため「PC時」と記載していますが、レスポンシブスタイルを設定しない場合は、すべての状態においてここで設定したスタイルが適用されます。

STEP. 2：「レスポンシブスタイル」をアクティブにする

続いて、「レスポンシブスタイル」機能をアクティブにします。

右上のPCアイコンをクリックします。

「レスポンシブスタイル」をクリックします。

これで「レスポンシブスタイル」機能が有効化されました。有効化されていれば、右上のPCアイコンが紫色に変わります。

STEP. 3：デバイスを切り替え、タブレット・スマホのスタイルを設定する

レスポンシブスタイル機能が有効化されたら、あとはデバイス切り替えアイコンを使ってタブレットやスマホ表示に切り替え、それぞれ調整を行います。

今回は、タブレットでは30px、スマホでは20pxに設定します。

これで、それぞれの端末に応じた文字サイズの設定ができました。

ブレイクポイントの位置と変更方法

ブレイクポイントの位置は、使用しているテーマのtheme.jsonのsettings.viewportの値によって定義されます。

例えば、無料テーマ「X-T9」では、mobileが576px、tabletが992pxに設定されています。

"viewport": {
	"mobile": "576px",
	"tablet": "992px"
}

これを変更したい場合は、子テーマを作成し、子テーマ側のtheme.jsonに独自の値（例：”mobile”: “400px”, “tablet”: “800px” など）を記述することで上書きできます。

なお、テーマ側にviewportの記述がない場合は、WordPress本体のデフォルト値（mobile: 480px、tablet: 782px）が自動的に適用されます。

まとめ

今回は、WordPress 7.1から使えるようになった新機能「レスポンシブスタイル」の使い方を解説しました。

レスポンシブスタイルを使うと、各デバイスごとの見え方を細かく制御できるようになります。

また、CSSの知識がなくてもエディター上から直感的に設定できるため、初心者の方でも手軽に扱えます。

これまでデバイス毎に文字サイズや余白調整などをCSSで制御していた方は、本記事を参考に、ぜひこの便利な機能を試してみてください。

今回は以上になります。最後までご覧頂き、ありがとうございました。