※この記事を投稿時のMovable Type(以降MT)のバージョンはMovable Type Pro version 4.21-jaです。

MT4.2になるまでMT3.2のテンプレートをそのまま使っていたのですが、MT4.2移行時にテンプレートを初期化して最新のものから再構築しました。

MT3.2テンプレート時	MT4.2テンプレート(現在）

MT4.2移行時に色々トラブルに見舞われたので、その時にテンプレートタグ（所謂MTタグ）をちょっとかじったので、多少MTタグを使える様になりました。それで、ブログのMT4.2への移行が完了して、多少落ち着いた頃に最初にやってみたのが下のカスタマイズです。MT3.2の頃はウィジェットはオプション扱いでしたが、MT4.2では本体に組み込まれる様になりました。そして、各パーツも最初からウィジェットを使って表示されるようになっていて、位置や順番を自由に変更できるようになっています。MT3.2の頃は各パーツが直でテンプレートに書いてあってそれをウィジェットのタグをテンプレートに埋め込んで自分で元のパーツとウィジェットセットを入れ替える作業が必要でした。

そういうわけで、MT4.2ではデザインのカスタマイズがかなり便利になっています。

そして「最近のブログ記事」の一覧も当然ウィジェットで管理されています。

話が最初から壮大に脱線してますが、「最近のブログ記事」を見たときにわかり難いなーと思ったのです。下の「色分け無し」の方を見ていただけると判ると思いますが、区切りがなくてズラズラ文字が並んでいるので何処までが記事のタイトルなのかよくわかりません。これは見にくいと思ったので、タイトルを交互に色分けして表示する事を考えました。丁度MTタグをすこし覚えていろいろ出来そうだな－と思ってた頃です。

色分けした方を見ていただくと、配色はまー置いといていただいてｗ、タイトルごとの視認性がよくなったと思います。頭にタイトルがスパーンと入ってきます。

色分け無し	タイトルごとに色分け

●タイトルを交互に色分けする方法

さっきも書いたように「最近のブログ記事」はウィジェットに書いてあるので、MTの設定画面＞デザイン＞ウィジェット＞ウィジェットテンプレート＞最近のブログ記事

で、「最近のブログ記事」の定義を見ることが出来ます。

最初は以下のようになっていると思います。

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="20">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">最近のブログ記事</h3>
    <div class="widget-content">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

これを以下のように変更します。または入れ替えます。入れ替えたら、保存してください。

<mt:If tag="BlogEntryCount">
   <mt:Setvar name="cflag" value="1">
    <mt:Entries lastn="20">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">最近のブログ記事</h3>
    <div class="widget-content">
        <ul>
        </mt:EntriesHeader>
        <mt:SetVar name="cflag" value="-1" op="*">
        <mt:If name="cflag" eq="1">
            <li class="cflag1"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:Else>
            <li class="cflag2"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        </mt:Else>
        </mt:If>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

後はスタイルシートに色の定義を行ないます。

MTの設定画面＞デザイン＞テンプレート＞インデックステンプレート＞スタイルシート

でスタイルシートの定義を開きます。

LI.cflag1{ background-color:#ffe4e1; }
LI.cflag2{ background-color:#f5fffa; }

を適当な場所に追加します。

保存と再構築をします。

これで、交互にタイトルが色違いで表示されるようになります。

交互に色違いで表示するときの色の指定はスタイルシートで行なっています。background-colorで指定している色を変える事で交互に表示される色を変更できます。

●簡単にコードの解説

交互に色違いで表示するためにフラグを利用しています。

<mt:Setvar name="cflag" value="1">

この行で変数「cflag」に値「1」を代入しています。

<mt:SetVar name="cflag" value="-1" op="*">

ここがみそです。cflagの値に-1を掛ける算術式になっています。タイトルの表示ごとにフラグの値が「1」「-1」と交互に変わるようにしています。

これは1に-1をかけると-1に、-1に-1をかけると1になるという数学の仕組みを利用したフラグ制御です。

通る経路ごとにcflagに1を代入したり-1を代入したりする事で事足りるのですが、これは完全に好みですｗ。若かりし頃にこのフラグの制御の仕方をみてなるほどと感心したのでこういう交互に何かをって言うフラグ制御の時によく使いますｗ。なにかエレガントじゃないですか？

<mt:If name="cflag" eq="1">
cflagの内容が1の時

ここで分岐を行なって色違いで表示するようになります。Elseとセットですね。

タグ : Movable Type, MT