管理画面/デザイン/CSSカスタマイズ/テーブルの背景色を行ごとに変更する（上級者向け） - アットウィキ(@WIKI)ご利用ガイド

テーブルの文字色/背景色を行ごとに変更する（上級者向け）

アットウィキモードでのテーブル作成すると行(<tr>)ごとにatwiki_tr_行番号というclassが付加されます。
また、奇数行・偶数行ごとにそれぞれatwiki_tr_odd・atwiki_tr_evenというclassが付加されます。
これらとCSSカスタマイズを利用して頂くことでテーブルの文字色・背景色を行ごとに変更することができます。

注記：今回の例では#dividを使うことで、CSSの適用範囲を限定しています。

---

奇数行・偶数行で文字色/背景色を変える

CSSカスタマイズで

div#atwiki_table_sample tr.atwiki_tr_odd {
color: #fff;
background: #999;
}
div#atwiki_table_sample tr.atwiki_tr_even {
color: #999;
background: #fff;
}

と設定し、

#divid(atwiki_table_sample){
|1行目は|奇数行|です|
|2行目は|偶数行|です|
|3行目は|奇数行|です|
|4行目は|偶数行|です|
}

上記のように入力すると

1行目は	奇数行	です
2行目は	偶数行	です
3行目は	奇数行	です
4行目は	偶数行	です

と表示されます。

---

行単位で文字色/背景色を変える

CSSカスタマイズで

div#atwiki_table_sample2 tr.atwiki_tr_1 {
color: #fff;
background: blue;
}
div#atwiki_table_sample2 tr.atwiki_tr_2 {
color: #fff;
background: #999;
}
div#atwiki_table_sample2 tr.atwiki_tr_3 {
color: blue;
background: #fff;
}
div#atwiki_table_sample2 tr.atwiki_tr_4 {
color: green;
}

と設定し、

#divid(atwiki_table_sample2){
|1行目は|白文字、青背景|です|
|2行目は|白文字、灰色背景|です|
|3行目は|青文字、白背景|です|
|4行目は|緑文字|です|
}

上記のように入力すると

1行目は	白文字、青背景	です
2行目は	白文字、灰色背景	です
3行目は	青文字、白背景	です
4行目は	緑文字	です

と表示されます。

設定手順

１．管理画面のメニューから[デザイン] → [CSSカスタマイズ]をクリックする。

２．CSSを入力し、ページ下部の[設定を保存]をクリックする。

[CSSカスタマイズ]ガイド一覧に戻る