tablepressのカスタマイズ

アフィリエイトボンバー

コピペで出来るtablepressのカスタマイズ

 

アフィリエイトサイトを作っていると何かとテーブル(表)を作る機会が出てきますよね。

デフォルトの表でも良いんですが私はプラグインのtablepressを使ってます。

tablpressは作成したテーブルをショートコードで簡単に挿入出来るので頻繁に使うデータや料金表等を入れたい時に便利です。

後CSV形式でインポート、エクスポート出来るので他のサイトにも使いまわしが出来ます。

エクセルで作った表もCSV形式で保存すればインポート出来るのでまあいろいろ便利です。

ただ、初期設定だといろいろ不満もあるので自分のメモ書きついでにカスタマイズを書いておきます。

tablepressのカスタマイズ

初期設定のままでは下画像のように何故か縦の線が入りません。なんででしょうね。アメリカだと横線だけが基本なの?

テーブル1

あ、ちなみにtablpressのカスタマイズはプラグインのオプションのカスタムCSSに記述していきます。

プラグインのオプション

すべての枠に線を引く

というわけで縦線の追加と分かりにくいですがデフォルトでは一番上に横線が入っていないのでそれも追加します。


/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid #ccc !important;
}

高さの中央揃え

tableの同じ行に1行の説明、2行の説明が交ると下の画像のようになってしまいます。結構不格好ですね。

テーブル2

下記コードをカスタムCSSに追記すると文字を中央に配置することが出来ます。

.tablepress tbody td {
	vertical-align: middle;
}

テーブル3

見出しのカスタマイズ

tablepressでは一番上の行を見出しにすることが出来ます。もちろん見出しにしないことも個別設定により出来ます。

見出しはなんとなく中央にあった方が格好が良いので中央にしましょう。

デフォルトでは薄い水色の背景に黒文字なのでこれもサイトデザインに合わせて変えましょう。

.tablepress thead th {
	color: #好きな文字色 ;
	background-color: #好きな背景色 !important;
	text-align: center !important;
}

結果こうなりました。

 ABC
1会いたい会いたい
会えない会えない
会えない会えない
会えない会えない
会えない会えない
会えない会えない
合わない
2
3
4

 

.tablepress ・・・から始まるところをtablepress-1のようにIDを入力すれば個別にカスタマイズも出来ます。

この表だけは背景別の色にするとか。

 

wordpress    コメント:0

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: