考えた!
テーブル(表)の背景色を変更する方法を!
普段のワードプレスでのブログは、ほぼほぼ「ビジュアル編集」で作成。
2019年7月現在、最新版『WordPress 5.2 Jaco』にアップデート済み。
テーマは無料なのにカスタマイズしやすい『Simplicity 2』。
初心者の域を出たり入ったりなのに考えた、プラグインには頼らずにテーブル(表)をカスタマイズする安直な方法。
投稿画面にある『追加CSSクラス』を利用します。
前回の『一部の文字色を変更する方法』に引き続き、HTMLやCSSを使いこなす諸先輩方々は読まないでください。(笑)
プラグイン『TinyMCE Advanced』をインストールすると簡単にできるのは重々承知でございます……。
プラグインになるべく頼らない!という、自己満足の為のカスタマイズ方法なのです……。
*追記*
ワードプレスをアップデートするとテーブル(表)の仕様が少し変わりました。
この記事内のCSSをそのままでは通用しなくなっています。
(追加CSSクラスではなくHTMLに書き加えると再現できなくもないですが、より簡単な方法を思案中です……)
▪︎contents▪︎
デフォルトのテーブルカスタマイズ
テーブルブロックを選んで、右サイドバーを見ると、選べるスタイルが、
「デフォルト」→背景色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日間ほど頭を悩ませたんですよ……。(汗)
色のセンスやクラス名のセンスがイマイチなのは、未熟者ゆえご容赦ください。
もっともっとカスタマイズするぞ!
コメントは優しくどうぞ