株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

TablePressのカスタムCSSを使って表を装飾する

      2014/04/16

シスアナコム社長の杉山です。

相変わらずワードプレスでウェブサイトを作り続けています。

さて、ワードプレスを使っている方なら、「TablePress」というプラグインも一緒に使っていると思います。

このプラグイン、とっても便利で表を簡単に作ることが出来ます。

表を使うとウェブサイト上の文字をきれいに配置できるので、HTMLでウェブサイトを作っていた時代から表は重宝されて使われています。

TablePressで簡単な表を作るための説明は、いろんなサイトにありました。

でも、カスタムCSS(カスケーティングスタイルシート)を使って表を装飾する方法が解説されているサイトが少なかったので、備忘録としてまとめてみます。

こんな表を作りたい

例えば、こんな5行4列の表があります。

テーブルのオプション設定は以下の通り。

  • オン:テーブルの最初の行はテーブル見出しです。
  • オン:連続する行の背景色を別々の色にします。
  • オフ:マウスカーソルを行に合わせている間、行の背景色を...
  • オフ:このテーブルで次のDataTablesJavaScriptライブラリの...
商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤11,9801,980
インスタントラーメン298196

この表に対して、こんな装飾をしてみましょう。

商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤31,9801,980
インスタントラーメン298196

表の列幅を指定する方法

まずは表の各列の幅を指定する方法ですが、ここはCSSの知識は不要。

TablePressで作った表を文章に挿入する場合、こんな感じでショートコードを入れます。

[table id=テーブルID /]

表の幅を同時に指定する場合は、各列の幅をこのように記述します。

[table id=テーブルID column_widths="200px|50px" /]

商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤11,9801,980
インスタントラーメン298196

幅を指定しない列は自動的に調整されるみたい。

各列の幅は割合で指定することもできますので、こんな感じで指定することにします。

[table id=テーブルID column_widths="40%|20%|20%|20%" /]

商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤11,9801,980
インスタントラーメン298196

ヘッダとデータ領域の装飾

テーブルのヘッダ領域とデータ領域に対する装飾をします。

TablePressの画面上に「プラグインのオプション」というタブがあります。

ここに「フロントエンドオプション」という項目があり、カスタムCSSを記述できます。

テーブルヘッダの文字を中央に寄せて、文字を青にして、枠線を付けます。

.tablepress-id-テーブルID th {
text-align: center;
color: blue;
border: solid 1px #ddd;
}

商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤11,9801,980
インスタントラーメン298196

テーブルデータの文字を右寄せにして、枠線を付けます。

.tablepress-id-テーブルID td {
text-align: right;
border: solid 1px #ddd;
}

商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤11,9801,980
インスタントラーメン298196

特定のセルを指定して装飾

最後に、特定のセルの背景を黄色にして、文字を赤にすれば完成です。

.tablepress-id-テーブルID .row-2 .column-2,
.tablepress-id-テーブルID .row-4 .column-3,
.tablepress-id-テーブルID .row-3 .column-4 {
background: yellow;
color: red;
}

商品名数量単価金額
ガム101681,680
82842,272
ビタミン剤31,9801,980
インスタントラーメン298196

TablePressは優秀なプラグインなので、何も装飾しなくても、ある程度はきれいな表になります。

しかし、少し装飾するだけで見た目はかなり良くなるので、色々と設定してみましょう。

では。

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です