« Single Line CSS | ホーム | 似顔絵 »
2007年8月 1日
MTで奇数行、偶数行ごとに背景色をつける方法
ブロックタグ内で使える変数を利用して、奇数行(odd)と偶数行(even)にわけてclassを指定することができます。偶数行と奇数行にわけて配色したいというときに非常に便利。これだけでデザインの幅がかなり広がる。右側の「最近のブログ記事」の一覧で実践してみました。作成したテンプレートは下記のようなかたち(不要な箇所は割愛しています)。
<MTEntries lastn="10"> <li class="widget-list-item <MTIf name="__odd__">odd</MTElse>even</MTIf>"> <a href="<$MTEntryPermalink$>" ><$MTEntryTitle$></a></li> </MTEntries>
そして適用したCSSは下記のような感じ。
.widget-archives .widget-header {border:none; padding-bottom:0; margin-bottom:0;}
.widget-archives ul {border:1px solid #ddd;}
.widget-archives li {margin:0;padding:0; overflow:hidden;}
.widget-archives li {display:inline;}
.widget-archives li a {display:block; padding:5px;}
.widget-archives li.odd a {background-color:#f0f0f0;}
.widget-archives li.even a {background-color:#e6e6e6;}
.widget-archives li.even a:hover {background-color:#FFA6E9;}
.widget-archives li.odd a:hover {background-color:#FFBFEF;}
これで完了。MTEntriesの他に、MTCommentsでも利用可能。コメントの場合で、たとえばエントリーの投稿者のコメントには特別のCSSを入れたいという場合には、<MTIfCommenterIsEntryAuthor>author</MTIfCommenterIsEntryAuthor> というような形で、authorというclassを追加すると良いかもしれない。
トラックバック(1)
タグリファレンス:MTif MT4から追加されたMTIfタグ | MT エンジニアブログ | スカイアークシステム Movable Type 4 から追... 続きを読む

コメント