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

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

今回作るもの

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

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

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

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

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

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

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

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

投稿編集画面下部に「カスタムCSS」欄があると思いますので、そこにコードを入れていきます。

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

では、いきましょう。

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

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

ヘッダーはthタグで囲まれていますので、thに対してCSSを書きます。

thに背景色を指定することでヘッダーだけ色が付けられます。

th{
  background-color: #82CBAB;
}

列に色をつける

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

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

ヘッダーはtdタグで囲まれていますので、tdに対してCSSを書きます。

tdに背景色を指定することでヘッダーだけ色が付けられます。

td{
  background-color: #EBFDED;
}

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

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

テーブルは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;
}

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

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

セルを指定するには、上でも述べたnth-childを使います。

行はtr:nth-child(), 列はtd:nth-child()で指定します。

この例だと2行3列目の背景色をオレンジとしています（最上行はヘッダ行である点に注意！）。

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

枠線に色をつける

予定	9:00	14:00	20:00
1日（水）	ブログ書く	クラウドソーシング対応	株式取引振り返り
2日（木）	お客様打ち合わせ	システム開発	懇親会
4日（土）		プログラミング教室

枠線の色を指定するには、borderを使います。

ヘッダーはth、それ以外はtr（もしくはtd）で指定します。

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

まとめ

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

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