Gutenbergでの「追加CSSクラス」でブロック個別のカスタマイズをする

Gutenbergでは、ブロックのメニューの「高度な設定」で「追加CSSクラス」という設定ができます。ここに何を設定すればいいのか、step by stepで書いてみます。

例：画像を、通常はテーマデフォルト通りに表示し、指定した時はグレーの枠を付ける。

手順

手順1 追加する「見た目」のCSSクラスを作る

画像にグレーの背景を付ける追加CSS

/* image bg gray */
.wp-block-image-bg-gray {
 background-color: #eee;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 margin-top: 0.4em;
 margin-bottom: 2em;
 max-width: 100%;
 padding: 9px;
}

手順2 作成したCSSクラスを、サイトのカスタマイズの「追加CSS」に追加する。

手順3 ブロックの「高度な設定」の「追加CSSクラス」に、適用したいCSSクラスを入れる。

上記の例の場合、追加したCSSクラスの名前は、 wp-block-image-bg-gray なので、これを入れます。ピリオド、前後の引用符を付けないでください。

実例

次のブロックは追加CSSクラスを指定しない画像ブロックです。

次のブロックは、追加CSSクラス wp-block-image-bg-gray を指定した画像ブロックです。灰色の背景が付いています。

別の追加CSSクラスで画像の周りに枠を付けたものです。

画像の周りに枠を付ける追加CSS (wp-block-image-border-gray)

/* image border-gray */
.wp-block-image-border-gray {
 box-sizing: border-box;
 margin-top: 0.4em;
 margin-bottom: 0em;
 max-width: 100%;
 border: solid 1px #dcdcdc;
 padding: 9px;
}