Pixel-mixer / Pixabay
みなさんこんにちは。
今日はWordPressプラグインのTablePressについて。
このプラグイン、簡単に記事内に表を作成できる上にデザインのカスタマイズがかなり自由。というもので、大変重宝しています。
ただ、表を創るとき、画像のように1行目のセルを見出しセルとして背景色を変えたりすることが多いのと同じように、一列目もまとめて背景色とか変えたいじゃないですか。
最初は他サイトでも紹介されている様な「特定のセルの背景色を変えるやり方」で頑張って1列目のセルを全部記述していました。。。
しかも始めのうちは、丁寧に毎回表のIDを指定して。。。
↓こんな感じですね。。（○=表のID、row=行、column=列）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#tablepress-○ .row-2 .column-1, #tablepress-○ .row-3 .column-1, #tablepress-○ .row-4 .column-1, #tablepress-○ .row-5 .column-1, #tablepress-○ .row-6 .column-1, #tablepress-○ .row-7 .column-1{ font-size: 1em; padding: 10px; vertical-align: middle; border-bottom: 1px solid #ccc; background: #A4F6CD; } |
これをTablePress設定＞プラグインのオプションのカスタムCSSの欄に記述するわけです。
・・・・多分、「row」をかなり多めにつくっておけばまず対応できるんだろうけど、ある日「行」が足りなくなって「しまった！」となった時には既にCSSに何描いてたか忘れてると思うんですよ。。
後日、表のIDまで指定しなくても「追加のCSSクラス」で出来る方法が以下のサイトの丁寧な説明で分かったのですが、、、
テクログ
各「テーブル編集」画面の中に「追加のCSSクラス」を指定する場所があります。
それでも「row」をたくさん打つのも面倒、表を作成するごとに「追加のCSSクラス」に何か記入するのもめんどくさい。。。と思ってました。
※数種類のデザインを使い分けたい人は「追加のCSSクラス」で上記のサイトで紹介されている方法がベストだと思います。
そもそも一つのサイトで表のデザインとかあまり変えないじゃないですか！
私は一生、1行目・1列目がハイライトされている表しか創らないであろう。という自負があったので、なんとか「プラグインのオプション」＞「カスタムCSS」に一回記述するだけで未来永劫カスタマイズされて欲しかったのです。
で、表作成のCSSとか色々調べてみてあれこれ試してみたら上手くいったのでコードを描いておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.tablepress thead th { background-color: #2e8b57; color: #FFF; border: solid 1px #ccc; text-align: center; } .tablepress td.column-1 { font-size: 1em; padding: 10px; vertical-align: middle; border-bottom: 1px solid #ccc; background: #A4F6CD; } .tablepress td { font-size: .8em; text-align: center; border: solid 1px #ccc; } |
1つめのブロック＝表1行目のCSS
2つめのブロック＝表1列目のCSS
3つめのブロック＝その他のセルのCSS
です。
記述する際CSSの中に「/*〜*/」を入れると403エラーになりました。。。
ロリポップサーバのWAFで変更が弾かれたっぽいのですが、SiteGuardのWAFチューニングサポートでもいつものようにできなかったので、「/*〜*/」は入れませんでした。
何のことはない、「td.column-1」でよかったのですね。。。
これがあると「td」だけよりもなんか優先されるみたい。（CSSに詳しくないのでよく分かってないのですが、、）
これを先ほどの「プラグインのオプション」＞「カスタムCSS」に記述すれば以下のようになります。
表の中身はこちらの記事のものです。。。
