MovableType ちょっと変わった2カラムレイアウトを組みたいんだってばよ!

2011年3月9日 by Sachio Maruyama

こんにちは。QBと契約したい丸山です。
ユーザーコミュニティで似たような例を回答済みの内容になりますが、少し特殊な2カラムレイアウトの組み方について紹介です。

MTQ | Movable Type 5 ユーザーコミュニティ

mt:Entriesやmt:Categoriesなどのループ系タグで左右に分けてレイアウトしようとした場合、
通常は以下のようなレイアウトになるかと思います。
図:通常の2カラムレイアウト

この場合はCSSでうまく指定ができていればクラス指定もいりませんし、
クラスを指定したい場合でも__odd__や__even__という変数が最初から容易されているので容易に組むことができます。

<mt:Entries>

<mt:If name="__first__">
<ul>
</mt:If>

<mt:If name="__odd__">
<li class="odd"><$mt:EntryTitle$></li>
</mt:If>

<mt:If name="__even__">
<li class="even"><$mt:EntryTitle$></li>
</mt:If>

<mt:If name="__last__">
</ul>
</mt:If>

</mt:Entries>

ですが、分け方をしてみたい場合。
図:特殊な2カラムレイアウト

JavaScriptでも使わない限り、中間の4と5の間でブロックを区切る必要があるので、
総ループ数÷2で中間点を出してその位置で区切ります。(割り切れない場合は切り上げとする)

<$mt:EntriesCount setvar="count"$>
<$mt:Var name="count" op="/" value="2" setvar="halfCount"$>
<$mt:Var name="halfCount" op="+" value="0.5" sprintf="%d" setvar="halfCount"$>

<mt:Entries>

<mt:If name="__first__">
<ul>
</mt:If>

<li><$mt:EntryTitle$></li>

<mt:If name="__counter__" eq="$halfCount">
</ul>
<ul>
</mt:If>

<mt:If name="__last__">
</ul>
</mt:If>

</mt:Entries>

TopLevelCategoriesなどでは__counter__のような特殊変数が使えないので、一度配列に入れる必要がありますが、それさえクリアすれば内容が何件でも中間を出すことができます。
変数の定義とIF文を拡張すれば3カラム以上も対応可能です。

稀に要求される並び方ですので、覚えておいてもいいかもしれませんっ。

  • Index
  • Back
  • Index
  • Back
  • スマートフォンサイト構築

スタッフ

  • 平竹仁士
  • 河西裕一
  • 柳澤健一
  • 小林秀太郎
  • 丸山幸男