WordPress | Gutenbergで各ブロック要素に複数のclass名を追加する方法

2019-02-212021-06-03WordPress Gutenberg,WordPress

デフォルトの「Gutenberg」ではstyyleの追加によるカスタマイズ性はまだまだ低いものの、各ブロックの要素にclassを簡単に追加できる機能が備わっています

各ブロックの要素にclass名を追加する方法

「高度な設定」ー「追加 CSS クラス」

ここにclass名を追加すると、編集中のブロック要素にたいして追加される

独自classとしてCSSコードしておいた「bg_black」というclass名を、段落ブロックに入れてみます

HTMLをみてみると

<p class="bg_black">黒背景</p>

となり、表示してみると

黒景色

各ブロックの要素に複数のclassを追加する方法

複数のclass名を「追加CSSクラス」に記述する方法は、カンマ区切りではなく半角スペースです

というより、記述したテキストがそのままにclass＝””の中に入ります

上記の「bg_black」というclass名に続けて、「kadomaru」というclass名を付けてみます

<p class="bg_black kadomaru">黒背景 & 角丸</p>

黒景色 & 角丸

２つのclassが適用されました

今回使ったCSSクラス

記事用なので適当なものです

<style type="text/css">

.bg_black{
  background:#000;
  color:#FFF;
  padding:10px;
}

.kadomaru{
  border-radius: 10px;
}

</style>

独自CSSクラスは凡用性があるものは子テーマのstyle.cssに追記、なければカスタムフィールドをを使って記事毎に出力しています