あちこちでよく見かけるようになったタグクラウド。FC2ブログユーザーにも、サイドバー等に設置している人が結構います。しかしそのほとんどが、JavaScriptで動くタイプの共有プラグインみたいです。
なんというかタグクラウドは、機能性云々よりは飾りとしての意味が大きいんじゃないかと勝手に思ってます。まあそれでもサイトナビゲーションのひとつなわけだから、できれば環境に左右されずに機能したほうがいいんじゃないかなとも思います。というわけでスクリプト不使用、CSSで実現するFC2ブログ用のタグクラウドを作ってみました。すでに同じようなことをやってる人がいると思いますが。
せっかくなので、3ping.orgで紹介されていた素敵すぎるTag CloudのCSSをFC2ブログで使えるように移植してみました。今回はリンク先のTag Cloud1というスタイルを選びましたが、他のでも同様にできるはずです。
まずはHTMLの部分。ここでは<!--stag-->〜<!--/stag-->を使って並び順をランダムにしてます。もちろんrtag（最近追加された順）やctag（件数順）にしてもOK。まぁ件数順だと全然クラウドっぽくなくなるけど……。
<ul class="tagcloud">
<!--stag-->
<li class="tcmax tc<%stag_count>">
<a href="<%stag_url>" title=" タグ「<%stag_name>」の付いた記事:<%stag_count>件 "><%stag_name></a>
</li>
<!--/stag-->
</ul>そして肝心なCSS。
ul.tagcloud{
margin: 0;
padding: 0.5em 10px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
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: #424242;
}
li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
/* カウント19〜15のとき */
font-size: 136%;
color: #5e5e5e;
}
li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
/* カウント14〜10のとき */
font-size: 122%;
color: #7a7a7a;
}
li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
/* カウント9〜5のとき */
font-size: 114%;
font-weight: normal;
color: #979797;
}
li.tc4 a, li.tc3 a{
/* カウント4・3のとき */
font-size: 92%;
font-weight: normal;
color: #b3b3b3;
}
li.tc2 a, li.tc1 a{
/* カウント2・1のとき（最小） */
font-size: 77%;
font-weight: normal;
color: #cfcfcf;
}
ul.tagcloud li a:hover{
color: #000;
}簡単に解説すると、liにtcmaxとtc<%stag_count>という2つのclassを指定して、まずタグのカウント数にかかわらず前者が適用され、カウントが19以下になるとさらに後者が上書きされていく、という具合。カウントが小さくなるほどフォントサイズが小さくなり、明度が高くなっていき、さらに途中から太字が解除されるので、視覚的にわかりやすいかと思います。wuさんに感謝。
カウントの区切りはお好みで数字をいじれば変更可能。同様にしてTag Cloud10とかにも挑戦してみると面白いかも。
best discount for constant buyers
<a href= http://www.eclipseplugincentral.com/PNphpBB2-viewtopic-t-4915.html >biaxin xl</a>
<a href= http://www.eclipseplugincentral.com/PNphpBB2-viewtopic-t-4916.html >buy ritalin</a>
<a href= http://www.eclipseplugincentral.com/PNphpBB2-viewtopic-t-4917.html >effexor xr sale</a>
<a href= http://www.eclipseplugincentral.com/PNphpBB2-viewtopic-t-4918.html >buy klonopin online</a>
<a href= http://www.eclipseplugincentral.com/PNphpBB2-viewtopic-t-4919.html >buy lexapro</a>
GdhE1j gfb07yvt9d6t94wbtx63bgq7d
今更すぎるけど、タグクラウドを導入してみた。タグはSEOで毎回入力していたけれど、クラウドはなんか共有プラグインのものがしっくりこなく...
（すみません 「件数装飾」については既に畳紙さんがずっと以前に書いておられました） 前記事の方法（ CssTagCloud ）の機能は”特定タグの非...
これまでTagCloudは「件数の多い順」に表示されていて、なんとなくソレっぽくない感じだな〜と思っていたので、ランダム表示に変更してみたのだ...