ワードプレスでプラグインを使わずテーブル(表)の背景色を変更する方法を考えた!

考えた!
テーブル(表)の背景色を変更する方法を!

普段のワードプレスでのブログは、ほぼほぼ「ビジュアル編集」で作成。
2019年7月現在、最新版『WordPress 5.2 Jaco』にアップデート済み。
テーマは無料なのにカスタマイズしやすい『Simplicity 2』。

初心者の域を出たり入ったりなのに考えた、プラグインには頼らずにテーブル(表)をカスタマイズする安直な方法。
投稿画面にある『追加CSSクラス』を利用します。
前回の『一部の文字色を変更する方法』に引き続き、HTMLやCSSを使いこなす諸先輩方々は読まないでください。(笑)

ワードプレスで簡単に文字の装飾がしたい!でも、プラグインは使いたくない!HTMLもCSSもコピペしかできない!無い知恵を絞ってみたら、こんな安直な方法を思いついてしまいました。

プラグイン『TinyMCE Advanced』をインストールすると簡単にできるのは重々承知でございます……。
プラグインになるべく頼らない!という、自己満足の為のカスタマイズ方法なのです……。

デフォルトのテーブルカスタマイズ

WordPressでデフォルトのテーブルカスタマイズ

テーブルブロックを選んで、右サイドバーを見ると、選べるスタイルが、
「デフォルト」→背景色1色(白か色設定で選んだ色)
「ストライプ」→横ストライプで奇数行のみ色が付く

色設定が4色(グレー・グリーン・ブルー・ピンク)
カスタムカラーは無し。

色、少な過ぎでしょ!

黄色なんかも必要でしょ。
こりゃ、プラグインを入れようと思っても仕方ないわ。
今後のアップデートでカスタムカラーが追加される事を願いながら……。
よし、何とかしてみよう!

テーブルカスタマイズに課した条件

  • デフォルトの4色も使えるように残す
  • テーブル毎にカスタマイズできるようにする
  • できるだけ簡単に

毎回、同じ色でテーブルを作成する予定ならCSSで1つパターンを設定してしまえば簡単ですが、違いますよね。
とりあえず、薄い黄色と薄いオレンジを作ってみるぞ!

『追加CSSクラス』が鍵

右サイドバーの『高度な設定』→『追加CSSクラス』。
今まで使った事ありませんでした。
使い方を勉強しまくって知恵熱が出そうでしたよ。(笑)

HTMLに独自クラスを設定して、CSSでクラス指定しながらデザインをカスタマイズできるんですね。
ふむふむ……。

『追加CSSクラス』には半角スペースを入れながら複数のクラスを指定することも可。
クラス名は任意ですが、半角英数字・ハイフン・アンダーバーで分かりやすくですね。
ふむふむ……。

実際に設定したCSSクラス

新しく作りたいのはオレンジと黄色。
デフォルト(背景ベタ塗り)とストライプに適用させる。

途中で色々試した過程は省きますが、任意で作ったクラス名は4つ。

  • デフォルト(背景ベタ塗り)のオレンジ→box-or
  • デフォルト(背景ベタ塗り)の黄色→box-ye
  • ストライプのオレンジ→line-or
  • ストライプの黄色→line-ye

1色でデフォルト用とストライプ用の2種類です。
色を増やす場合は、1色につき2種類のクラスを作ります。

CSSで設定を記述

table.line-or tr:nth-child(odd) td {background-color:#fff4ea;}
table.line-ye tr:nth-child(odd) td {background-color:#ffffe0;}
table.box-or{background:#fff4ea}
table.box-ye{background:#ffffe0}

たった4行、記述する場所は下記のどちらかです。

●ダッシュボード左の「外観」→「カスタマイズ」→「追加CSS」へ。

●ダッシュボード左の「外観」→「テーマエディター」→「スタイルシート (style.css)」へ。
スタイルシートに書き込む場合は、利用しているテーマの子テーマを選んで。(子テーマを利用している場合)

一旦、「追加CSS」で思い通りに適用されるか試す方が良いですよ。

尚、#の付いた英数字6桁(#ffffe0など)は色コードなので、「原色大辞典」サイトなどを参考にお好みの色に変更してください。

投稿画面でクラス名記入

投稿画面で色変更したいテーブルを選択したら、右サイドバーブロックの『高度な設定』を開いて『追加CSSクラス』を表示させる。
すでに記入されているクラス名の後に半角スペースを入れて、自分で作ったCSSクラス名を記入。

CSSクラスを追加

*テーブルカスタマイズ用プラグインがインストールしてある場合や、テーマで独自カスタマイズされている場合、優先順位によっては適用されないかもしれません。

思ったよりバリエーション豊富

今後、テーブル全体のデザインをカスタマイズする予定なので、画像を貼っています。

↓スタイルは「デフォルト」で、『追加CSSクラス』に「 box-or 」と記入した場合。

テーブルの背景全体オレンジ色

↓スタイルは「ストライプ」で、『追加CSSクラス』に「 line-or 」と記入した場合。

テーブル背景オレンジ色のストライプ

↓1行の場合でもスタイルは「デフォルト」で、『追加CSSクラス』に「 box-ye 」。

テーブル1行で背景黄色

ここまでが想定した色のパターンだったのですが、さらに組み合わせる事ができました!

↓スタイルは「デフォルト」で、既存4色から緑を選び、『追加CSSクラス』に「 line-or 」と記入で、既存色とオリジナル色を組み合わせたストライプになりました。

既存色とオリジナル色のストライプ

↓さらにさらに、スタイルは「デフォルト」で、『追加CSSクラス』に「 box-or line-ye 」と2つのクラス名を半角スペースを入れて記入すると、オリジナル2色でのストライプに。

オリジナル2色でストライプ

少し成長したはず⁈

今回の方法が正しいのかどうか?わかりません。
(もっと素晴らしいカスタマイズがあるかもしれません)

しかし、CSSクラスを設定する事で、色のバリエーションを増やす方法が理解できました。
たった4行を書くために3日間ほど頭を悩ませたんですよ……。(汗)
色のセンスやクラス名のセンスがイマイチなのは、未熟者ゆえご容赦ください。

パレットPart2

もっともっとカスタマイズするぞ!

スポンサーリンク
PC(大)
PC(大)

フォローする?

トップへ戻る