WordPressでは、ブロックエディターの機能強化が続いています。その中でもWordPress 6.9以降、大きく進化しているのが「ブロックの表示・非表示」に関する機能です。

WordPress 6.9では、ブロックを削除せずに一時的に公開ページから隠せるようになりました。

WordPress 7.0ではさらに、画面幅に応じた表示・非表示が可能になっています。

そしてWordPress 7.1では、その画面幅の基準となるブレークポイントを theme.json から変更できるようになり、レスポンシブスタイルの仕組みとも連携するようになりました。

一見すると「非表示機能が少しずつ便利になった」だけにも見えますが、内部の仕組みまで確認すると、

• WordPress 6.9：ブロックそのものを非表示にする
• WordPress 7.0：画面幅ごとに表示・非表示を切り替える
• WordPress 7.1：画面幅の基準をテーマ側で設定し、レスポンシブデザイン全体へ広げる

という段階的な進化が見えてきます。

今回はWordPress 6.9・7.0・7.1で、ブロックの表示・非表示機能がどのように変わってきたのかを、初心者向けに整理します。

公式情報（英語）

• Ability to Hide Blocks in WordPress 6.9 – Make WordPress Core
• Block Visibility in WordPress 7.0 – Make WordPress Core
• Roadmap to 7.1 – Make WordPress Core
• Responsive block styles and configurable viewports in WordPress 7.1 – Make WordPress Core
• WordPress 7.1: Block visibility configurable breakpoints and theme.json integration · Issue #75707 · WordPress/gutenberg

WordPress 6.9：ブロックを削除せず「非表示」にできるようになった

最初の大きな変更は、WordPress 6.9です。

WordPress 6.9では、ブロックを削除せずに公開ページから隠せるブロックの非表示機能がWordPress本体に追加されました。

使用例

例えば、次のような文章があるとします。

キャンペーンが一時的に終了したとき、以前であれば文章を削除したり、下書きとして別の場所に保存したりする必要がありました。

WordPress 6.9以降は、ブロックのメニューから「非表示」にすることで、編集画面には残したまま、公開ページには表示しないという使い方ができます。再び使いたくなった場合は、リストビューなどから「表示」に戻せます。

なお、リストビュー内には、当該ブロックが非表示であることが分かるよう、専用のマークが付きます。

どのような場面で便利？

例えば、以下のような使い方が考えられます。

• 一時的にキャンペーンのお知らせを隠す
• 公開準備中の文章を残しておく
• 後日再利用するセクションを保管しておく
• A案・B案のレイアウトを編集画面内に残しておく

つまりWordPress 6.9の非表示機能は、削除せずに一時保管する機能として考えると分かりやすいでしょう。

WordPress 6.9の「非表示」はHTML自体が出力されない

ここで重要なのが、WordPress 6.9の非表示が単なるCSSの display:none ではないことです。

WordPress 6.9の機能でブロック全体を非表示にすると、公開ページではそのブロックのHTML自体が出力されません。

公式の開発者向け資料でも、非表示にされたブロックは公開時のマークアップから除外されると説明されています。

つまり、通常は「HTMLを出力する→ブラウザに表示される」のに対し、「ブロックを非表示→HTMLを出力しない→公開ページには存在しない」という処理になります。関連するスクリプトやスタイルも、原則として非表示ブロックだけのためには読み込まれません。

ブロックはエディター内で非表示になり、フロントエンドで公開されるマークアップからも除外されます。リストビュー (Shift+Alt+O) で選択して、再度設定を変更できます。

この点は、後述するWordPress 7.0の「モバイルでは非表示」などと大きく異なる部分です。

内部ではBlock Supportsの「visibility」が使われている

少し技術的な話になりますが、この機能はWordPressのBlock Supports（ブロックサポート）という仕組みの一つとして実装されています。

Block Supportsとは簡単に言えば、「このブロックは余白を設定できる」「このブロックは文字色を設定できる」「このブロックは表示・非表示を設定できる」といった、ブロックが利用できる機能を定義する仕組みです。

表示・非表示についてはsupports.visibility という設定が使われます。例えばテーマ・プラグイン開発者は、特定のブロックについてVisibility機能を無効にすることもできます。

なお、ここは少し紛らわしいところです。

supports.visibility は、そのブロックがVisibility機能に対応しているかを表します。

一方、個々のブロックが実際に表示されるかどうかは、ブロックのメタデータに保存されます。この違いはWordPress 7.0以降を理解するうえでも重要です。

WordPress 7.0：スマートフォン・タブレット・パソコンごとに設定可能に

WordPress 7.0では、6.9のVisibility機能がさらに進化しました。

新しく追加されたのが、Viewport（ビューポート）ごとの表示・非表示です。Viewportとは、ここでは簡単に「ブラウザ上でWebページを表示している領域の幅」と考えてください。

WordPress 7.0では、「モバイル（Mobile）」「タブレット（Tablet）」「デスクトップ（Desktop）」という3種類の画面幅について、ブロックを表示するか非表示にするか指定できるようになりました。

これにより、例えば、

• デスクトップで非表示　→ チェックしない
• タブレットで非表示　→ チェックしない
• モバイルで非表示　→ チェックする

とすれば、スマートフォン程度の画面幅でだけブロックを隠せます。

これによって、「パソコンでは詳しい説明を表示するが、スマートフォンでは省略する」といったレスポンシブなページ設計を、WordPress標準機能で行いやすくなりました。

WordPress 7.0ではVisibilityの保存形式も拡張された

内部的には、例えば次のような情報として保存されます。

{
  "metadata": {
    "blockVisibility": {
      "viewport": {
        "mobile": false,
        "tablet": true,
        "desktop": true
      }
    }
  }
}

この場合、mobile: false tablet: true desktop: trueなので、Mobileでは非表示、それ以外では表示という意味です。

ブロックマークアップでは、例えば次のようになります。

