「管理画面/デザイン/CSSカスタマイズ/テーブルの背景色を行ごとに変更する（上級者向け）」の編集履歴（バックアップ）一覧はこちら

「管理画面/デザイン/CSSカスタマイズ/テーブルの背景色を行ごとに変更する（上級者向け）」(2019/11/19 (火) 15:41:29) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

＊テーブルの文字色/背景色を行ごとに変更する（上級者向け）
アットウィキモードでのテーブル作成すると行(<tr>)ごとに''atwiki_tr_行番号''というclassが付加されます。
また、奇数行・偶数行ごとにそれぞれ''atwiki_tr_odd''・''atwiki_tr_even''というclassが付加されます。
これらと[[CSSカスタマイズ>管理画面/デザイン/CSSカスタマイズ]]を利用して頂くことでテーブルの文字色・背景色を行ごとに変更することができます。

&bgcolor(#FDFA86){&bold(){注記}}：今回の例では[[#divid>http://www1.atwiki.jp/guide/pages/265.html#id_fe3cdaa3]]を使うことで、CSSの適用範囲を限定しています。

#contents(fromhere)

-----

*＊奇数行・偶数行で文字色/背景色を変える
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行目は|偶数行|です|
 }
上記のように入力すると

#divid(atwiki_table_sample){
|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行目は|緑文字|です|
 }
上記のように入力すると

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

と表示されます。

＊＊設定手順
１．管理画面のメニューから&bold(){[デザイン]} → &bold(){[CSSカスタマイズ]}をクリックする

２．CSSを入力し、&bold(){[設定を保存する]}をクリックする

&link_parent(text=[CSSカスタマイズ]ガイド一覧に戻る)

＊テーブルの文字色/背景色を行ごとに変更する（上級者向け）
アットウィキモードでのテーブル作成すると行(<tr>)ごとに''atwiki_tr_行番号''というclassが付加されます。
また、奇数行・偶数行ごとにそれぞれ''atwiki_tr_odd''・''atwiki_tr_even''というclassが付加されます。
これらと[[CSSカスタマイズ>管理画面/デザイン/CSSカスタマイズ]]を利用して頂くことでテーブルの文字色・背景色を行ごとに変更することができます。

&bgcolor(#FDFA86){&bold(){注記}}：今回の例では[[#divid>http://www1.atwiki.jp/guide/pages/265.html#id_fe3cdaa3]]を使うことで、CSSの適用範囲を限定しています。

#contents(fromhere)

-----

*＊奇数行・偶数行で文字色/背景色を変える
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行目は|偶数行|です|
 }
上記のように入力すると

#divid(atwiki_table_sample){
|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行目は|緑文字|です|
 }
上記のように入力すると

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

と表示されます。

＊＊設定手順
１．管理画面のメニューから&bold(){[デザイン]} → &bold(){[CSSカスタマイズ]}をクリックする。

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

&link_parent(text=[CSSカスタマイズ]ガイド一覧に戻る)