derric.org

MovableType:タグクラウドの表示を調整する

| トラックバック(0)
MT4のタグクラウドウィジェットは、デフォルトだと名前順で並ぶようです。
これを変えたくて、テンプレートを少し変更しました。
最初の状態は以下です。

<mt:Tags top="20">
<mt:If name="__first__">
<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <ul>
            </mt:If>
            <li class="rank-<$mt:TagRank max="10"$>"><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></li>
            <mt:If name="__last__">
        </ul>
    </div>
</div>
</mt:If>
</mt:Tags>

以下のように表示されます。
タグクラウドの表示1

今は名前順に並んでいますが、MTTagsのモディファイアを追加することで表示ルールを変更します。
>> MTTags | テンプレートタグリファレンス

<mt:Tags type="entry" glue="" sort_by="rank | modified_on" sort_order="descend" top="50">
<mt:If name="__first__">
<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <ul>
            </mt:If>
            <li class="rank-<$mt:TagRank max="10"$>"><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></li>
            <mt:If name="__last__">
        </ul>
     </div>
</div>
</mt:If>
</mt:Tags>

すると以下のように表示順が変わります。
この場合は、利用頻度と更新日時を考慮するように指定しています。
タグクラウドの表示2

さらにCSSでデザインを調整します。
よくあるのは、ランクが高いほど文字が大きく表示されるパターンですが、個人的にあまり好きではないので、色と明度でランクのコントラストを表現します。

/* タグクラウドウィジェット */
.widget-tag-cloud ul {
    padding: 5px 0 0 0;
    list-style: none;
}
.widget-tag-cloud li {
    display: inline;
    white-space: nowrap;
}
.rank-1 a {
    color: #006;
}
.rank-2 a {
    color: #039;
}
.rank-3 a {
    color: #06c;
}
.rank-4 a {
    color: #09f;
}
.rank-5 a {
    color: #999;
}
.rank-1 a:hover, .rank-2 a:hover, .rank-3 a:hover, .rank-4 a:hover, .rank-5 a:hover {
    color: #f39;
}

最終的に以下のように表示されます。
タグクラウドの表示3

「white-space: nowrap;」は、単語が途中で折り返さないようにするために指定しています。

今回は取り敢えずこれで完了です。

トラックバック(0)

トラックバックURL: http://tech.derric.org/mt/mt/mt-tb.cgi/6

ページトップへ