WordPressテーマ【SWELL】カスタマイズ:カラフルな表(テーブル)作成したよ。

なにかを比較したりする時にはHTMLでテーブル表を作るのが一番ですよね。

そんな時にテーブルの色を変更出来たら良いなと思いカスタマイズを作成しました。

色はモノクロ、赤、オレンジ、黄色、緑、青、藍、紫の8色にしてあるので全部実装するもよし、好みの色だけピックアップして実装するもヨシです。

末尾には自作しやすいようにしたcssも用意してあるのでこんな色が欲しいがあればぜひ作成してみてください。

必要なモノ

SWELLをお持ちでない方は下のリンクからどうぞ。17,600円と比較的しますが、その値段に恥じないデザイン性とブロックエディタでの記述効率性が魅力です。

目次(タップで項目へ)

使用方法

テーマカスタマイザー追加CSSに追記するか子テーマを用意して、実例にあるcssをstyle.css内に追記するかしてください。

このページでは基本的にテーマカスタマイザー追加CSSにCSSを追記する方法で説明しています。

テーブルを装飾する場合はテーブルブロックの下の方にある高度な設定の追加CSSクラスに見出しの文字横の色クラスcolor-xxxを指定してね。

なお、SWELLにはテーブルのスタイルの選択肢がいくつかありますが、このカスタマイズはデフォルト二重線のみ対応しています。

実例

テーブルカラー【モノクロ】class : color-mono

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-monoと記入してください。

