WordPressのおすすめテーブル管理プラグイン TablePressのカスタマイズ方法をご紹介します。コピペで使えるコードもご紹介！
目次
tablepressで文字の大きさを変更したい
WordPressの初心者です。
TablePressで表を作った際、
エクセルで言う「全体を縮小して表示」、
もしできなければフォントサイズの変更、
これらはどのように行えばいいですか？
ハウトゥサイトのものを真似して、
プラグインのオプション
‐カスタムCSS
に入力しても何も変わりません。
ちなみに今入力しているのは以下です。
(まったく意味が分かっていないのですが。。。)
.tablepress-sample th,
.tablepress-sample td {
font-size: 5px;
}
TablePressのカスタマイズ注意点
DA様
ご相談ありがとうございます！
テーブルプレスは管理画面からテーブルを作成し、ショートコードで投稿や固定ページにテーブルを表示できるプラグインで非常にオススメです。
残念ながら「全体を縮小して表示」のようなものは難しいですが、ある程度カスタマイズは可能なのでご紹介したいと思います。
基本的な使い方についてはこちらでもご紹介しています。
テーブルをコードを使わず一元管理するプラグイン！
基本的な文字サイズや余白、背景色などはテーマに依存する部分もありますが、以下のような方法で可能です。
セル結合
今回は特に質問されていませんが、セル結合についてもご紹介しておきます。
UIだと少し分かりづらいセル結合ですが、隣の列（縦ライン）と結合したい場合は #colspan# 、上下の行と結合したい場合は#rowspan#と表記します。
-
- 編集画面
-
- 表示
ただし、セルを結合すると並び替えの機能が使えなくなる点に注意しましょう。
CSSの追加方法
CSSは子テーマのCSSや、カスタマイズ＞追加CSS、プラグインなどで追記すれば反映されるでしょう。
WordPressで記事ごとに個別のcssを追加する色々な方法
他、「プラグインのオプション」でCSSを追記することで、テーブルプレスの管理画面上に追加することも可能です。
ヘッダーとフッターのカスタマイズ
ヘッダー（最上部の見出し）やフッターの背景色や太字などはテーブルプレスのデフォルト設定がCSSで決められています。（フッターのチェックはデフォルトでOFF）
.tablepress tfoot th,
.tablepress thead th {
background-color: #d9edf7; /* 見出しの背景色 */
font-weight: 700; /* 太字 */
vertical-align: middle; /* 上下揃え中央 */
}
thead th はヘッダー（見出し）のセル、tfoot thはフッターのセルを表しています。
このまま上書きすればフッターヘッダー共通でデザインを変更できます。
.tablepress tfoot th,
.tablepress thead th {
background-color: #efefef; /* 薄い灰色に変更 */
font-weight: normal; /* 普通の太さ */
vertical-align: top; /* 文字を上揃え */
}
文字サイズを変更したい場合はfont-sizeなども追加しましょう。
左右中央寄せにしたい場合はtext-alignを追加します。
.tablepress tfoot th,
.tablepress thead th {
background-color: #efefef;
font-weight: normal;
vertical-align: top;
font-size: 18px;
text-align: center;/* 右寄せならright */
}
もしフッターとヘッダーで指定を分けたい場合は以下のように分割します。（コードは背景色だけ記載します）
/* ヘッダーだけに適用されるCSS */
.tablepress thead th {
background-color: #ffe7e7;
}
/* フッターだけに適用されるCSS */
.tablepress tfoot th {
background-color: #ebe8ff;
}
枠線
枠線についてはテーマ側で設定されていることがほとんどです。以下のようなCSSを追記すれば変更できます。
.tablepress thead th,
.tablepress tbody td,
.tablepress tfoot th {
border: 2px solid #333;
}
ヘッダーフッター以外のセル
ヘッダー、フッター以外のセルについては以下の形でカスタマイズ可能です。
.tablepress tbody td {
color:#333;
font-size:16px;
text-align:center;
}
余白
コンパクトに表示したいときは余白も調整したくなる場合があります。こちらも変更可能です。
.tablepress td,
.tablepress th {
padding: 3px;
}
3px という設定は上下左右に3pxの余白を設けることです。
上下と左右で分けたい時は
3px 6px とすれば上下3px 左右6pxの余白が設けられます。
さらに4つ数値を設定すると、左から順に上 右 下 左 の数値となります。
この辺のカスタマイズ方法が分かっていれば、あとはCSSの記述{}内に何を記述するかで色々と変更が可能になるでしょう。こちらは完全にCSSのお勉強になります。
応用 テーブルごとにCSSでデザインを変更する場合
さて、ここまでの記述方法はテーブルプレスで生成したテーブル全てに適用されるCSSになります。
もし、テーブルごとにCSSを追加したい場合は以下のような方法がおすすめです。
テーブルの一覧には左端にIDの列があり、作成順に1からIDが割り振られます。このIDを利用して個別のカスタムが可能です。
このIDが1なら、HTML上にtablepress-1というIDが割り振られます。
共通の記述の後に個別のIDに対する記述を加えることで、テーブルごとのカスタマイズが可能になります。
#tablepress-1 thead th {
/* IDが1のヘッダー見出しに対する記述 */
color:red;
}
#tablepress-1 tfoot th {
/* IDが1のフッター見出しに対する記述 */
color:blue;
}
#tablepress-1 tbody td {
/* IDが1のその他セルに対する記述 */
color:orange;
}
IDが2なら#tablepress-2、3なら#tablepress-3となります。
以上、参考にしていただければ幸いです。