考えた！
テーブル（表）の背景色を変更する方法を！
普段のワードプレスでのブログは、ほぼほぼ「ビジュアル編集」で作成。
2019年7月現在、最新版『WordPress 5.2 Jaco』にアップデート済み。
テーマは無料なのにカスタマイズしやすい『Simplicity 2』。
初心者の域を出たり入ったりなのに考えた、プラグインには頼らずにテーブル（表）をカスタマイズする安直な方法。
投稿画面にある『追加CSSクラス』を利用します。
前回の『一部の文字色を変更する方法』に引き続き、HTMLやCSSを使いこなす諸先輩方々は読まないでください。（笑）
プラグイン『TinyMCE Advanced』をインストールすると簡単にできるのは重々承知でございます……。
プラグインになるべく頼らない！という、自己満足の為のカスタマイズ方法なのです……。
＊追記＊
ワードプレスをアップデートするとテーブル（表）の仕様が少し変わりました。
この記事内のCSSをそのままでは通用しなくなっています。
（追加CSSクラスではなくHTMLに書き加えると再現できなくもないですが、より簡単な方法を思案中です……）
デフォルトのテーブルカスタマイズ
テーブルブロックを選んで、右サイドバーを見ると、選べるスタイルが、
「デフォルト」→背景色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クラス』に「 box-or 」と記入した場合。
↓スタイルは「ストライプ」で、『追加CSSクラス』に「 line-or 」と記入した場合。
↓1行の場合でもスタイルは「デフォルト」で、『追加CSSクラス』に「 box-ye 」。
ここまでが想定した色のパターンだったのですが、さらに組み合わせる事ができました！
↓スタイルは「デフォルト」で、既存4色から緑を選び、『追加CSSクラス』に「 line-or 」と記入で、既存色とオリジナル色を組み合わせたストライプになりました。
↓さらにさらに、スタイルは「デフォルト」で、『追加CSSクラス』に「 box-or line-ye 」と2つのクラス名を半角スペースを入れて記入すると、オリジナル2色でのストライプに。
少し成長したはず⁈
今回の方法が正しいのかどうか？わかりません。
（もっと素晴らしいカスタマイズがあるかもしれません）
しかし、CSSクラスを設定する事で、色のバリエーションを増やす方法が理解できました。
たった4行を書くために3日間ほど頭を悩ませたんですよ……。（汗）
色のセンスやクラス名のセンスがイマイチなのは、未熟者ゆえご容赦ください。
もっともっとカスタマイズするぞ！
