カテゴリーをタグクラウド風に

このブログでは、それぞれの記事を16のカテゴリーに分けています。記事によっては複数のカテゴリーを指定しているものもあります。カテゴリーが16もあるので、サイドバーにそのまま表示させると、とても冗長な感じがして、今まで表示させていませんでした。

これまで使っていたiBlogというツールでは、カテゴリーを横並びに表示させることができましたが、ココログではできません。TypePadには、カテゴリーをタグクラウドのように表示する、カテゴリークラウド機能があるのですが、ココログでは今のところ使えるようになっていないのです。（なぜかブログ人では使える）ココログのアップデートに期待するしかありません。

そこで、手作りでタグクラウド風のカテゴリーリストを作ってみようと思い立ちました。

• 各カテゴリーへのリンクは手入力で作成する
• カテゴリーのランク付けは記事数に応じて３段階に設定し、w1からw3までのクラスを定義する
• クラスに応じたフォントサイズで表示されるよう、カスタムCSSに追加する
• カテゴリー名にマウスを乗せると、カテゴリーの簡単な説明が表示されるように設定

ココログではHTMLに手を入れることはできないので、既存のカテゴリーを非表示として、マイリスト（メモ）を使って手作りのタグクラウド風カテゴリーを作りました。

結果は画面右のサイドバーのとおりです。

タグクラウド風カテゴリーのHTMLとCSSは、次のようになっています。

HTML

<span id="tag">
<li><a class="w1" href="http://jsgarage.cocolog-nifty.com/blog/keynote/index.html" title="アップルのプレゼンテーション・ツールKeynote">Keynote</a></li>
<li><a class="w1" href="http://jsgarage.cocolog-nifty.com/blog/logic/index.html" title="アップルの音楽ソフトLogic">Logic</a></li>
<li><a class="w3" href="http://jsgarage.cocolog-nifty.com/blog/mac/index.html" title="マックのソフト">Macソフト</a></li>
　～　中略　～
<li><a class="w3" href="http://jsgarage.cocolog-nifty.com/blog/cat4135502/index.html" title="音楽">音楽</a></li>
</span><div>

CSS

#tag li {
    display: inline;
    color: #666666;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    list-style-type: none;
    }

#tag a.w1 {
    line-height: 150%;
    font-size: x-small;
    font-weight: normal;
    }

#tag a.w2 {
    line-height: 150%;
    font-size: small;
    font-weight: normal;
    }

#tag a.w3 {
    line-height: 150%;
    font-size: medium;
    font-weight: bold;
    }