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

2019-02-202023-02-21WordPress 投稿・エディター,WordPress

WordPressの「テーブル」ブロックで1行目や1列目だけカスタマイズする方法を紹介しています。

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

テーブルに付与されているクラス名を確認

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

また、編集画面の右カラムにあるブロック編集項目にてスタイルを割り当てると「is-style-regular」「is-style-stripes」が追加で付与されます。
「固定幅のテーブルセル」をチェックすると「has-fixed-layout」がクラスに追加されます。

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

※ 現在は上記に加えて「ヘッダーセクション」「フッターセクション」が追加されています。

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

上記のテーブルに付与されているクラス名も踏まえてテーブルの1行目や1列目だけカスタマイズしていきます。

:nth-child()を使って子要素が何番目か指定してカスタマイズしていきます。
テーブルの場合、一行目ならtr:nth-child(1)、1列目ならtr td:nth-child(1)とする事でCSSを割り当てる事が可能です。

/* 1行目だけ */
tr:nth-child(1){
	background-color:#fff000;
}

/* 1列目だけ */
tr td:nth-child(1){
	background-color:#faebd7;
}

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

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

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

また、右カラムにあるブロックの編集項目から「高度な設定」にある「追加 CSSクラス」にて新しいクラス名を割り当てる事が可能です。

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

例えば、以下のサンプルコードではクラス名に「first-column」という名前を設定しています。

.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-column tr:nth-child(1),
.first-low tr td:nth-child(1) {
	background-color: #faebd7;
}