<!-- wp:paragraph {"metadata":{"blockVisibility":{"viewport":{"mobile":false}}}} -->
<p>スマートフォンでは非表示になる文章です。</p>
<!-- /wp:paragraph -->

初心者がこのコードを直接編集する必要はありませんが、WordPress内部ではこのようにVisibilityの情報が保存されています。

6.9と7.0では「非表示」の仕組みが違う

ここは特に重要なポイントです。

同じ「非表示」という言葉でも、WordPress 6.9からある全体非表示と、WordPress 7.0で追加されたViewportごとの非表示では、内部処理が異なります。

全体を非表示にした場合

例えば、「このブロックを公開しない」「公開するコンテンツから除外」という設定の場合、

• ブロック：HTMLは生成されない
• DOMに存在しない

という処理になります。こちらは上述のとおりです。

DOMとは、簡単に言えばブラウザがWebページのHTMLを扱うための構造です。

Mobileだけ非表示にした場合

一方、「モバイルでは非表示」とした場合は、以下のような処理となります。

• ブロック：HTMLは生成される
• DOMにも存在する
• CSSでMobile時だけ隠す

という処理になります。

設定時の注意書きにもその旨が記載されています。

ブロックは選択したビューポートに応じて非表示になります。これはフロントエンドで公開されるマークアップに含まれます。リストビュー (Shift+Alt+O) で選択して、再度設定を変更できます。

なぜHTMLを残す必要がある？

これは考えてみると当然です。

例えば、「Mobile → 非表示」「Desktop → 表示」という設定の場合、同じページをパソコンで表示したときにはブロックが必要です。そのためHTMLそのものを削除することはできません。

HTMLを出力しておき、「画面が狭い→CSSで非表示」「画面が広い→CSSで表示」と切り替える必要があるわけです。

WordPress 7.0のブレークポイントは固定だった

WordPress 7.0では、Mobile・Tablet・Desktopの基準となる画面幅は固定されていました。

標準では、おおむね次の区分です。

WordPress 7.0の段階では、このViewportのブレークポイントをテーマ側から自由に変更する仕組みは用意されていませんでした。公式Dev Noteでも、7.0では固定値であり、7.1での設定可能化が予定されていると説明されています。

例えばテーマ側で、「Mobile = 600px以下」「Tablet = 960px以下」のような独自設計を採用していた場合でも、WordPressのVisibility側は480px・782pxを基準としていました。

そのため、テーマのレスポンシブ設計とWordPress標準のVisibilityの基準がずれる可能性があるという問題がありました。

WordPress 7.1：ブレークポイントをtheme.jsonから変更可能に

WordPress 7.1では、この部分が改善されました。

新しく theme.json のsettings.viewportから、MobileとTabletのブレークポイントを指定できるようになっています。

例えば、以下のように設定したといたします。

{
  "version": 3,
  "settings": {
    "viewport": {
      "mobile": "600px",
      "tablet": "900px"
    }
  }
}

その場合、以下のような考え方になります。

• モバイル（Mobile）：600px以下
• タブレット（Tablet）：600px超～900px以下
• デスクトップ（Desktop）： 900px超

なお、指定できる単位は、px em remです。パーセントや単位なしの数値などには対応していません。

settings.viewportはVisibilityにも使われる

重要なのは、settings.viewport が単にエディターのプレビューサイズを変える設定ではないことです。

ここで指定したViewport幅は、

• ブロックのレスポンシブスタイル
• ブロックの表示・非表示
• エディター上のViewportプレビュー

で共通して利用されます。

例えば、以下のように、「モバイルでは非表示」と設定したブロックも、標準の480pxではなく600pxを境界として判定されるようになります。

"settings": {
  "viewport": {
    "mobile": "600px",
    "tablet": "900px"
  }
}

WordPress 7.1ではこのように、Visibilityの画面幅をテーマ設計に合わせやすくなりました。

WordPress 7.1ではスタイルもレスポンシブ化

WordPress 7.1では、Viewportの仕組みがVisibilityだけではなく、ブロックのスタイルそのものへ広げられています。

新しく「Responsive Style States（レスポンシブスタイルステート）」が導入され、MobileやTabletのときだけスタイルを変更できるようになりました。

詳しくは以下の記事で解説しています。

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

WP Pilot

「表示／非表示」運用上の注意点

本記事で紹介している機能の注意点についても、下記のとおりまとめておきます。

「カラムをモバイルで縦並び」にする機能とは別

ここで一つ注意しておきたい点があります。

WordPressには以前から「カラム」ブロックなどにレスポンシブ機能があります。

例えば「カラム」ブロックには、「モバイルでは縦に並べる」という設定があります。しかし、これは今回紹介しているViewport VisibilityやResponsive Style Statesと完全に同じ仕組みではありません。

大まかに分類すると、現在のWordPressには、

1. ブロック独自のレスポンシブ処理
2. ViewportによるVisibility
3. Responsive Style States

という複数のレスポンシブ処理が存在しています。

「非表示＝読み込まれていない」とは限らない

もう一つ、実際の運用で重要なポイントがあります。

特にWordPress 7.0以降の、モバイル（タブレット）では非表示については、「スマートフォンでは見えないから、HTMLも読み込まれていない」とは限りません。ViewportによるVisibilityでは、HTMLはDOMに存在し、CSSによって見えなくなっているだけです。

そのため、大きな画像や重いコンテンツをモバイルで非表示にすればスマートフォンの通信量も完全になくなると考えるのは適切ではありません。

Visibilityは基本的に、レイアウトや情報量を画面幅ごとに調整する機能として考えた方がよいでしょう。

パフォーマンス改善を目的とする場合は、画像の最適化や遅延読み込みなど、別の対策も必要です。

一部のブロックではVisibilityを利用できない場合もある

VisibilityはBlock Supportsとして提供されているため、すべてのブロックで必ず使えるとは限りません。ブロック側でVisibilityのサポートが無効化されている場合には、表示・非表示機能が利用できないことがあります。

