スポンサーサイトスクリプト不使用のFC2ブログ用タグクラウド

記事情報

投稿日時
--------T--:--:--+09:00
カテゴリー
スポンサー広告

記事本文

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

記事情報

投稿日時
2007-11-29T13:15:04+09:00
カテゴリー
FC2BLOG
タグ

記事本文

あちこちでよく見かけるようになったタグクラウド。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とかにも挑戦してみると面白いかも。

スポンサーサイト

コメント

コメントフォーム (C)
管理者にだけ表示を許可する

(P)

トラックバック

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

今更すぎるけど、タグクラウドを導入してみた。タグはSEOで毎回入力していたけれど、クラウドはなんか共有プラグインのものがしっくりこなく...

CssTagCloud 続き

(すみません 「件数装飾」については既に畳紙さんがずっと以前に書いておられました)  前記事の方法( CssTagCloud )の機能は”特定タグの非...

タグクラウド変更

これまでTagCloudは「件数の多い順」に表示されていて、なんとなくソレっぽくない感じだな~と思っていたので、ランダム表示に変更してみたのだ...

【ブログカスタム】タグクラウド

右サイドバーにタグクラウドを追加しました! タグクラウドのプラグインの追加も考えたのですが、デザインはこれがいい!というのを前に見...

Tag Cloudをサイドメニューに表示させてみた

Tag Cloud をサイドメニューに表示させてみました。導入方法は以下のサイトを参考にスポンサーサイトスクリプト不使用のFC2ブログ用タグクラウドF...

タグクラウドをCSS利用のものに変更

いままで、共有プラグインのタグクラウドをサイドに設置していたのですが、ちょっと重い感じがしたのと、デザインで少し遊びたいと思ったの...

FC2 ブログでタグクラウドを表示させる方法

今回は iPhone から少し離れたネタです。 最近のブログでは タグクラウドというものをよく見かけます。 タグとは、投稿者が記事のカテゴリと...

トラックバックURL
http://kofumo.blog28.fc2.com/tb.php/3-25163836

奥付

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。