figure.color-mono>table *{border-color:#d0d0d0 !important;}
figure.color-mono>table>thead>tr>th{background-color:#e0e0e0;color:black;}
figure.color-mono.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#f0f0f0;color:black;}
figure.color-mono>table>tbody>tr:nth-child(odd)>td{background-color:#fcfcfc;}
figure.color-mono>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-mono>table>tfoot>tr>td{background-color:#f0f0f0;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【赤】class : color-red

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-redと記入してください。

figure.color-red>table *{border-color:#E38692 !important;}
figure.color-red>table>thead>tr>th{background-color:#ECACB5;color:black;}
figure.color-red.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#F6D4D8;color:black;}
figure.color-red>table>tbody>tr:nth-child(odd)>td{background-color:#fffbfb;}
figure.color-red>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-red>table>tfoot>tr>td{background-color:#F6D4D8;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【オレンジ】class : color-orange

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-orangeと記入してください。

figure.color-orange>table *{border-color:#EDA184 !important;}
figure.color-orange>table>thead>tr>th{background-color:#F3C0AB;color:black;}
figure.color-orange.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#F9DFD5;color:black;}
figure.color-orange>table>tbody>tr:nth-child(odd)>td{background-color:#fefdfc;}
figure.color-orange>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-orange>table>tfoot>tr>td{background-color:#F9DFD5;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【黄色】class : color-yellow

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-yellowと記入してください。

figure.color-yellow>table *{border-color:#FFF280 !important;}
figure.color-yellow>table>thead>tr>th{background-color:#FFF7AA;color:black;}
figure.color-yellow.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#FFFBD5;color:black;}
figure.color-yellow>table>tbody>tr:nth-child(odd)>td{background-color:#fefefa;}
figure.color-yellow>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-yellow>table>tfoot>tr>td{background-color:#FFFBD5;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【緑】class : color-green

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-greenと記入してください。

figure.color-green>table *{border-color:#68CFC3 !important;}
figure.color-green>table>thead>tr>th{background-color:#95DFD6;color:black;}
figure.color-green.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#C8EFEA;color:black;}
figure.color-green>table>tbody>tr:nth-child(odd)>td{background-color:#fdfffd;}
figure.color-green>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-green>table>tfoot>tr>td{background-color:#C8EFEA;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【青】class : color-blue

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-blueと記入してください。

figure.color-blue>table *{border-color:#8BA7D5 !important;}
figure.color-blue>table>thead>tr>th{background-color:#AEC1E3;color:black;}
figure.color-blue.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#D5E0F1;color:black;}
figure.color-blue>table>tbody>tr:nth-child(odd)>td{background-color:#fdfdff;color:black;}
figure.color-blue>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-blue>table>tfoot>tr>td{background-color:#D5E0F1;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【藍】class : color-indigo

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-indigoと記入してください。

figure.color-indigo>table *{border-color:#7B97F5 !important;}
figure.color-indigo>table>thead>tr>th{background-color:#AABfEA;color:black;}
figure.color-indigo.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#D0daFf;color:black;}
figure.color-indigo>table>tbody>tr:nth-child(odd)>td{background-color:#fbfeff;}
figure.color-indigo>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-indigo>table>tfoot>tr>td{background-color:#D0daFf;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

テーブルカラー【紫】class : color-purple

次のCSSをコピーしてテーマカスタマイザー追加CSSに追記し、呼び出す場合はテーブルブロック追加CSSクラスcolor-purpleと記入してください。

figure.color-purple>table *{border-color:#B492CC !important;}
figure.color-purple>table>thead>tr>th{background-color:#CCB3DD;color:black;}
figure.color-purple.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#E5D7EE;color:black;}
figure.color-purple>table>tbody>tr:nth-child(odd)>td{background-color:#fffaff;}
figure.color-purple>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-purple>table>tfoot>tr>td{background-color:#E5D7EE;}
スクロールできます
header1header2header3header4header5
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

自作カラー用 class : color-xxx

自分の欲しい色が無い場合。この色センスねーなーと思った時には色設定を自作する事が出来ます。

クラス名のxxx部分に指定したい色名を付けて、①~⑧の部分の色の指定を設定してください。

figure.color-xxx>table *{border-color:① !important;}
figure.color-xxx>table>thead>tr>th{background-color:②;color:③;}
figure.color-xxx.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:④;color:⑤;}
figure.color-xxx>table>tbody>tr:nth-child(odd)>td{background-color:⑥;}
figure.color-xxx>table>tbody>tr:nth-child(even)>td{background-color:⑦;}
figure.color-xxx>table>tfoot>tr>td{background-color:⑧;}

それぞれの設定箇所はこんな感じです。

  • ① ボーダー(線)色
  • ② ヘッダー背景色
  • ③ ヘッダー文字色
  • ④ 行頭ヘッダー背景色
  • ⑤ 行頭ヘッダー文字色
  • ⑥ 奇数行背景色
  • ⑦ 偶数業背景色
  • ⑧ フッター背景色

色を設定する際のおすすめカラーチャートはいつも【HUE / 360 】というサイトを使っています。参考にどうぞ。

一括コピー用css

figure.color-mono>table *{border-color:#d0d0d0 !important;}
figure.color-mono>table>thead>tr>th{background-color:#e0e0e0;color:black;}
figure.color-mono.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#f0f0f0;color:black;}
figure.color-mono>table>tbody>tr:nth-child(odd)>td{background-color:#fcfcfc;}
figure.color-mono>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-mono>table>tfoot>tr>td{background-color:#f0f0f0;}

figure.color-red>table *{border-color:#E38692 !important;}
figure.color-red>table>thead>tr>th{background-color:#ECACB5;color:black;}
figure.color-red.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#F6D4D8;color:black;}
figure.color-red>table>tbody>tr:nth-child(odd)>td{background-color:#fffbfb;}
figure.color-red>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-red>table>tfoot>tr>td{background-color:#F6D4D8;}

figure.color-orange>table *{border-color:#EDA184 !important;}
figure.color-orange>table>thead>tr>th{background-color:#F3C0AB;color:black;}
figure.color-orange.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#F9DFD5;color:black;}
figure.color-orange>table>tbody>tr:nth-child(odd)>td{background-color:#fefdfc;}
figure.color-orange>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-orange>table>tfoot>tr>td{background-color:#F9DFD5;}

figure.color-yellow>table *{border-color:#FFF280 !important;}
figure.color-yellow>table>thead>tr>th{background-color:#FFF7AA;color:black;}
figure.color-yellow.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#FFFBD5;color:black;}
figure.color-yellow>table>tbody>tr:nth-child(odd)>td{background-color:#fefefa;}
figure.color-yellow>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-yellow>table>tfoot>tr>td{background-color:#FFFBD5;}

figure.color-green>table *{border-color:#68CFC3 !important;}
figure.color-green>table>thead>tr>th{background-color:#95DFD6;color:black;}
figure.color-green.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#C8EFEA;color:black;}
figure.color-green>table>tbody>tr:nth-child(odd)>td{background-color:#fdfffd;}
figure.color-green>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-green>table>tfoot>tr>td{background-color:#C8EFEA;}

figure.color-blue>table *{border-color:#8BA7D5 !important;}
figure.color-blue>table>thead>tr>th{background-color:#AEC1E3;color:black;}
figure.color-blue.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#D5E0F1;color:black;}
figure.color-blue>table>tbody>tr:nth-child(odd)>td{background-color:#fdfdff;color:black;}
figure.color-blue>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-blue>table>tfoot>tr>td{background-color:#D5E0F1;}

figure.color-indigo>table *{border-color:#7B97F5 !important;}
figure.color-indigo>table>thead>tr>th{background-color:#AABfEA;color:black;}
figure.color-indigo.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#D0daFf;color:black;}
figure.color-indigo>table>tbody>tr:nth-child(odd)>td{background-color:#fbfeff;}
figure.color-indigo>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-indigo>table>tfoot>tr>td{background-color:#D0daFf;}

figure.color-purple>table *{border-color:#B492CC !important;}
figure.color-purple>table>thead>tr>th{background-color:#CCB3DD;color:black;}
figure.color-purple.td_to_th_>table>tbody>tr>td:nth-child(1){background-color:#E5D7EE;color:black;}
figure.color-purple>table>tbody>tr:nth-child(odd)>td{background-color:#fffaff;}
figure.color-purple>table>tbody>tr:nth-child(even)>td{background-color:white;}
figure.color-purple>table>tfoot>tr>td{background-color:#E5D7EE;}

まとめ

雑記ブログを運営していると記事内容によってはそぐわない色味のデザインにしている場合があったりします。その際にもちょっとでも記事に寄り添ったデザインに出来たらと色だけでも合わせようと思って作成してみました。

よりよいワードプレスライフがありますように。

目次(タップで項目へ)
閉じる