WordPress | Gutenbergでテーブルの1行目や1列目だけカスタマイズする方法

2019-02-202022-10-12WordPress Gutenberg,WordPress

新しいエディタ「Gutenberg」のデフォルトでは、ブロック「テーブル」を挿入してテーブルを作成すると、trを入れれなかったり、セルや文字の装飾カスタマイズ項目がなかったりと、少々不便です

trは一度HTML編集に切り替える事で手書き挿入が可能ですが、この記事はもうtrにせずとも1行目や1列目だけ背景色を変えたりフォントを太字にしようという方法です

「Gutenberg」のテーブル固有のCSSのクラスセレクタ

「Gutenberg」のテーブル固有のCSSのセレクタはデフォルトで「wp-block-table」が付与されています

編集画面の右カラムにあるブロック編集項目にてスタイルを割り当てると「is-style-regular」「is-style-stripes」が付与されます

また「固定幅のテーブルセル」をチェックすると「has-fixed-layout」がそのテーブルが持つクラスに追加されます

今後のアップデートでプラグインを使わずとも簡単にスタイルの項目が追加可能になるのかもですね

:nth-child()を使っう

CSSの子要素が何番目か指定してカスタマイズできる:nth-child()

テーブルの場合、一行目ならtr:nth-child(1)、1列目ならtr td:nth-child(1)とする事でCSSを割り当てる事が可能です

CSS

/*1行目だけ*/
tr:nth-child(1){
}

/*1列目だけ*/
tr td:nth-child(1){
}

デフォルトのCSSクラス「wp-block-table」をカスタマイズ

1行目や1列目に項目名を入れないケースも多いので、デフォルトの「wp-block-table」に1行目や1列目を変更するCSSを当てるのは現実的ではないですが、一応

CSS

.wp-block-table tr:nth-child(1),.wp-block-table tr td:nth-child(1){
  background-color:#faebd7;
}

独自のクラスを付与してカスタマイズ

「Gutenberg」では右カラムにあるブロックの編集項目から高度な設定タブにてCSSクラスを割り当てる事が可能です

試しにこのサイトでは以下の様なCSSクラスを作って割り当ててみました

上に表はクラス名に「first-column」を設定しています

CSS

.first-column tr:nth-child(1){
  background-color:#faebd7;
}

.first-low tr td:nth-child(1){
  background-color:#faebd7;
}

.first-cell tr, .first-cell td:nth-child(1){
  background-color:#faebd7;
}

CSSを分割して記述していますが、まとめたほうが記述減りますね

というより高度な設定は複数のクラスを追加できるので、first-cell（両方用)とか要らないですね

CSS

.first-column tr:nth-child(1),.first-low tr td:nth-child(1){
  background-color:#faebd7;
}

当面はこれだけいいかな