目次
 

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

    広告
    SWELL WordPress WordPressプラグイン ブログ

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

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

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

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

    SWELL 2.6.0からテーブルパターンが追加されました。今のところこのカスタマイズはうまく動作していますが、不具合がありましたら問い合わせから教えていただけると幸いです。

    必要なモノ

    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 】というサイトを使っています。参考にどうぞ。

    あわせて読みたい
    [ HUE / 360 ] The Color Scheme Application

    一括コピー用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;}

    まとめ

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

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

    log
    SWELL WordPress WordPressプラグイン ブログ
    • URLをコピーしました！
    1. ホーム
    2. log
    3. WordPressテーマ【SWELL】カスタマイズ：カラフルな表（テーブル）作成したよ。
    目次(タップで項目へ)