MT4のタグクラウドウィジェットは、デフォルトだと名前順で並ぶようです。
これを変えたくて、テンプレートを少し変更しました。
最初の状態は以下です。
以下のように表示されます。
今は名前順に並んでいますが、MTTagsのモディファイアを追加することで表示ルールを変更します。
>> MTTags | テンプレートタグリファレンス
すると以下のように表示順が変わります。
この場合は、利用頻度と更新日時を考慮するように指定しています。
さらにCSSでデザインを調整します。
よくあるのは、ランクが高いほど文字が大きく表示されるパターンですが、個人的にあまり好きではないので、色と明度でランクのコントラストを表現します。
最終的に以下のように表示されます。
「white-space: nowrap;」は、単語が途中で折り返さないようにするために指定しています。
今回は取り敢えずこれで完了です。
これを変えたくて、テンプレートを少し変更しました。
最初の状態は以下です。
<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>
以下のように表示されます。
今は名前順に並んでいますが、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>
すると以下のように表示順が変わります。
この場合は、利用頻度と更新日時を考慮するように指定しています。
さらに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;
}
最終的に以下のように表示されます。
「white-space: nowrap;」は、単語が途中で折り返さないようにするために指定しています。
今回は取り敢えずこれで完了です。