[MT4]ブログ記事を横に並べて高さを揃える

ウチのリンクページは、ブログ記事を小さい矩形にして横に並べています。

これを実現するには、以下のような問題があります。

  • CSSで(テーブルを使わずに)内容量の違うボックスの高さを揃えるのが難しい
  • 上記を解決する技(CSSで内容量が異なるボックスの高さを揃える)では、1列ごと(たとえば3個ごと)にボックスをdivで囲む必要があるが、Movable typeで<MTEntries>などを使うと、何個ごととかにタグを書き出すことはできない
    (もしかしたら、offsetモディファイヤとuniqueモディファイヤを駆使すれば出来るかもしれません。誰かやってみてください)

MT4.2からは、<MTEntries>などのループ中で、今、何個目かを数えて、<MTIf>でdivタグを書き出せばいいのですが、標準ではそんな機能はありません。変数__counter__を使って何個目かを数える方法があります。
これは、ほとんどのループ系のブロックタグ中で使用できるのですが、残念ながら、検索結果を表示する<MTSearchResults>の中では使えません。
(実は検索結果表示でも同じ表示をしようとしています)

そこで使えるのが、このプラグインです。
Counterプラグイン

使い方は、ドキュメントや解説ページを見てもらうとして、ここでは1列に3個ずつブログ記事を並べる方法を書いておきます。


<MTCounter> (プラグインを有効(リセット)にする)
 <MTEntries>
 <$MTCounterPlus$> (カウンターを増やす)
 <MTCounterIfMod value=”3″ mod=”1″> (列の1個目のとき、divを書き出す)
 <div class=”column”> (このクラスに、overflow: hidden; を設定)
 </MTCounterIfMod>

 <div class=”box”> (このクラスに、padding-bottom: 32768px; margin-bottom: -32768px;を設定)
  ・・・ (ここに、ブログ記事表示のMTタグを記述)
 </div>

 <MTCounterIfMod value=”3″ mod=”0″> (列の3個目のとき、divを書き出す)
 </div>
 </MTCounterIfMod>
 <MTEntries>

 -ここからは、全ブログ記事表示後の終了処理ー
 <MTCounterIfMod value=”3″ mod=”1″> (列の1個目のとき、divを書き出す)
 </div>
 </MTCounterIfMod>
 <MTCounterIfMod value=”3″ mod=”2″> (列の2個目のとき、divを書き出す)
 </div>
 </MTCounterIfMod>
</MTCounter>

書き出されるブログ記事の合計が3の倍数でないとき、divの閉じタグが書き出されないので、終了処理が必要になります。

counterプラグインは、奇数と偶数を調べたり、値を比較したり、カウントダウンも出来るので、いろいろ用途があります。
ウチのリンクページでは、奇数と偶数で書き出すクラスを変えて、ボックスの背景色を交互に変えるのにも使っています。(奇数か偶数かを調べるだけなら、MovableTypeの変数 __odd__、__even__ で可能です)

(2009.5.24追記)
MT4.1以降では、プラグイン無しで実現できます。「[MT4]MTCounterプラグインを標準機能で実現」

コメントを残す