ウチのリンクページは、ブログ記事を小さい矩形にして横に並べています。
これを実現するには、以下のような問題があります。
- 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八王子など登壇多数
最新の投稿
ご質問・ご相談などありましたら
お気軽にお問い合わせください
資料請求・お問い合わせにはメールアドレスが必要です
コメントを残す