1行ごとに交互にclassを付与するゼブラ機能（zebra）

a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能（zebra）の設定が標準で実装されています。（v1.3.0より）

この機能を使用してクラスが付与される要素は次のとおりです。

• tableのtr
• ul, olのli
• dlのdt, dd

サンプル）table要素にゼブラ機能を適用した場合、tr要素にクラスが付与されます。

---

1行目ヘッダ	1行目
2行目ヘッダ	2行目
3行目ヘッダ	3行目
4行目ヘッダ	4行目

出力後のソースコード

<table class="js-zebra">
	<tr class="odd">
		<th>1行目ヘッダ</th>
		<td>1行目</td>
	</tr>
	<tr class="even">
		<th>2行目ヘッダ</th>
		<td>2行目</td>
	</tr>
	<tr class="odd">
		<th>3行目ヘッダ</th>
		<td>3行目</td>
	</tr>
	<tr class="even">
		<th>4行目ヘッダ</th>
		<td>4行目</td>
	</tr>
</table>

---

1行ごとに交互にclassを付与するゼブラ機能（zebra）

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    //-------
    // zebra
    zebraMark       : '.js-zebra',
    zebraOddClass   : 'odd',
    zebraEvenClass  : 'even',

zebraMark	ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。
zebraOddClass	奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。
zebraEvenClass	偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLのtable要素やul要素、ol要素、dl要素に記述します。

例）zebraMarkで「.js-zebra」と指定した場合

---

<dl class="js-zebra">
	<dt>1つ目のdt（1行目）</dt>
	<dd>1つ目のdd（2行目）</dd>
	<dd>2つ目のdd（3行目）</dd>
	<dd>3つ目のdd（4行目）</dd>
	<dt>2つ目のdt（5行目）</dt>
	<dd>1つ目のdd（6行目）</dd>
</dl>

出力後のソースコード

<dl class="js-zebra">
	<dt class="odd">1つ目のdt（1行目）</dt>
	<dd class="even">1つ目のdd（2行目）</dd>
	<dd class="odd">2つ目のdd（3行目）</dd>
	<dd class="even">3つ目のdd（4行目）</dd>
	<dt class="odd">2つ目のdt（5行目）</dt>
	<dd class="even">1つ目のdd（6行目）</dd>
</dl>

CSS

必要に応じてスタイルを指定します。

例）

.odd {
  background-color: #CCCCCC;
}
.even {
  background-color: #FFFFFF;
}

---