アットウィキ(@WIKI)ご利用ガイド
テーブルの背景色を行ごとに変更する(上級者向け)
最終更新:
guide
-
view
テーブルの文字色/背景色を行ごとに変更する(上級者向け)
アットウィキモードでのテーブル作成すると行(<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行目は | 緑文字 | です |
と表示されます。
設定手順
1.管理画面のメニューから[デザイン] → [CSSカスタマイズ]をクリックする。2.CSSを入力し、ページ下部の[設定を保存]をクリックする。
[CSSカスタマイズ]ガイド一覧に戻る