てんぽ : FC2ブログでタグクラウド

FC2ブログに最近追加されたタグ機能。 そのタグリストにおいて、タグの設定回数に応じてタグ名の大きさ等を変えて表示する、いわゆる「タグクラウド」をCSSで実現するカスタマイズです。 （この記事では単に「タグ」といった場合、タグリストのタグを意味します。）

タグリストのHTMLはたとえば以下のようにします。 <!--rtag-->〜<!--/rtag-->は最近追加された順にタグリストを表示する変数です。

<ul class="tag">
<!--rtag-->
<li><a href="<%rtag_url>" title="<%rtag_count>件"><%rtag_name></a></li>
<!--/rtag-->
</ul>

リストではなく単純にタグ名を空白区切りにしたp要素とかでもいいのですが、とりあえずこのようにしておきます。 リストでもCSSでインライン表示することができます（ただし、タグ名の多くが半角英数の場合、半角文字列改行問題が生じます。）

.tag li {
 display:inline;
 margin-right:0.5em;
}

.tag a{
 text-decoration:none;
}

つぎにタグの設定回数ごとにフォントサイズを変えます。 設定回数0〜5までは○px, 6〜10までは△px, … , 30〜50までは□px, …とやっていてはきりがないので、 逆に大きいほうから小さいほうに向かって指定していきます。 つまり、とくに何も指定しない場合にフォントサイズ大とし、設定回数が少ないものに順に小さいフォントサイズを割り当てます。 ここでは設定回数の判別に属性セレクタを用いています。

.tag a[title] {
 font-size:130%;      /*  これが最大のフォントサイズになる */
 font-weight:bold;    /*  デフォルトで太字 */
}

.tag a[title="15件"],
.tag a[title="14件"],
.tag a[title="13件"],
.tag a[title="12件"],
.tag a[title="11件"] {
 font-size:120%;      /* 11〜15件はfont-size:120%で太字 */
}

.tag a[title="10件"],
.tag a[title="9件"],
.tag a[title="8件"],
.tag a[title="7件"],
.tag a[title="6件"] {
 font-size:110%;      /* 6〜10件はfont-size:110%で太字 */
}

.tag a[title="5件"],
.tag a[title="4件"],
.tag a[title="3件"],
.tag a[title="2件"],
.tag a[title="1件"] {
 font-size:100%;      /* 1〜5件はfont-size:100% */
 font-weight:normal;  /* 1〜5件は太字でない */
}

たとえば設定回数10のタグ（title属性が「10件」であるタグリスト）は、.tag a[title="10件"]にマッチするため、 フォントサイズが（130%よりも優先されて）110%になるとともに、.tag a[title]のfont-weight:bold指定により太字で表示されます。 設定回数が16以上のタグは.tag a[title]にしかマッチしないため、フォントサイズは130%で太字になります。

属性セレクタはIEが対応していないので、代わりにクラスセレクタを使うことになるでしょう。 そのさい、セレクタのクラス名では先頭に数字は使えないことに注意します。

フォントサイズはテキトーなのでフォントサイズ指定手法などを参考にきっちり指定してください。