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

2019-04-13WordPressWordPressカスタマイズ

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

A1B1C1
A2B2C2
A3B3C3

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;
}
wp-block-tableに対して上記のCSSを追加した結果
上記のCSSを追加した結果(※画像です)

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

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

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

クラス名用途
first-column1列目
first-low1行目
first-cell1行目と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;
}

当面はこれだけいいかな

2019-04-13WordPressWordPressカスタマイズ

Posted by Yousuke.U