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

2019年2月20日2019年4月13日WordPress

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

A1	B1	C1
A2	B2	C2
A3	B3	C3

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

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

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

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

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

デフォルトの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	1列目
first-low	1行目
first-cell	1行目と1列目

上に表はクラス名に「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;
}

当面はこれだけいいかな