例えばWordPress 7.0では、カスタムHTMLブロックについてVisibilityのBlock Supportが意図的に無効化されたことが公式記事でも案内されていますし、実際に「表示／非表示」が使用不可となっています。

そのため、「別のブロックでは【表示／非表示】が使えるのに、このブロックには項目がない」という場合、必ずしも不具合とは限りません。

テーマやプラグインによるカスタムブロックについても、そのブロックがVisibilityに対応しているか確認するとよいでしょう。

WordPress 7.1でレスポンシブデザインは大きく変わり始めた

WordPress 6.9から7.1までの流れを見ると、単に「非表示」という小さな機能が追加されたわけではないことが分かります。

WordPress 6.9では、「ブロックを削除せず、一時的に公開ページから隠す」という仕組みが導入されました。

WordPress 7.0では、「画面幅によって表示・非表示を切り替える」ところまで発展しました。

さらにWordPress 7.1では、「Viewportの基準をテーマ側で設定し、表示・非表示だけでなくスタイル変更にも利用する」という形へ進化しています。

つまり、以下のように整理すると、流れを理解しやすいでしょう。

• WordPress 6.9はVisibility機能の出発点
• WordPress 7.0はVisibilityのレスポンシブ化
• WordPress 7.1はViewportをWordPress標準のレスポンシブデザイン基盤として発展させたバージョン

まとめ

最後に、WordPress 6.9・7.0・7.1の違いを簡単にまとめます。

WordPress 6.9

ブロックを削除せず、公開ページから非表示にできるようになりました。

非表示にしたブロックはHTML自体が公開ページへ出力されません。

WordPress 7.0

「モバイル」「タブレット」「PC」ごとに表示・非表示を設定できるようになりました。

こちらはHTML自体を削除するのではなく、CSSを使って画面幅ごとに隠す仕組みです。

ブレークポイントは以下が基本で、7.0では固定でした。

• モバイル：480px以下
• タブレット：480px超～782px以下
• デスクトップ：782px超

WordPress 7.1

theme.json の settings.viewport によって、モバイル（Mobile）・タブレット（Tablet）のブレークポイントをテーマ側から変更できるようになりました。

さらに同じViewportの仕組みを利用して、「文字サイズ」「色」「背景」「枠線」「サイズ」「余白」「レイアウト」などをモバイル・タブレットごとに変更できるレスポンシブスタイルも追加されています。

WordPressのレスポンシブデザインは、従来は各ブロックやテーマ側で個別に対応する部分が多くありました。WordPress 7.1では、それをViewportという共通の考え方で扱うための土台がかなり整ってきたと言えます。

ただし、「カラム」のモバイル縦並びなど従来から存在するブロック独自のレスポンシブ処理まで、すべてが新しいViewportの仕組みに統一されたわけではありません。

そのため現時点では、「WordPress 7.1ですべてのレスポンシブ処理が統一された」というよりも、WordPress標準のレスポンシブデザインを統一していくための重要な基盤が整ったと捉えるのが適切でしょう。

今後WordPressのブロックエディターを使ってサイトを制作するうえでは、「Visibility」と「Responsive Styles」、そして settings.viewport の関係は、ぜひ押さえておきたいポイントになりそうです。

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（英語）

追記：セキュリティアップデートが出ています

2026年9月22日付けでセキュリティアップデート WordPress 7.1.2 が出ております。もし7.1にアップデートされておりましたら、7.1.2への追加アップデートのご対応もお願いいたします。

WordPress 7.1.2が公開。深刻な脆弱性を修正、サイト運営者は速やかな更新を

WP Pilot

WordPress 7.1では何が変わった？

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

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

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

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

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

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

WordPress 7.1とは：リリース時点での情報や主な変更点を解説します

WP Pilot

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

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

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

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

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

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

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

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

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

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

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

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 -->

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

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

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

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

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

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

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

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

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

モバイル（Mobile）

@media (width <= 480px)

つまり、480px以下です。

Tablet

@media (480px < width <= 782px)

つまり、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"
		}
	}
}

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

• 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"
		},

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

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

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

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

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

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

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

WordPressのブロック表示・非表示機能はどう進化した？　6.9・7.0・7.1の違いを初心者向けに解説

WP Pilot

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"
						}
					}
				}
			}
		}
	}
}

これまでテーマの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"
		}
	}
}

この場合、新しいレスポンシブスタイルでは「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;
	}
}

といった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'
);

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

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

WordPress 7.1以前と比較すると？

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

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を代表する重要なアップデートの一つといえそうです。

WordPress 7.0では、ブロックエディターに新しく「高度な設定＞追加CSS」という機能が追加されました。これにより、投稿や固定ページに配置した特定のブロックだけに、直接CSSを設定できるようになっています。

例えば、ページ内に複数の見出しブロックがある場合でも、その中の一つだけ色を変えたり、枠線を付けたり、余白を調整したりできます。

これまでは、特にプラグインやテーマの機能に頼らなければ、ブロックにCSSクラス名を付けたうえで、テーマのCSSファイルや追加CSS欄にコードを書く必要がありました。WordPress 7.0では、簡単な装飾であれば、ブロックの設定画面だけで完結させることができます。

この記事では、WordPress 7.0で追加されたブロック機能「追加CSS」について、基本的な使い方、従来の機能との違い、便利な使用例、利用時の注意点まで詳しく解説します。

WordPress 7.0の「高度な設定＞追加CSS」とは

「高度な設定＞追加CSS」とは、投稿や固定ページに配置した一つのブロックに対して、CSSを直接入力できる機能です。CSSとは、文字の色や大きさ、背景色、余白、枠線など、Webページの見た目を調整するための仕組みです。

WordPress 7.0以前でもCSSによる調整は可能でしたが、一般的には次のような手順が必要でした。

1. ブロックにCSSクラス名を付ける
2. テーマのCSSファイルや追加CSS欄を開く
3. クラス名を指定してCSSを書く

例えば、ブロックの「追加CSSクラス」に次の名前を入力します。

special-heading

続いて、テーマやサイト全体のCSSに次のようなコードを書きます。

