【CSSで解決！】WordPressのテーブルブロックを自由に色付けする方法

WordPressのテーブルって横線しかできないの？

こうした悩みを解決します。

今回作るもの

今回、自由に色付けする方法を紹介します！

プラグイン使わず自作しよう！

WordPress標準のテーブルブロックは、下記のように横のストライプしか対応してません。

これが何とも使い勝手の悪いこと…。そこでプラグインを探しますよね。

TinyMCE AdvancedやTablePressが有名で使ってみるも、やっぱり使いづらい…。

そういうときは、テーブルのソースを見て、自分でいじればいいのです！

結局これが一番納得できるテーブルが作れます。

では、いきましょう。

CSSは「カスタムHTMLブロック」か「カスタムCSS」に記述する

CSSを書く場所は２つあります。

カスタムHTMLブロック

テーブルのヘッダーの色を変える

ヘッダーはthタグで囲まれていますので、thに対してCSSを書きます。
thに背景色を指定することでヘッダーだけ色が付けられます。

th{
  background-color: #82CBAB;
}

列に色をつける

すべての列に色をつける場合

ヘッダーはtdタグで囲まれていますので、tdに対してCSSを書きます。
tdに背景色を指定することでヘッダーだけ色が付けられます。

td{
  background-color: #EBFDED;
}

交互に列に色をつける場合

テーブルはtdタグに対してnth-childを付加することで変化を加える番号を指定できます。
oddを入れれば奇数、evenを入れれば偶数すべてに反映されます。
例外として1番目だけはfirst-childによる指定ができます。カッコは不要です。nth-child(1)と同義です。

td:nth-child(odd) {
    background-color: #EBFDED;
}
td:nth-child(even) {
    background-color: #E8F2FC;
}

指定したセルのみ色をつける

セルを指定するには、上でも述べたnth-childを使います。
行はtr:nth-child(), 列はtd:nth-child()で指定します。
この例だと2行3列目の背景色をオレンジとしています。

tr:nth-child(2) td:nth-child(3) {
    background-color: orange;
}

枠線に色をつける

枠線の色を指定するには、borderを使います。
ヘッダーはth、それ以外はtr（もしくはtd）で指定します。

th, td {
  border: solid 2px green;
}

まとめ

WordPressのテーブルはCSSで自分の好きなように自作しよう！

制作依頼があれば下記フォームよりご連絡くださいませ！