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

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

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

今回作るもの

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

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

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

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

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

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

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

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

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

では、いきましょう。

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

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

カスタムHTMLブロック

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

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

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


th{
  background-color: #82CBAB;
}

列に色をつける

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

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

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


td{
  background-color: #EBFDED;
}

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

予定9:0014:0020: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:0014:0020: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:0014:0020:00
1日(水)ブログ書くクラウドソーシング対応株式取引振り返り
2日(木)お客様打ち合わせシステム開発懇親会
4日(土)プログラミング教室

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


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

まとめ

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

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

▼不明点や作成依頼などあればこちらからどうぞ
立プロに問合せる

▼インスタやってます

 

立プロ

組込エンジニア⇒個人事業主
ITと連携したビジネス発展をサポートしています。
C,C#,JavaScript, Vue, PHP, VBA, GAS, Kotlinなど、扱う言語が増えゆく日々。

立プロをフォローする
HTML & CSS
立科プログラミング
タイトルとURLをコピーしました