.special-heading {
	color: blue;
}

WordPress 7.0では、このようなクラス名の設定を行わなくても、選択したブロックの設定欄に直接CSSを書けるようになりました。

color: blue;

入力したCSSは、そのブロックだけに適用されます。同じページ内に同じ種類のブロックが複数あっても、ほかのブロックには基本的に影響しません。

追加CSSはどこにあるのか

ブロックごとの「追加CSS」は、投稿または固定ページの編集画面から設定します。基本的な手順は次のとおりです。

1. 投稿または固定ページの編集画面を開く
2. CSSを設定したいブロックを選択する
3. 画面右上の「設定」を開く
4. 右側のブロック設定を表示する
5. 「高度な設定」を開く
6. 「追加CSS」にCSSを入力する

なお、管理画面を英語で使用している場合は、次のような表示になります。

Advanced → Additional CSS

「追加CSS」と「追加CSSクラス」の違い

ここで注意したいのが、従来からある「追加CSSクラス」と、WordPress 7.0で追加された「追加CSS」は別の機能である点です。

「追加CSSクラス」には、notice-boxやspecial-headingなどの名前を入力します。一方、「追加CSS」には、colorやpaddingなどのCSSそのものを入力します。

名前がよく似ているため、間違えないように注意しましょう。

基本的なCSSの書き方

ブロックごとの追加CSSでは、通常のCSSのように対象を指定するセレクターを書く必要はありません。セレクターとは、CSSをどの要素に適用するのかを指定する部分です。

通常のCSSでは、次のようにクラス名や要素名を指定します。

.special-heading {
	color: red;
}

しかし、ブロックごとのCSSでは、すでに対象となるブロックを選択しています。

そのため、中かっこの内側に書く部分だけを入力します。

color: red;

背景色や余白を設定する場合は、次のように書きます。

background-color: #fff5f5;
padding: 20px;

枠線や角丸を追加することもできます。

border: 1px solid #dddddd;
border-radius: 8px;
padding: 20px;

なお、複数のCSSを入力するときは、基本的に各行の最後へセミコロンを付けます。セミコロンが抜けると、後ろに書いたCSSが正しく反映されないことがあります。

color: #333333;
background-color: #ffffff;
padding: 20px;

設定例①

border: 1px solid #dddddd;
border-radius: 8px;
padding: 20px;

セレクターを書かなくてよい理由

通常のCSSでは、どの部分を装飾するのかを指定しなければなりません。

例えば、次のCSSでは、special-headingというクラスが付いた要素を対象としています。

.special-heading {
	color: blue;
}

しかし、ブロックごとのCSSでは、WordPressが対象のブロックを自動的に識別します。そのため、利用者は次のようにCSSの内容だけを書けばよい仕組みです。

color: blue;

内部的には、WordPressが対象ブロックに専用のクラスを追加し、そのクラスに対するCSSを生成します。

概念的には、次のようなHTMLになります。

<h2 class="wp-block-heading wp-custom-css-xxxxxxxx">
	見出し
</h2>

さらに、WordPress側で次のようなCSSが作られます。

:root :where(.wp-custom-css-xxxxxxxx) {
	color: blue;
}

wp-custom-css-xxxxxxxxの部分は、WordPressが自動的に作る識別用のクラスです。利用者が自分で入力したり管理したりする必要はありません。

ブロックの中にある要素を指定する方法

ブロックごとの「高度な設定＞追加CSS」では、ブロック本体だけでなく、ブロック内にあるリンクや画像などを指定することもできます。

ブロック内の要素を指定したい場合は、&という記号を使用します。&は、現在選択しているブロック自身を表します。

ブロック内のリンク色を変更する

選択したブロック内にあるリンクだけを変更する場合は、次のように書きます。

& a {
	color: #007070;
}

リンクにマウスを重ねたときの色を変更する

& a:hover {
	color: #004c4c;
}

通常のCSSに置き換えると、次のような意味になります。

対象のブロック a:hover {
	color: #004c4c;
}

ブロック内の画像を調整する

& img {
	border-radius: 8px;
}

この場合は、選択したブロックの中にある画像へ角丸が適用されます。ただし、ブロックによって内部のHTML構造は異なります。

CSSを書いても反映されない場合は、ブロック本体ではなく、内部にある別の要素を指定しなければならないことがあります。

設定例②

& {
  border: 1px solid #dddddd;
  border-radius: 8px;
  padding: 20px;
}

& a {
	color: #007070;
}
& a:hover {
	color: #004c4c;
}

「高度な設定＞追加CSS」の使用例

ここからは、実際に利用しやすいCSSの例を紹介します。

特定の見出しだけ装飾する

特定の見出しに左側の線と背景色を追加する例です。

border-left: 5px solid #007070;
padding-left: 15px;
background-color: #f2fafa;

ページ内にほかの見出しブロックがあっても、CSSを入力した見出しだけに適用されます。記事内で特に重要な見出しを目立たせたい場合などに利用できます。

特定の段落を注意書き風にする

background-color: #fffbea;
border: 1px solid #e5d48a;
padding: 16px;
border-radius: 6px;

補足説明や注意事項を囲む場合に便利です。ただし、同じ注意書きを何度も使用する場合は、後述する追加CSSクラスなどで共通管理した方がよいでしょう。

特定の画像だけ影を付ける

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 8px;

画像の周囲へ薄い影を付け、角を丸くできます。記事内のスクリーンショットや紹介画像を少し目立たせたい場合に使いやすい設定です。

グループブロックをカード風にする

padding: 24px;
border: 1px solid #dddddd;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);

「グループ」ブロックに設定すると、囲まれた内容をカードのように見せることができます。関連情報やサービス紹介、プロフィール欄などに利用できます。

ボタンの色を変更する

ボタンブロックでは、外側のブロックではなく、内部のリンク要素に背景色が設定されている場合があります。

そのため、次のように& aを使います。

& a {
	background-color: #007070;
	border-radius: 6px;
	padding: 12px 24px;
}

