WordPressのテーブルって横線しかできないの？
こうした悩みを解決します。
今回作るもの
今回、自由に色付けする方法を紹介します！
プラグイン使わず自作しよう！
WordPress標準のテーブルブロックは、下記のように横のストライプしか対応してません。
これが何とも使い勝手の悪いこと…。そこでプラグインを探しますよね。
TinyMCE AdvancedやTablePressが有名で使ってみるも、やっぱり使いづらい…。
そういうときは、テーブルのソースを見て、自分でいじればいいのです！
投稿編集画面下部に「カスタムCSS」欄があると思いますので、そこにコードを入れていきます。
結局これが一番納得できるテーブルが作れます。
では、いきましょう。
テーブルのヘッダーの色を変える
ヘッダーは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で自分の好きなように自作しよう！
制作依頼があれば下記フォームよりご連絡くださいませ！
コメント