この記事では、Gutenbergのブロックエディタを使って任意に指定したブロックにCSSのclassを追加する方法を紹介します。
一般的なHTMLでのclassの指定の仕方は
要素名 class=”class名”
と記述しなくてはいけないが、Gutenbergのブロックエディタではもっと簡単に追加出来ます。またGutenbergでもdivタグのようにclassの中に囲った要素にもclassを指定出来るので、このやり方をマスターすればHTMLの細かな記述よりも効率的にページの作成が可能になるかと思いますので是非覚えてみて下さい。
Gutenbergでのclassの付け方
① まずclassを付けたいブロックを選択します。その状態で右上の⚙マークをクリックしてメニューを開きます。
② 下の方にある高度な設定を開きます。そこの追加CSSクラスでclassを付ける事が出来ます。
③ ここでのclassの付け方は、「class=””」の記述は入りません。「””」すらも付けずにclass名のみを書きます。また複数のclassを追加したい場合は半角スペースで区切るだけでOKです。
これだけで選択したブロックにclassが付きます。
基本的にカスタムHTML以外は全てここからclassを追加出来ます。
複数ブロックにclassを追加
Gutenbergのグループを使えば「div」と同じように要素を囲った状態を作れます。
そのグループに先程と同様に高度な設定→追加CSSクラスでclassを付ける事が出来ます。
またグループの中にあるブロック一つ一つにもclassを付ける事が出来ます。
複数のブロックをグループ化で入れ子状態にすればブロックエディタのみで下記の例②のようなデザインが簡単に作成可能です。
グループ化について詳しくは以下記事をご覧下さい。
実用例
簡単な実用例をあげると、特定のいくつかのページの表のデザインを目立たせたい場合。
例①
CSSに予めclassに対するstyleを振っておき、目立たせたい表に追加CSSクラスを付ければ簡単にそのデザインになります。
CSS
.hyou{
color:#ff8c00
}例②
グループの中にグループを作成し、各々に追加CSSクラスを付けてstyleを記述すればHTMLのdivタグで囲ったやり方と同じ事が可能です。
HTML
<div class="wp-block-group class01"><div class="wp-block-group__inner-container">
<h2>見出し</h2>
<div class="wp-block-group class02"><div class="wp-block-group__inner-container">
<img src="https://ka123m0810.xsrv.jp/wp-content/uploads/2020/02/黒板-1024x602.jpg">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div></div>
</div></div>CSS
class01 {
margin: 2em 0;
font-weight: bold;
border: solid 3px #000000;
}
.h2{
padding: 0.5em;
display: block;
margin: auto;
background: #3B4552;
color: white;
}
.class02 {
position: relative;
}
.class02 p {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
/*文字の装飾は省略*/
}
.class02 img {
width: 100%;
}以上が「Gutenbergで指定したブロックにCSSクラスを追加する方法」でした。
今回紹介したやり方は簡単にclassをつけることが出来るが、そのclassにstyleを適用させるにはある程度のCSSの知見が必要です。CSSについての理解の無い方は以下の記事で予習する事をお勧めします。