マウスを重ねたときの色も設定できます。

& a:hover {
	background-color: #004c4c;
}

テーマやプラグインによってはCSSが競合し、指定どおりに反映されないことがあります。

従来の「追加CSSクラス」との違い

WordPress 7.0のブロックごとのCSSと、従来の追加CSSクラスは、どちらが優れているというものではありません。

用途が異なるため、目的に応じて使い分けることが重要です。

追加CSS

ブロックの設定欄に直接CSSを書きます。

color: blue;
padding: 10px;

CSSを入力したブロックだけに適用されます。一回だけ使用する装飾や、そのページ固有の調整に向いています。

追加CSSクラス

ブロックにクラス名を入力します。

notice-box

その上で、テーマやサイト全体のCSSにコードを書きます。

.notice-box {
	padding: 20px;
	border: 1px solid #dddddd;
	background-color: #ffffee;
}

クラス名を付けたすべてのブロックに同じデザインを適用できます。複数の記事やページで同じ装飾を繰り返し使う場合に向いています。

使い分けの目安

ブロックごとのCSSは手軽ですが、同じCSSを何度もコピーすると管理が難しくなります。繰り返し使用するデザインは、追加CSSクラスでまとめて管理するのがおすすめです。

仕様の制約について

サイトエディターのブロック別CSSとの違い

ブロックテーマでは、サイトエディターの「スタイル＞ブロック」から、ブロックの種類ごとにCSSを設定できる機能があります。

この機能とWordPress 7.0の「高度な設定＞追加CSS」は、適用される範囲が異なります。

例えば、サイト内のすべての見出しブロックを変更したい場合は、ブロックごとのCSSを一つずつ設定する方法は効率的ではありません。その場合は、サイトエディター、theme.json、テーマのCSSなどを使用する方が管理しやすくなります。

一方、特定の記事にある一つの見出しだけを調整したい場合は、ブロックごとに細かく設定できる「高度な設定＞追加CSS」が便利です。

すべてのユーザーが利用できるわけではない

ブロックごとのCSSは、WordPressの管理画面を利用できるすべてのユーザーに表示されるわけではありません。

利用するには、edit_cssという権限が必要です。これは、サイトのCSSを編集するための権限です。

一般的なWordPressの単独サイトでは、管理者がこの権限を持っています。一方、編集者、投稿者、寄稿者などには表示されない可能性があります。また、権限管理プラグインなどによって設定が変更されている場合は、通常とは異なる表示になることもあります。

CSSを編集すると、サイトのデザインを大きく崩したり、要素を非表示にしたりすることも可能です。そのため、一定の権限を持つユーザーだけが利用できる仕組みになっています。

一部のブロックでは表示されないことがある

「高度な設定＞追加CSS」は多くのブロックで利用できますが、すべてのブロックに必ず表示されるわけではありません。

例えば、通常のブロックとはHTMLの出力方法が異なるブロックや、外側に専用のクラスを付けにくいブロックでは、利用できない場合があります。また、プラグインが提供する独自ブロックでは、ブロックの開発者がこの機能を無効にしていることがあります。

ブロック開発者は、block.jsonに次のような設定を書くことで、ブロックごとのCSSを無効にできます。

{
	"supports": {
		"customCSS": false
	}
}

そのため、特定のブロックだけ「追加CSS」が表示されなくても、必ずしもWordPressの不具合とは限りません。ブロック側の仕様として無効化されている可能性があります。

CSSはどこに保存されるのか

「高度な設定＞追加CSS」に入力した内容は、テーマのstyle.cssへ保存されるわけではありません。投稿や固定ページのブロック情報として保存されます。

コードエディターで確認すると、概念的には次のような形になります。

<!-- wp:heading {"style":{"css":"color: blue;\n"}} -->
<h2 class="wp-block-heading">見出し</h2>
<!-- /wp:heading -->

CSSは、対象ブロックの属性として投稿本文内に保存されています。そのため、テーマを変更してもCSSの入力内容自体は基本的に残ります。

ただし、テーマを変更すると、もともとの文字サイズ、余白、色、HTML構造などが変わることがあります。CSSが残っていても、テーマ変更前とまったく同じ見た目になるとは限りません。

ブロックごとのCSSを使うメリット

ブロックごとのCSSの大きなメリットは、特定のブロックだけを手軽に調整できることです。

例えば、次のような場面に向いています。

• 特定の注意書きだけ枠で囲みたい
• 一つの画像だけ角を丸くしたい
• 特定の記事にあるCTAだけ目立たせたい
• 一つのグループブロックだけ背景色を変えたい
• テーマの設定では対応できない部分を微調整したい
• CSSクラスを作るほどではない一回限りの装飾をしたい

CTAとは、「お問い合わせ」「購入」「会員登録」など、読者に次の行動を促すための案内やボタンのことです。

これまでは、ちょっとした変更でもCSSクラスを追加し、別の画面でCSSを書く必要がありました。「高度な設定＞追加CSS」なら、編集画面内で作業できるため、手順を減らせます。

「高度な設定＞追加CSS」を使う際の注意点

便利な機能ですが、使いすぎには注意が必要です。

CSSが記事内に分散する

ブロックごとのCSSは、CSSを設定したブロックの中に保存されます。そのため、多くのブロックにCSSを設定すると、どこに何を書いたのか分かりにくくなります。

例えば、記事内の20個のブロックに個別のCSSを設定した場合、後からデザインを変更するときに、対象のブロックを一つずつ探さなければなりません。

CSSの一覧を一か所で確認できるわけではないため、長期的な管理には向かない場合があります。

同じCSSを何度も書かない

同じデザインを複数のブロックで使用したい場合に、各ブロックへ同じCSSをコピーする方法はおすすめできません。

例えば、10個の注意書きに同じCSSを書いた場合、背景色を変更するだけでも10か所を修正する必要があります。このような場合は、適用したいブロックに共通のクラス名を付けます。

notice-box

