つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~表の書式設定

1. 表の書式設定

 表の書式を少しだけ変更してみた。デフォルトの書式も気に入っているので、線は少しグレイ色を濃く、セル色は見出しのみで色を薄い青にした。 変更の方法は、デザインのカスタマイズ-デザインCSSに以下のCSSコードを記述する

/*表*/
.entry-content table th{ /*表の見出し設定*/
  border: 1px solid #888888; /*罫線の設定, 太さ,線種,色*/
  background:#E6FFE9; /*セル色*/
}

.entry-content table td{ /*表のセル設定*/
  border: 1px solid #888888; /*罫線の設定, 太さ,線種,色*/
}

.entry-content table thで表の見出しセル(一番上)のみ、.entry-content table tdで見出し以外の一般のセルにデザインが適用される。 表を作成してみると、以下のようにデフォルトの表が変更されている。

項目1 項目2 項目3
A 1 12.5
B 2 35.8

ブログ内過去の表もデザイン変更が適用されているので、デフォルトのものは表組みをつくる(表組み記法) - はてなダイアリーのヘルプなどを参照してほしい。

 今回はセル色と線だけを変更したが、他にも余白などの設定ができる。なおデザインの変更なのですべての表に適用されてしまうことを注意しておかなければならない。(個別に変更する場合は、Excel等で表を作成して、画像として張り付けるぐらいしか思いつかない) 他にもHTMLコードで操作する方法がある。(はてなブログで表を作成する方法とデザインをカスタマイズする方法を紹介しますの! - 元IT土方の供述など参照)