Arthemia2のCSSをいじくる(テーブル)

WordPressのテーマであるArthemiaは便利なテーマではあるが、tableタグのCSSが貧粗なので、Tableがきれいに表現されない。

デフォルトのtableタグの欠点

  • 線が表示されない
  • 全て左寄せ

最初、tableタグのCSSを直接変更したが、そこをいじると、Widgetのカレンダーのデザインが崩れたので、あらたにclassを追加した。

style.cssに下記のコードを追加する。
表に線を表示する。
幅は100%。
テキストは中央揃え。

[php]
/* tables class追加分 */
.tableclass01 {
border: 1px #ccc solid;
width: 100%;
text-align: center;
border-collapse: separate;
border-spacing: 0;
}

.tableclass01 td {
text-align: center;
border: 1px #ccc solid;
font-weight: normal;
}

.tableclass01 th {
text-align: center;
border: 1px #ccc solid;
font-weight: normal;
}
[/php]

tabelタグのなかに、class=”tableclass01″で指定する。
border=1を指定しているのは、印刷用に使用しているWP-printプラグインで表示される画面には、CSSの設定が反映されない(線が消えてしまう)ので、記述してある。

[php]

以下続く
[/php]

記事の共有:
2012年5月
 123456
78910111213
14151617181920
21222324252627
28293031