その上で、サイト全体のCSSにまとめて記述します。

.notice-box {
	padding: 20px;
	border: 1px solid #dddddd;
	background-color: #ffffee;
}

これなら、CSSを一か所変更するだけで、同じクラスを付けたすべてのブロックをまとめて変更できます。

CSSの知識は必要

入力欄が追加されたからといって、CSSを自動的に作ってくれるわけではありません。CSSのプロパティ名や書き方が間違っていると、正しく反映されません。

例えば、文字色を変える基本的な書き方は次のとおりです。

color: red;

背景色の場合は次のように書きます。

background-color: yellow;

入力欄が空欄のままになったり、コードの書き方を間違えたりすると、表示は変わりません。

!importantの多用は避ける

テーマ側のCSSが優先され、入力したCSSが反映されない場合があります。そのようなとき、次のように!importantを付ける方法があります。

color: red !important;

ただし、!importantを多用すると、後から別のCSSで上書きしにくくなります。将来的な修正が難しくなるため、できるだけ安易に使用しない方がよいでしょう。

CSSが反映されない場合は、次の順番で確認することをおすすめします。

1. CSSの書き方が間違っていないか
2. 対象となる要素が正しいか
3. & aや& imgなど、内部要素の指定が必要ではないか
4. テーマやプラグインのCSSと競合していないか
5. 最終手段として!importantを検討する

画面幅による見え方にも注意する

パソコンでは問題なく見えても、スマートフォンでは余白が広すぎたり、文字が大きすぎたりすることがあります。

たとえば、次のように左右へ大きな余白を設定するとします。

padding: 40px;

パソコンでは適切でも、画面の狭いスマートフォンでは、内容を表示できる幅がかなり小さくなる可能性があります。「高度な設定＞追加CSS」を設定した後は、パソコンだけでなく、タブレットやスマートフォンでの表示も確認しましょう。

使い分けについて

「高度な設定＞追加CSS」が適しているケース

次のような場合は、「高度な設定＞追加CSS」が使いやすいでしょう。

• 一つのページだけで使用するデザイン
• 一つのブロックだけの微調整
• 一時的なキャンペーン用の装飾
• ほかの場所では再利用しないデザイン
• テーマの設定では対応できない細かな変更

たとえば、期間限定のお知らせや、その記事だけに必要な注意書きなどには向いています。

追加CSSクラスが適しているケース

次のような場合は、「追加CSSクラス」で管理する方が適しています。

• 複数の記事で同じ装飾を使用する
• 注意書きや補足欄を繰り返し使用する
• 後からまとめてデザインを変更したい
• サイト内で共通の部品として管理したい
• CSSを一か所にまとめて確認したい

デザインを再利用する可能性があるなら、最初からクラス名を付けて管理した方が効率的です。

theme.jsonが適しているケース

theme.jsonは、WordPressテーマの色、文字サイズ、余白、レイアウトなどを設定するためのファイルです。

WordPress初心者が知っておきたい「theme.json」とは？ 基本から使い方まで分かりやすく解説

WP Pilot

次のような場合は、ブロックごとのCSSではなく、theme.jsonでの設定を検討した方がよいでしょう。

• サイト全体の色を統一したい
• ブロックの標準デザインを設定したい
• 編集画面と公開画面の表示をそろえたい
• 利用できる色や文字サイズを管理したい
• テーマとして体系的にデザインを整えたい

「高度な設定＞追加CSS」は、サイト全体のデザインを設計するための機能というより、例外的な部分を調整するための機能と考えると分かりやすいでしょう。

まとめ

WordPress 7.0では、投稿や固定ページに配置した特定のブロックへ、直接CSSを書ける機能が追加されました。

WordPress 7.0とは？ 主な変更点を解説します

WP Pilot

CSSを設定したいブロックを選択し、ブロック設定の「高度な設定」にある「追加CSS」へコードを入力します。

基本的には、次のようにCSSの宣言だけを書きます。

color: #007070;
padding: 20px;
border: 1px solid #dddddd;

ブロック内のリンクや画像などを指定したい場合は、&を使います。

& a:hover {
	color: #004c4c;
}

ブロックごとのCSSは、一回限りの装飾や、特定のブロックだけを微調整する場合に便利です。一方、同じデザインを複数の場所で使う場合は、追加CSSクラスやテーマのCSSで共通管理した方が、後から修正しやすくなります。サイト全体のデザインを整える場合は、theme.jsonやサイトエディターを使用する方法が適しています。

基本的には、次のように使い分けるとよいでしょう。

• 例外的な一つのブロックには「追加CSS」
• 繰り返し使う装飾には「追加CSSクラス」
• サイト全体のデザインには、theme.jsonやテーマCSS

WordPress 7.0の「高度な設定＞追加CSS」は便利な機能ですが、何でも個別に設定すると管理が難しくなります。手軽さだけでなく、後から修正しやすいかどうかも考えながら、ほかのCSS設定方法と使い分けることが大切です。

WordPressでブログを運営していると、以下のような経験をすることがあるかと思います。

• 「HTML編集モードに切り替えたら謎のコードが出てきた」
• 「記事の装飾が崩れた」
• 「プラグインの説明にHTMLタグが出てきた」

最近のWordPressはブロックエディター（Gutenberg）が主流になったため、HTMLを直接書く機会は減りました。しかし、運営を続けていると、HTMLの知識がまったく不要になることはありません。

むしろ最低限のHTMLタグを理解しておくことで、以下のようなメリットがあります。

• 記事編集のトラブルに強くなる
• カスタムHTMLブロックを使える
• プラグインの設定が理解しやすくなる
• SEOの仕組みが分かる

この記事では、WordPress初心者が知っておきたいHTMLタグを分かりやすく解説します。

そもそもHTMLとは？

HTML（HyperText Markup Language）は、Webページの構造を作るための言語です。

例えば、「見出し」「段落」「リスト」「リンク」「画像」などをブラウザに伝える役割を持っています。

