[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プラグインを標準機能で実現」

この記事を書いた人

川井 昌彦
川井 昌彦
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Vektor Passport(ライセンス期間1年)
VK Filter Search Pro
Vektor WordPress Solutions
PAGE TOP