MT タグクラウドの設置

Movable Type
この記事は約3分で読めます。

1 テンプレートに次のコードを追加します。

<ul class=”tagcloud”>
<mt:Tags top=”20″>
<li class=”tcmax tc<$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:Tags>
</ul>

2 スタイルシートに次のコードを追加します。

ul.tagcloud{
margin: 0;
padding: 0px;
line-height: 1.1;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
width: 160px;
}
ul.tagcloud li{
margin: 0;
padding: 0;
display: inline;
font-size: 100%; /* ここで相対的に文字サイズを変更 */
}
ul.tagcloud li a{
padding: 0 5px;
position: relative;
text-decoration: none;
color: #fff;
border: 1px solid #e2edb5;
}
li.tcmax a{
/* カウント20以上のとき(最大) */
z-index: 6;
font-size: 167%;
background-color: #b5d246;
}
li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
/* カウント19~15のとき */
top: 5px;
z-index: 5;
font-size: 136%;
background-color: #c0d860;
}
li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
/* カウント14~10のとき */
z-index: 4;
font-size: 114%;
background-color: #cbe07d;
}
li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
/* カウント9~5のとき */
top: 5px;
z-index: 3;
font-size: 100%;
background-color: #d6e699;
}
li.tc4 a, li.tc3 a{
/* カウント4・3のとき */
z-index: 2;
font-size: 85%;
background-color: #e2edb5;
}
li.tc2 a, li.tc1 a{
/* カウント2・1のとき(最小) */
z-index: 1;
font-size: 70%;
background-color: #edf4d0;
}
ul.tagcloud li a:hover{
border-color: #666;
z-index: 10;
border-color: #a2ba42;
background-color: #b4cc54;
}

(参考記事)
3ping.org:Tag Cloudのスタイル

コメント