「新エディタ Gutenberg」各ブロック要素に複数のclass名を追加する方法

2019年2月25日エディタ

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

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

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

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

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

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

追加CSSクラス1つ
追加CSSクラス

HTMLをみてみると

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

となり、表示してみると

黒景色

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

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

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

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

追加CSSクラス複数
追加CSSクラス複数
<p class="bg_black kadomaru">黒背景 & 角丸</p>

黒景色 & 角丸

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

今回使ったCSSクラス

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

<style type="text/css">

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

.kadomaru{
  border-radius: 10px;
}

</style>

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

2019年2月25日エディタ

Posted by Yousuke.U