TOP ＞ ブログカスタマイズ
2008/04/04(Fri) 08:00

FC2ブログにCSSを使ったタグクラウドを設置してみた

今更すぎるけど、タグクラウドを導入してみた。タグはSEOで毎回入力していたけれど、クラウドはなんか共有プラグインのものがしっくりこなくて、導入していなかったのだけど、SEOを考えたら明らかに表示させたほうが良い。

プラグインは使わずにCSSでタグクラウドを実現する方法をスクリプト不使用のFC2ブログ用タグクラウド - 畳紙という記事で紹介されていたので、それを自分なりに少しだけカスタマイズしてみた。

興味がある人は続きから。

まずブログのサイドバーでもプラグインでも良いので、好きなところに下記のタグを挿入。

<ul class="tagcloud">

<li class="tcmax tc<%stag_count>">
<a href="<%stag_url>" title=" タグ「<%stag_name>」の付いた記事:<%stag_count>件 "><%stag_name></a>
</li>

</ul>

上のタグをCSSでコントロールする。

ul.tagcloud{
margin: 5;
padding: 10px 0px;
line-height: 1.1;
font-size: 14px;
}

ul.tagcloud li{
margin: 0;
padding: 0;
display: inline;
font-size: 100%;
}

ul.tagcloud li a{
text-decoration: none;
}

li.tcmax a{
/* カウント20以上のとき（最大） */
font-size: 167%;
font-weight: bold;
color: #4169E1;
}

li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
/* カウント19～15のとき */
font-size: 136%;
font-weight: bold;
color: #4169E1;
}

li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
/* カウント14～10のとき */
font-size: 122%;
font-weight: bold;
color: #4169E1;
}

li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
/* カウント9～5のとき */
font-size: 114%;
font-weight: normal;
color: #4169E1;
}

li.tc4 a, li.tc3 a{
/* カウント4・3のとき */
font-size: 92%;
font-weight: normal;
color: #979797;
}

li.tc2 a, li.tc1 a{
/* カウント2・1のとき（最小） */
font-size: 77%;
font-weight: normal;
color: #b3b3b3;
}

ul.tagcloud li a:hover{
color: #ff0000;
}