<h1>WordPress初心者向けガイド</h1>

と書くと、「WordPress初心者向けガイド」という言葉について「これはページの最も重要な見出しです」という意味合いとなります。

HTMLは「デザインを作るもの」ではなく、「文章の意味や構造を伝えるもの」と考えると理解しやすいでしょう。

HTMLを学ぶべき理由

WordPressは年々使いやすくなっています。

しかし、例えば以下のような対応を行う際にはHTMLの知識が役立ちます。

• テーマの説明書を見る
• プラグインのマニュアルに目を通す
• CSSのカスタマイズを行う
• SEO対策や不具合調査を進める

特に「この部分は見出しなのか」「リンクなのか」「画像なのか」が理解できるだけでも、WordPressの扱いやすさは大きく向上します。

WordPressでHTMLタグを使う場面

WordPressでは主に以下の場面でHTMLタグを見かけます。

カスタムHTMLブロック

ブロックエディターの「カスタムHTML」ブロックを使用すると、直接HTMLを書けます。

コードエディター

投稿画面右上のメニューから「コードエディター」へ切り替えると、ブロックがHTML形式で表示されます。

広告・アクセス解析使用時

広告・アクセス解析使用時には所定のコードを貼り付けることがありますが、その際にHTMLが登場します。

特に「Google Analytics」等を利用する場合は割けては通れません。

最優先で覚えたいHTMLタグ

まずは以下のタグだけ覚えれば十分です。

h1～h6（見出し）

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>さらに小さな見出し</h4>
<h5>さらにさらに小さな見出し</h5>
<h6>さらにさらにさらに小さな見出し</h6>

記事の見出しを表します。SEOにおいても重要なタグです。

数字が上がることに節が分割される形となり、一般的には以下のように使います（章・節・項などのように理解いただくとスムーズかと思います）。

• h1：記事タイトル
• h2：大見出し
• h3：小見出し
• h4 / h5 / h6：さらに細かい見出し

p（段落）

<p>これは段落です。</p>

本文を表します。

WordPressで普通に文章を入力すると、自動的にpタグが付与されます。

br（改行）

1行目<br>
2行目

文章を改行します。ただし乱用はおすすめできません。

通常の文章はpタグで段落を分ける方が適切です。

strong（重要）

<strong>重要な内容</strong>

強調を意味します。ブラウザでは太字で表示されることが一般的です。

SEOの観点でも意味を持つタグです。

em（強調）

<em>強調したい部分</em>

文章を強調するタグです。通常は斜体表示になります。

日本語サイトでは使用頻度はやや少なめです。

リンク関連タグ

a（リンク）

<a href="https://example.com">
公式サイト
</a>

リンクを作成します。ブログ運営では非常に重要です。

target=”_blank”

<a href="https://example.com" target="_blank">
リンク
</a>

新しいタブで開きます。

rel属性

<a href="https://example.com" rel="nofollow">
リンク
</a>

検索エンジンへの指示を追加できます。WordPressでは自動付与されることもあります。

リスト関連タグ

ul（順不同リスト）

<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>

表示例は以下のとおりです。

• りんご
• みかん
• バナナ

ol（番号付きリスト）

<ol>
<li>準備する</li>
<li>設定する</li>
<li>公開する</li>
</ol>

表示例は以下のとおりです。

1. 準備する
2. 設定する
3. 公開する

li（リスト項目）

ulやolの中で使用します。

画像関連タグ

img（画像）

画像を表示します。

<img src="image.jpg" alt="説明文">

src

画像ファイルの場所を表します。

src="image.jpg"

alt

「代替テキスト」を指します。

alt="WordPressの管理画面"

画像が表示できない場合や、検索エンジンに内容を伝えるために重要とされており、SEOの観点でも大切です。

表（テーブル）関連タグ

table

表全体を作ります。

<table>
</table>

tr

行を表します。

<tr>
</tr>

td

一般的なセルを表します。

<td>内容</td>

th

見出しを表すセルです。

<th>項目</th>

サンプル

<table>
<tr>
<th>テーマ</th>
<th>料金</th>
</tr>

<tr>
<td>Cocoon</td>
<td>無料</td>
</tr>

<tr>
<td>SWELL</td>
<td>有料</td>
</tr>
</table>

引用タグ

blockquote

引用文を表します。

<blockquote>
引用文
</blockquote>

cite

引用元・出典等を示します。

<cite>引用元</cite>

必ずしもblockquote内に使用する必要はありませんが、blockquote内で使われることも多いです。

コード表示タグ

WordPressの技術記事を書く人には重要です。

code

コードのことを指す一般的なタグです。

<code>functions.php</code>

表示例：functions.php

pre

「整形済みテキスト」を指します。コードの他、文字を揃えたテキストにも使えます。ただし、現在ではコード以外で使われることはあまりありません。

<pre>
コード
</pre>

pre + code

複数行のコードを表現する場合には、以下のように組み合わせることも多いです。

<pre><code>
コード
</code></pre>

範囲指定のために使用されるタグ

div

こちらもよく見かけるタグです。意味はほとんどなく、「グループ化するための箱」として使用されます。

<div class-"container">内容</div>のように使用され、テーマ開発やプラグイン開発では頻繁に登場します。

span

文章の一部分を囲むためのタグです。こちらも内容的な意味はほとんど無いとされています。

たとえば、<span class="red">重要</span>のように使います。こちらもテンプレート編集等で頻繁に使います。

SEOで重要なタグ

WordPress運営者なら次のタグの意味は理解しておきたいところです。

title

ページタイトルを定義するタグのことを指します。ブラウザのタブバーやGoogleの検索結果等に表示される重要な要素です。

<title>記事タイトル</title>

meta

キーワードや説明文等のページ情報を記述します。

いくつか用例はあるのですが、例えば以下のように使います（ページ内説明文の例）。

<meta name="description" content="記事説明">

h1～h6タグ

見出し構造そのものがSEOに関係します。

特に「h1 / h2 / h3」 は重要です。

