エントリ一覧の背景色を行ごとに交互に変えたい

CMS Designerを「こんな風に使ってます」等の活用事例や、自分なりのTIPS等のご報告をお待ちしています。
返信
webmaster
Site Admin
記事: 1451
登録日時: 2004年12月10日(金) 10:09

エントリ一覧の背景色を行ごとに交互に変えたい

投稿記事 by webmaster » 2005年12月09日(金) 10:05

 エントリ一覧の背景色を交互に変えたい時があると思います。

 これも xsl:if を使って切り替えます。
 考え方としては、「偶数行はこの色、奇数行はこの色」というようにします。

 偶数行かどうかの判定には、おなじみの position() を使います。
 偶数とは、2で割って割り切れる、つまり2で割ると余りが0になる数のことです。
 そこで、

<xsl:if test="position() mod 2=0">

 と書くと、「偶数行なら」という意味になります。modとは+や-、*などと同じく
計算をする為の記号(演算子)で、「余りを求める」演算子です。

<xsl:if test="position() mod 2=0">
 ここに偶数行のデザインを記述。
</xsl:if>

<xsl:if test="position() mod 2=1">
 ここに奇数行のデザインを記述。
</xsl:if>

 上記のようにすれば、とりあえずOKです。
 偶数行と奇数行で写真の位置を左右に切り替えたい時などにも応用できます。

 しかし、偶数行と奇数行のデザインがほとんど同じで、単に背景色を変えたい
だけ、というような場合には、無駄が多い記述になってしまいます。

 単にdivタグのclass名を切り替える、というような事はできないのでしょうか。
 XSLTには、出力するタグの属性を追加する xsl:attribute という命令があります。

<div>
<xsl:attribute name="class">
<xsl:if test="position() mod 2=0">evenrow</xsl:if>
<xsl:if test="position() mod 2=1">oddrow</xsl:if>
</xsl:attribute>
</div>

 これで、偶数行の場合は <div class="evenrow"> となり、奇数行の場合は
<div class="oddrow">となります。

返信