PR

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

フロントエンド

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

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

立プロ

新卒でメーカーに入り、10年間組み込みの現場で設計を行う。
今は個人事業主として自作の組み込み機器開発や、エージェント様に紹介いただき業務委託を行っています。
C,C#,JavaScript, Vue, PHP, VBA, GAS, Kotlinなど、扱う言語が増えゆく日々。

立プロをフォローする

今回作るもの

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

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

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

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

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

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

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

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

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

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

では、いきましょう。

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

予定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で自分の好きなように自作しよう!

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

コメント

タイトルとURLをコピーしました