ラベル color の投稿を表示しています。 すべての投稿を表示
ラベル color の投稿を表示しています。 すべての投稿を表示

2013年7月29日月曜日

TablePressでテーブル作成


TablePress で table を作ってみました。

TablePress の plugin をインスールした常態では細かなテーブルの設定ができないようになっております。


TablePress で細やかなテーブルの設定は CSS を変更(?)というのか、新たに作成というのか・・、CSS の指定が必要となります。

今回、私が作成した table は width=450, height=90 のバナーです。 そして文字は左右上下とものセンターに来るように設定しました。

それを tablepress で行うには、使用する各テーブルごとに CSS を作成します。


CSS と遊ぶには、tablepress の table 作成画面の custom CSS をクリックして専用の画面で作業をします。 下記の画面が Custom CSS の作業画面となります。

CSS の詳細は、TablePress の公式サイトに非常に解り易く解説されていますので、そちらを参考なさってください。



 たとえば、テーブルの横幅を 450px に設定するには、下記のように記載します。


.tablepress-id-N .column-1 
{
  width: 450px !important;
}
 
上記の tablepress-id-N の N の部分には、変更を加えたい 
table の番号を入れます。
たとえば、変更を加えたい tabele が [table id=7 /] 
だったら N の部分を 7 に置き換えます。
 もし、[table id=1 /] で使用したければ N を 1 に
置き換えます。
 
たとえば、[table id=7 /] で、上下左右ともに文字を真ん
中に配置したい場合には下記のように CSS を書いてくだ
さい。
 
 .tablepress-id-7 .row-1 td {
 font-weight: bold;
 vertical-align: middle;
 text-align: center;
}
 
たとえば、文字のサイズを変更したければ下記のようにな
ります。
 
.tablepress-id-7 {
 font-size: 36px;
 color: #ffffff;
}

Tablepress の公式サイト中の faq には、テーブルに関して
知りたいことが網羅されているとおもいます。
英語ですが、それほど難しくはないと思います。