WordPress初心者が覚える必要のないタグ

初心者の段階では以下を無理に覚える必要はありません。

• article
• section
• nav
• aside
• header
• footer
• svg
• canvas
• script
• iframe

もちろん知っていると役立ちますが、ブログ運営だけなら優先度は低めです。

まとめ

WordPress初心者が最初に覚えるべきHTMLタグは多くありません。

まずは以下だけ理解できれば十分です。

• h1～h6（見出し）
• p（段落）
• br（改行）
• strong（強調）
• a（リンク）
• ul・ol・li（リスト）
• img（画像）
• table（表）
• blockquote（引用）
• code（コード表示）
• div（グループ化）
• span（一部分の装飾）

現在のWordPressではHTMLを直接書く機会は減っていますが、HTMLを理解しているとトラブル対応やカスタマイズの幅が大きく広がります。

すべて暗記する必要はありません。まずは「見たことがある」「何となく意味が分かる」状態を目指すだけでも、WordPress運営はぐっと楽になるでしょう。

公式情報

• VK Blocks・VK Blocks Pro | 株式会社ベクトル
• VK Blocks で画面サイズ毎の改行指定ができるようになりました | 株式会社ベクトル

機能の内容

プラグイン「VK Blocks」には、画面幅ごとに改行するかしないかを指定することができる機能がございます。

例えば、段落中にxsとsmのコードを挿入すれば、「xs」と「sm」対象の画面幅では改行され、それ以外の環境では改行されないという見た目となります。

WordPressブロックエディター拡張プラグイン「VK Blocks」について、無料版とPro版の両方を紹介

WP Pilot

使用例

以下ブロックとスクリーンショット画像を、是非とも見比べてみてください。

各コードと実際に出力されるHTMLの対応関係

実際には、br-xs br-sm等のショートコード風の記載がそれぞれ相当のHTMLに変換されているのみとなっております。そのため、例えばショートコード内やブロックパターン等に該当HTMLを記載するなどの応用が可能です。

xs： 画面幅 ～576px

<br class="vk_responsive-br vk_responsive-br-xs"/>

sm： 画面幅 576 ～ 768px

<br class="vk_responsive-br vk_responsive-br-sm"/>

md： 画面幅 768 ～ 992px

<br class="vk_responsive-br vk_responsive-br-md"/>

lg： 画面幅 992 ～ 1200px

<br class="vk_responsive-br vk_responsive-br-lg"/>

xl： 画面幅 1,200 ～ 1,400px

<br class="vk_responsive-br vk_responsive-br-xl"/>

xxl： 画面幅 1,400px ～

<br class="vk_responsive-br vk_responsive-br-xxl"/>

解決すべき問題

HTMLでは、1ページにつき1箇所のH1見出しを配置することが強く推奨されています（2箇所以上配置すべきかそうでないかといった問題はしばしば論争となりますが、本記事では問題にしません）。

ただ、フロントページの場合、記事一覧のみが表示されているなどの状況になりやすく、H1見出しがページ内に配置されない状況が発生しやすいです。そのため、意図的にH1タグの含まれたページをフロントページとして作成するなどの対応が必要になります。

サイトのロゴの箇所をH1見出しとして扱うのも1つの方法です。ただ、サイトロゴの箇所は<h1>タグではなく<div>タグなどで囲われている場合が主流のため、大多数の環境では一工夫する必要がございます。

「サイトロゴ」をH1化する対応策

プラグイン「VK Blocks」にて対応する方法

Vektor社が提供しているプラグイン「VK Blocks」では、バージョン v1.119.0より、フロントページのみ、「サイトロゴ」ブロックがH1である旨の設定ができるようになりました。

詳しくは以下のページをご確認くださいませ。

• VK Blocks 1.119.0 でサイトロゴブロックにh1を指定できるようになりました。 | 株式会社ベクトル

対策済みのテーマを使う

例えば、以下のテーマでは、H1タグが記事箇所等に存在しない場合、サイトロゴ箇所がDIVからH1見出しに切り替わるようになっています。

• Xwrite
• SWELL
• Cocoon
• Lightning

上記のようなテーマを利用できるのであれば、そちらを利用するのが手っ取り早いと思います。

functions.php に追記する方法（上級者向け）

上記のような環境・解決方法を取り入れるのが難しいようであれば、以下のようなコードを子テーマの functions.php 等に追記いただくのが手っ取り早いと思います。

/**
 * サイトロゴブロックの出力をトップページとそれ以外で切り替える
 */
add_filter( 'render_block', function( $block_content, $block ) {
    // サイトロゴブロック（core/site-logo）が対象
    if ( 'core/site-logo' === $block['blockName'] ) {
        if ( is_front_page() ) {
            // トップページなら h1 で囲む
            return '<h1>' . $block_content . '</h1>';
        } else {
            // それ以外なら div で囲む
            return '<div>' . $block_content . '</div>';
        }
    }
    return $block_content;
}, 10, 2 );

/**
 * サイトロゴブロックの出力をトップページとそれ以外で切り替える
 */
add_filter( 'get_custom_logo', function ( $html ) {
    if ( is_front_page() ) {
        // トップページ：ロゴ全体を h1 で囲む
        $html = sprintf(
            '<h1 class="custom-logo-wrapper">%1$s</h1>',
            $html
        );
    } else {
        // それ以外：ロゴ全体を div で囲む
        $html = sprintf(
            '<div class="custom-logo-wrapper">%1$s</div>',
            $html
        );
    }
    return $html;
} );

補足：運用でのカバーも検討する

サイトロゴの箇所がH1にならなくとも、上記に書いたとおり、記事エディター内にH1見出しを意図的に設置することによっても対応することが可能です。

実際、当ブログのトップページでも、「サイトロゴ」画像ではなく別の箇所をH1見出しとしています。

結局のところ、最後にものを言うのは、運用方針や「どのように組み立てていくか」というところだと思います。既存の事例を参考にしながらも、「どうしたいか」は大切にしたいものでございます。