タグクラウドのタグとCSS

タグクラウドを設置

MovableTypeは記事にタグをつけることができるので、私のサイトにもタグクラウドを設置してみました。タグの利用頻度に応じて、文字のサイズや色を変化させ、コンテンツを利用者に視覚的に理解してもらうことができます。タグクラウドを知らない方のために、はてなブックマークのタグクラウドの例を掲載してみました。

タグクラウドは文字のサイズ、色の濃淡があることで視覚的な理解を早めることができますね。

私のタグクラウドは、タグの使用回数に応じて文字サイズとフォントカラーを変えるようにしています。相対的にランク（６段階）決めを行い、それぞれのランクにCSSを指定して表示しています。

文字サイズは相対的に表示し、低いランクは薄いカラーリングを使い、高いランクには濃いカラーリングと font-weightにboldを加えました。

MT向けのタグクラウドソース

<MTTags>
<MTSetVarBlock name="tags"><$MTTagName$></MTSetVarBlock>
<MTSetVarBlock name="sorthash" key="$tags"><$MTTagLastUpdated format="%Y%m%d%H%M%S"$></MTSetVarBlock>
<MTSetVarBlock name="tag_count" key="$tags"><$MTTagCount$></MTSetVarBlock>
<MTSetVarBlock name="tag_rank" key="$tags"><$MTTagRank$></MTSetVarBlock>
<MTSetVarBlock name="tag_date" key="$tags"><$MTTagLastUpdated format="%Y-%m-%d"$></MTSetVarBlock>
<MTSetVarBlock name="tag_link" key="$tags"><$MTTagSearchLink$></MTSetVarBlock>
</MTTags>
<ul id="tags">
<MTLoop name="sorthash" sort_by="value numeric reverse">
<MTIf name="__counter__" le="30">
<li class="rank-<MTGetVar name="tag_rank" key="$__key__">"
title="<MTGetVar name="__key__">:<MTGetVar name="tag_count" key="$__key__">:<MTGetVar name="tag_date" key="$__key__">">
<a href="<MTGetVar name="tag_link" key="$__key__">"><MTGetVar name="__key__"></a></li>
</MTIf>
</MTLoop>
</ul>

上記のタグに対応したCSS

/*------------タグクラウド------------*/

#tags * {
margin: 0;/*ul タグのマージン／パディングを初期化します */
padding: 0;
list-style: none;
}

#tags {
margin: 0;
padding: 0;
list-style: none;
}
#tags li {
margin: 0;/* li タグのマージン／パディングを初期化します */
padding: 0;
display: inline;/*各タグを横に並べます */
line-height: 1.7;/* 各タグの行間を設定します */
}

#tags li a {
padding: 0 .1em;/* タグ間の余白を設定します */
text-decoration: none;/*アンカーのアンダーラインを消します */
color: #f3f5ef;/* リンク(タグ)の初期カラーを設定します */
}

#tags li.rank-1 a {
font-size: 167%;
font-weight: bold;
color: #3d881a;
}

#tags li.rank-2 a {
font-size: 136%;
font-weight: bold;
color: #76c246;
}
#tags li.rank-3 a {
font-size: 122%;
font-weight: bold;
color: #66bc50;
}
#tags li.rank-4 a {
font-size: 114%;
color: #84be76;
}
#tags li.rank-5 a {
font-size: 92%;
color: #98d299;
}
#tags li.rank-6 a {
font-size: 77%;
color: #c3d1c0;
}

#tags li a:hover {
text-decoration:underline;
}

タグ数が多くなれば見苦しくなってしまいますし、古いタグばかりが強調され、見てもらいたい記事が埋もれてしまいます。将来的に記事が増えれば最新記事の中で使われているタグだけを表示するような仕様に変更したいと思います（更新が続けば・・・笑）。

関連記事

• Movable Typeのタグを使って関連記事を表示
• W3C CSS 検証サービス
• Movable Type 4.23リリース
• リンクのカラーと装飾
• 引用符を使ったblockquoteのデザインとCSS
• 書籍「HTML+CSS Handbook 3rd Edition」
• リンクする際の警告文を表示させない方法
• 書籍「Movable Type 4.x」
• HTML記号変換