WordPress | Gutenbergで各ブロック要素に複数のclass名を追加する方法
デフォルトの「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に追記、なければカスタムフィールドをを使って記事毎に出力しています