MT4.1 では、MTElse ブロックタグも拡張され、テンプレートでより複雑な条件式を作成することができます。それを使ってリストをストライプ表示させる方法を紹介します。
MovableType4.1でエントリーリストはじめ、コメントトラックバックなどのリスト表示をストライプにする変数設定について紹介します。
MT3.3xでは、MTRoundRobin:一覧表示で交互に背景・文字色をかえるで紹介していたMTRoundRobinというプラグインを使って、記事リストをストライプにして表示させていました。
新しいMovableType4.1では、そうしたプラグインは必要なく、変数を設定し条件分岐させることで、対象の要素に奇数偶数回数目で設定内容を指定してページ生成することが可能です。この変数指定での条件分岐を使って、奇数、偶数の要素に対してclass指定を交互に変えて生成するようにすれば、cssの設定だけでストライプ表示をさせることが可能となります。
参考になるエントリーは、こちらの拡張された MTElse タグを利用した複雑な条件分岐 | MovableType.jpを読んでみるとその内容がわかると思います。
また、サンプルページは、MovableType.jpにて最近のブログ記事リストがこの方法を使って、ストライプ表示をさせていると思われます。
要素をストライプ表示
MTIfとMTElseを使って条件分岐する。MTIfの変数に__odd__を設定する。これを各リストのタグのclass指定に付加することで、ページが生成される時に、交互にclass指定を変えることができます。
例えば、ブログの最新記事のリストをストライプ表示させるには、以下のようなテンプレートタグとなります。
リストタグのclassに
変数__odd__の指定は、奇数回目の場合 ture (1) となり、oddがclass指定されます。反対に偶数回目の場合は、falseとなり、<MTElse>以下のevenがclass指定されることになります。
あとは、cssでoddとevenに対して、表示方法を異なるように設定するだけでストライプ表示させることができます。
実際にこのブログでも最新記事のエントリーリストにおいて、classにodd、evenを交互に指定され生成表示されています（まだ、css設定していません。）。firebugなどでのぞいてみてください。
今回は、最近のブログ記事のリスト表示のタグをサンプルに使って紹介しましたが、このほかにもサイト内検索結果の表示をはじめ、コメント・トラックバックなどさまざまな部分でのリスト表示このストライプを使ってみるとユーザーにも見やすい・読みやすいページ閲覧を提案することができるようになると思います。ぜひ、カスタマイズしてみてください。
jQueryでもTable Striping Made Easy - Javascript Tutorials - 15 Days Of jQueryにて、テーブルストライプの方法が解説されています。これを応用して、javascriptを使ってclass指定を変えることもできのですが、そこまで面倒なことをしなくても、MT側で変数を設定しておいた方が無難かと思います。
MTIFで設定できる便利な変数
その他使える変数は、こちらのMovable Type 4のブロックタグ内で使える変数 - The blog of H.Fujimotoを読んでみるとわかります。その他の変数の使い方を覚えるとまた、新しいページ生成の方法を知ることができ、新しいサイト構築アイデアを考えるための要素にもなると思います。
こちらの Movable Type 4.1 で追加された タグMTFor | テンプレートタグリファレンスで紹介されている特別な変数も参考になります。また、たぶんですが、こちらで紹介されている特別な変数もMTIfに設定できるのかとも思います（確かめていませんが、たぶん使い回しできるようにシステムが作られているはず）。
コメントする