STINGER5の記事内にテーブルを挿入

2015-01-11

STINGER5の記事内にテーブルを使いたい時、デフォルトでは下記のようなテーブルが作成されます。

今日の天気	晴れのち雪のちにわか雨
今回のテーマは？	STINGER5のテーブルについてです。
STINGER5を選んだきっかけ	カスタマイズが簡単と、ネットの記事を見たからです。
趣味は？	ガーデニングです。

????????

一行おきに、セルに色が付くテーブルです。

スタイルシートの記述は、/*テーブル */のこの部分です。
　　　　　↓↓
.post table tr:nth-child(even) { background-color:#f3f3f3; }

このnth-child(n)は、疑似クラスの一種で、 n番目の子となる要素にスタイルを適用させることができます。
STINGER5では、テーブルの偶数（even）番目の tr 要素に、背景色が指定されています。

この(n)には、
(odd) 整数・奇数を表す
(even) 偶数を表す
などが入ります。

親テーマのスタイルシートのテーブルを無効にする

私は、複数のデザインのテーブルを使いたいので、自分なりに幾つかのデザインをクラス分けをして作りました。
最初に、親テーマのスタイルシートのテーブル部分を無効にしました。（使わないので、削除してもいいのですが、残しておきたかったので）
/*　*/　で囲まれた部分が無効になります。

/*テーブル */
/*
.post table {
        border-top: 1px #999 solid;
        border-right: 1px #999 solid;
}
*/

/*
table tr td {
        padding: 10px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-bottom-color: #999;
        border-left-color: #999;
        font-size: 14px;
        line-height: 25px;
}
*/

/*
.post table tr:nth-child(even) {
        background-color:#f3f3f3;
        }
*/

子テーマにもう一つのスタイルシート

テーブルのクラスを子テーマのスタイルシートに記述しますが、
私は自分なりに整理する意味で
テーブル専用のスタイルシート（table.css）を作って、子テーマと同じディレクトリへアップロードしました。
専用のスタイルシートにはクラス分けしたテーブルデザインをバンバン書いていきます。

テーブルのスタイルシートを反映させるために、子シートへ記述します。
これをしないと、永遠に反映されません。
子テーマに記述する場合は、この作業は必要ありません。

@charset "UTF-8";
/*
Theme Name: stinger5_child
Template: stinger5ver20141123
*/
@import url('../stinger5ver20141123/style.css');
@import url("table.css");

WordPress	STINGER5	有料
○	○	△

クラス分けをすれば、例えば上のようなデフォルトとは違ったデザインの表をいろいろ追加していけます。

css　↓

.t_01{
 width: 100%;
 font-size:13px;
 border-collapse: collapse;
 border: 1px solid #666;
}
.t_01 th{
 padding: 6px;
 text-align: left;
 border-left: 1px dotted #fff;
 color: #fff;
 background: #444;
 }
 .t_01 td{
 padding: 6px; 
 border-left: 1px dotted #666ff;
 background-color: #fff;
 border-bottom: 1px dotted #6666ff;
 }

html 　↓

<table class="t_01">
<tr><th>項目1</th><th>項目2</th></tr>
<tr><td>データ1</td><td>データ2</td></tr>
</table>

????????