TablePressは設置しやすいだけでなく、スタイルの変更も容易です
TablePressの公式によくある質問（FAQ）に「Styling, Layout, and CSS（スタイル、レイアウト、CSS）」として紹介されています
英語のみの表記ですが、ブラウザによっては日本語に翻訳できます。マウスの右クリックから「日本語に翻訳」が可能
TablePressの専用CSSについて
TablePressには専用の変数を使ったCSSコードを入力する欄があります
「WordPressの管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」
このテキストエリアでTablePressの変数を使ったCSSコードの追加ができます
もちろん通常のCSSコードも使えます
CSSの優先順位
TablePressの変数を使ったコードは上記のページでしか使えませんが、通常のCSSコードを使った場合の優先順位
「外観→カスタマイズ→追加CSS」＞「各ページの追加CSS」＞「style.css(外観→テーマファイルエディター）」＞TablePress（プラグインオプション）になります
CSSの記述場所を分けるか統一するかは各自の判断でお願いします
この後、いくつかのTablePressの変数を使った方法と通常のCSSコードを使った方法を紹介していきます
特定の行のスタイルを変更する
単一の行のテキストと背景色を変更したい場合に使います
.tablepress-id=N .row-X td{
background-color;#96e0a3;
color:#23728e;
}
Nはテーブルを作成した時のID
Xは行番号（テーブルを作成した時に表示される行番号）
全てのテーブルに適用したい場合は「-id=N」の部分を削除
例）上記画像の２行目のスタイルを変えたい場合
.tablepress-id=1 .row-2 td{
background-color:#00ee99;
color:#ff0000;
}
表の見出し行「thead」のスタイルを変更する
TablePressのプラグインオプションに追加する
.tablepress {
--head-text-color: #5e6b68;
--head-bg-color: #96e0a3;
}通常のCSSコードを追加する
style.cssなどに以下を追加
.tablepress thead th{
background-color: #96e0a3;
color: #5e6b68;
}theadの行を消したい
.tablepress thead{
dispay:none;
}個別のテーブルに適用する
「.tablepress」の後に「-id=N（テーブルID）」を追加する
.tablepress-id=1{
.talepress-id=1 thead th{
.tablepress-id=1 thead{など
交互の行にスタイルを変更する
TablePressのプラグインオプションに追加する
.tablepress {
--odd-text-color: #333333;
--odd-bg-color: #f2f6f7;
--even-text-color: #333333;
--even-bg-color: #f9f4f9;
}通常のCSSコードを追加する
style.cssなどに追加する
.tablepress > :where(tbody.row-striping) > :nth-child(odd) > * {
background-color: #f2f6f7;
color: #333333;
}
.tablepress > :where(tbody.row-striping) > :nth-child(even) > * {
background-color: #f9f4f9;
color: #333333;
}
結合した場合、結合した最初のセルのスタイルになります
ホバーした時のスタイルを変更する
TablePressのプラグインオプションに追加する
.tablepress {
--hover-text-color: #333333;
--hover-bg-color: #f2f6f7;
}通常のCSSコードを追加する
style.cssなどに以下を追加
.tablepress .row-hover tr:hover td {
background-color: #f2f6f7;
color: #333333;
}| ABC | DEF | GHI | JKL |
|---|---|---|---|
| 横方向に結合 | 横方向に結合 | ||
| 縦方向に結合 | 1２３ | 縦に３行結合 | 7８９ |
| 4５６ | 1２３ | ||
| 4５６ | |||
TablePressのCSSを使う時のメリットとデメリット
プラグインオプションに追加した時と通常のstyle.cssなどに追加した時のメリット、デメリット
| TablePressのCSS | 通常のCSS | |
|---|---|---|
| メリット | 変数が使える テーブルのCSSをひとまとめにできる | テキストで保存できる バックアップが容易 |
| デメリット | CSSの優先順位が低い データベース上にしか保存できない | 1枚なので、CSSコードを探すのに時間がかかる |
終わりに
今回はTablePressでのスタイルの変更方法について簡単なものだけ挙げました
もっと色々なお洒落なテーブルにすることもできます。他のサイトでも紹介していますのそちらで探してみてください
コメント