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