プラグインTablePressで、テーブルが簡単に作れた！

2014-02-27 Thu

TablePressっていうプラグインをインストールして、有効化して、プラグインのオプション設定をしたら、こんなテーブルを作ることができました。

りんご・みかんの数

--	机の上	テーブルの上
りんご	１個	１０個
みかん	８個	4個

オプション設定の箇所にcssを書けば全tableに適用されるデザインを指定することができるようです。
（tableそれぞれに、固定ＩＤが振られるようなので、個々に違う設定をすることも可能です）

さてさて、プラグインTablePressをインストールして、有効化すると管理画面に「TablePress」というメニューができました。

ここでテーブルを作る「編集画面」が表示されるのでいろいろやってみたら、なんとかなりました。

ここに表示されているショートコードをコピーして、投稿画面へ行き、お好きな行へ貼り付けます。そうすると、「編集画面」で作ったものが書き出されるということです。

「プラグインのオプション」タブに、カスタムＣＳＳを書き込めるところがあるので、ここにcssを書くと適用されます。全テーブルへの書き出しも、個々にもＩＤやclassが振られるので、それを見て工夫できそうです。

下は私が書いた一部です。あんまり参考になりませんけど。

h2.tablepress-table-name {
	margin-bottom: 0;
	padding: 5px 20px;
	line-height: 1;
	background-color: rgba(255,136,204,0.1);
	font-size: 1.2em;
	font-size: 1.2rem;
	border-left: 5px solid #ff33aa;
}

.tablepress tfoot th,
.tablepress thead th {
	background-color: rgba(0,170,204,0.5);
}

.tablepress th,
.tablepress td {
	font-size: 14px;
	line-height: 1.2;
}

ショートコードを張り付けるだけなんて、素敵です。ショートコードの意味はよくわかってませんけどw

慣れると楽にテーブルが表示できそうです。スタイルシートの適用がうまく行けばデザインも工夫できるかと思います。下のテーブルは、文字を右寄せにしてみたり、ヘッダthをピンクにしてみたところです。