WordPress 7.0で追加された「高度な設定＞追加CSS」とは？ 使い方と注意点を分かりやすく解説

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;
}Code language: CSS (css)

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

color: blue;Code language: CSS (css)

入力した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;
}Code language: CSS (css)

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

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

color: red;Code language: CSS (css)

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

background-color: #fff5f5;
padding: 20px;Code language: CSS (css)

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

border: 1px solid #dddddd;
border-radius: 8px;
padding: 20px;Code language: CSS (css)

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

color: #333333;
background-color: #ffffff;
padding: 20px;Code language: CSS (css)

設定例①

border: 1px solid #dddddd;
border-radius: 8px;
padding: 20px;Code language: CSS (css)

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

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

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

.special-heading {
	color: blue;
}Code language: CSS (css)

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

color: blue;Code language: CSS (css)

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

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

<h2 class="wp-block-heading wp-custom-css-xxxxxxxx">
	見出し
</h2>Code language: HTML, XML (xml)

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

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

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

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

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

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

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

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

& a {
	color: #007070;
}Code language: CSS (css)

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

& a:hover {
	color: #004c4c;
}Code language: CSS (css)

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

対象のブロック a:hover {
	color: #004c4c;
}Code language: CSS (css)

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

& img {
	border-radius: 8px;
}
Code language: CSS (css)

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

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

設定例②

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

& a {
	color: #007070;
}
& a:hover {
	color: #004c4c;
}Code language: CSS (css)

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

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

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

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

border-left: 5px solid #007070;
padding-left: 15px;
background-color: #f2fafa;Code language: CSS (css)

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

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

background-color: #fffbea;
border: 1px solid #e5d48a;
padding: 16px;
border-radius: 6px;Code language: CSS (css)

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

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

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

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

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

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

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

ボタンの色を変更する

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

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

& a {
	background-color: #007070;
	border-radius: 6px;
	padding: 12px 24px;
}Code language: CSS (css)

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

& a:hover {
	background-color: #004c4c;
}Code language: CSS (css)

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

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

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

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

追加CSS

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

color: blue;
padding: 10px;
Code language: HTTP (http)

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

追加CSSクラス

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

notice-box

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

.notice-box {
	padding: 20px;
	border: 1px solid #dddddd;
	background-color: #ffffee;
}Code language: CSS (css)

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

使い分けの目安

ブロックごとの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
	}
}Code language: JavaScript (javascript)

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

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

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

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

<!-- wp:heading {"style":{"css":"color: blue;\n"}} -->
<h2 class="wp-block-heading">見出し</h2>
<!-- /wp:heading -->Code language: HTML, XML (xml)

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;
}Code language: CSS (css)

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

CSSの知識は必要

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

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

color: red;Code language: CSS (css)

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

background-color: yellow;Code language: CSS (css)

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

!importantの多用は避ける

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

color: red !important;Code language: CSS (css)

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

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

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

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

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

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

padding: 40px;Code language: CSS (css)

パソコンでは適切でも、画面の狭いスマートフォンでは、内容を表示できる幅がかなり小さくなる可能性があります。「高度な設定＞追加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;Code language: CSS (css)

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

& a:hover {
	color: #004c4c;
}Code language: CSS (css)

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

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

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

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