概要 ▶ Movable Typeのテンプレートいじりのお話。先週福島県郡山で行われたMTDDC Meetup FUKUSHIMA 2010に行ってきて、ちょっとMovable Typeネタを書きたくなったので。（MTDDC：Movable Type Developers & Designers Conference）該当カテゴリーにいるときにタブの色やインデックスの色が変わるってありますよ
本ページはプロモーションが含まれている場合があります
本ページはプロモーションが含まれている場合があります
先週福島県郡山で行われたMTDDC Meetup FUKUSHIMA 2010に行ってきて、ちょっとMovable Typeネタを書きたくなったので。（MTDDC：Movable Type Developers & Designers Conference）
該当カテゴリーにいるときにタブの色やインデックスの色が変わるってありますよね。
例えばこういうの。（会社のページですが）
そういう機能はディレクトリ／パスを分けておけばyuga.js（※）の「現在のページをハイライト表示」機能でも対応できるのですが、そうでない場合でも対応できるようにしてみます。
※yuga.jsについては http://www.kyosuke.jp/yugajs/ をご覧下さい。
手順
最初に変数「this_page_id」に今のページID番号を入れておきます。
<mt:SetVarBlock name="this_page_id"><mt:PageID />
<mt:SetVarBlock name="page_ids_of_print">^(<mt:Pages tag="@print" lastn="1"><mt:PageID /></mt:Pages><mt:Pages tag="@print" lastn="9999" offset="1">|<mt:PageID /></mt:Pages>)$</mt:SetVarBlock>
「@print」のタグが付いているものが変数「page_ids_of_print」に書き出されていきます。
フォーマットとしては「^(ページのIDその1|ページのIDその2|ページのIDその3...)$」になります。
1つしかないときには「^(ページのID)$」とか微妙な感じになりますけど、間違いではないので動作します。
<mt:PagesHeadrer>とか<mt:PagesFooter>とかを駆使してうまくできるかと思ったけど、うまくいかないです。
わかる方はお教え頂けると嬉しいです。
同様に他のタブの分も行います。
<mt:SetVarBlock name="page_ids_of_dtp">^(<mt:Pages tag="@dtp" lastn="1"><mt:PageID /></mt:Pages><mt:Pages tag="@dtp" lastn="9999" offset="1">|<mt:PageID /></mt:Pages>)$</mt:SetVarBlock>
<mt:SetVarBlock name="page_ids_of_words">^(<mt:Pages tag="@words" lastn="1"><mt:PageID /></mt:Pages><mt:Pages tag="@words" lastn="9999" offset="1">|<mt:PageID /></mt:Pages>)$</mt:SetVarBlock>
タブの画像を変更する場合は画像の部分を以下の様にします。
<mt:If name="this_page_id" like="$page_ids_of_print">
<img src="/images/tab-print_down.png" alt="*" width="150" height="50" />
<mt:Else>
<img src="/images/tab-print.png" alt="*" width="150" height="50" class="btn" />
</mt:If>
mt:Ifの部分は、likeモディファイアで変数「page_ids_of_print」を使用します。
「page_ids_of_print」は「^(ページのIDその1|ページのIDその2|ページのIDその3...)$」という正規表現のマッチ用の記述になっているので、変数「this_page_id」とマッチするか調べます。
もしマッチする（＝その属性のページにいる）のであればそこのカテゴリーにいるという画像にします。（ここでは「tab-print_down.png」という画像）
マッチしないなら通常の画像にします。（ここでは「tab-print.png」という画像）
マッチしない場合のimgタグにclassで「btn」と付いているのはyuga.jsの機能で、マウスカーソルがタブ画像の上に来た（ホバーした）時に画像を変化させるためです。（ここでは「tab-print_over.png」という画像を用意しておきます）
他のタブの分も行います。
<mt:If name="this_page_id" like="$page_ids_of_dtp">
<img src="/images/tab-dtp_down.png" alt="*" width="150" height="50" />
<mt:Else>
<img src="/images/tab-dtp.png" alt="*" width="150" height="50" class="btn" />
</mt:If>
<mt:If name="this_page_id" like="$page_ids_of_words">
<img src="/images/tab-words_down.png" alt="*" width="150" height="50" />
<mt:Else>
<img src="/images/tab-words.png" alt="*" width="150" height="50" class="btn" />
</mt:If>
あとは再構築すればオッケーです。