交互に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',

---

---

使い方

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

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

---