交互にclassを付与するゼブラ機能
a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能（zebra）の設定が標準で実装されています。（Ver. 1.3.0より）この機能を使用してクラスが付与される要素は次のとおりです。
- tableのtr
- ul, olのli
- dlのdt, dd
デモ
- 1つ目のdt（1行目）
- 1つ目のdd（2行目）
- 2つ目のdd（3行目）
- 3つ目のdd（4行目）
- 2つ目のdt（5行目）
- 1つ目のdd（6行目）
設定の編集
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
//-------
// zebra
zebraMark : '.js-zebra',
zebraOddClass : 'odd',
zebraEvenClass : 'even',
| zebraMark | ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。 |
|---|---|
| zebraOddClass | 奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。 |
| zebraEvenClass | 偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。 |
使い方
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
必要に応じてスタイルを指定します。
