TOP > ブログいぢり(カスタマイズ) > CSSだけでタグクラウド(スクリプト不使用)

CSSだけでタグクラウド(スクリプト不使用)

2008.10.19(00:00)

今日は猫を一匹もみてないの・・・(´・ω・`)ショボーン
それはおいといて、

タグクラウドを設置してみた。

実装方法を模索してたので、やっと、といったところ。

FC2ブログでは各記事に、10個までキーワード(ユーザタグ)を登録することができる。

登録したユーザタグの変数(テンプレート用 変数一覧)から得られる「ユーザタグの一覧(履歴順・使用累計順・ランダム)」と「ユーザタグ名」、「ユーザタグ毎の累計数」、「タグページURL」を利用して作成することになる。

ここまではすぐにわかる範囲だが、困るのが、「ユーザタグ毎の累計数」。
件数の種類に1対1でCSSをきらないといけないのか?
それはあまりにも冗長すぎる。

一番よいのは、「ユーザタグ毎の累計数」が、1~10件はレベル1、11~25件がレベル2、といった感じに範囲レベルを設定できて、そのレベルが取得できたらよいのだけれど、今現在、そんな機能はない。

まさしくこの範囲レベルを切り分けるためにjavascriptを利用してタグクラウドを出力できるが、 そんなことのためにjavascriptを使いたくはない、なんとかならんのか!!


→あった。 kofumoさんの畳紙、すげぇ。
万一のリンク切れのために一応のっけるが、ぜひ畳紙でご確認を。

[HTML]
<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;
}

そのままプラグインの「フリーエリア」に貼っつけるだけで完成!!
もちろんスタイルシートの[<style type="text/css"></style>]が必要。
管理は面倒になるが、テンプレートのスタイルシート側にCSS設定するほうがおすすめ。

すげぇぇ!!
連続で記述できるの知らんかってん。

ただ、私のケースでは、aタグ本体にスタイル設定をしているからか、うまくスタイルが反映されなかった。
タグクラウドのリンクにもクラス名をつけてなんとか解決。

[HTML]
元)
<a href="<%stag_url>" title=" タグ「<%stag_name>」の付いた記事:<%stag_count>件 "><%stag_name></a>

変更)
<a class="tga" href="<%stag_url>" title=" タグ「<%stag_name>」の付いた記事:<%stag_count>件 "><%stag_name></a>
[CSS]※全てのaの後ろに追加したクラス名を記載
元)
ul.tagcloud li a{

変更)
ul.tagcloud li a.tga{

カラーなどをさらにカスタマイズする場合は、wuさんの3ping.orgが参考になる。

(追記:よくみたら参考サイト畳紙の記事内に3ping.orgのリンクがあった。というか3ping.orgをベースに記載された記事だった;どうりで構成が同じはずだorz)


実はこの方法では、件数の割合が変わったり件数範囲が広がれば、メンテナンスが必要になってくる。 つまり、件数の種類に1対1でCSSを作成する、という先の冗長性の憂いがクリアされたわけではないのでご注意を。
私も、メンテナンスが追いつかなくなったりしたらサイドに移動するか、外すかも。
増えてきたので下に移動したぁ。(編:2009.03.24)

アルファベットonlyのタグクラウドはどうしてかっこいいのかね。英語圏の人からみたら、漢字まじりのタグクラウドは新鮮にみえるのだろうか。


ところで、FC2のユーザタグ機能、実は以下の機能が邪魔で無視してた。
「記事内のタグにマッチした語句をリンクへ変換します」
これ、ON/OFF切り替え設定できたのね。

  

この記事の写真を大きなサイズ(原寸)で全部見る。
ターボハムスター | | 元気はつらつ[猫カフェ:ねこの部屋あまえんぼう]


◆新着・関連記事
Loading...(Javascript)

[PR]
エコキッチンさんのランキングベスト3にはいるシリコンカップカバー。 猫ぱんちさんでみてすっごい気になってました。お値段も、手ごろ。

【シリコンカバー】MOM Kitchen(マムキッチン) シリコン製カップカバー

雑貨屋さんが好きなので、ここのサイトは楽しい。 私の勘所をよく知っていらっしゃる(違)欲しいのいっぱい出てくる。 料理しないくせにキッチン用品欲しい~。プレゼントにも最適な商品がいっぱいです。
[エコキッチン]


ターボハムスター | | 元気はつらつ[猫カフェ:ねこの部屋あまえんぼう]
プロフィール
双葉そら

Author:双葉そら

ひとつきに一度は猫かふぇに行かなければ、猫欠乏症及びもっふもふ禁断症状に陥ります。

猫カフェにいる人々をみてるのも楽しかったりします。

普段はSE関連のお仕事。
WEBやデザイン系は苦手です。
配色って何?おいしいの?

本サイトにて、癒しと、猫カフェの認知&"布教"の一端を担えれば最高です。

肉球礼賛 ビバ肉球


カテゴリ
最近の記事
猫喫茶
ねこかふぇリンク。

*猫カフェ情報猫カフェ一覧(自内)


肉球 マウスパッド 【ねこきゅう マウスパッド】 [マウスパッド にくきゅう 猫 ネコ]肉球 マウスパッド
 ぷにっぷにっ!

*猫カフェブログ(自内)


当サイトへのリンクはご自由に。
「猫とカフェオレ、ときどき仕事」バナー

お気に入り

*猫カフェブログ(自内)
店舗ブログではなく、一般の人の猫カフェブログを集めてみました。

*ネコキャバではない。
東京の猫カフェ【ねこのみせ】ブログ。店内の徒然にとどまらず、開店の原点エピソードや、経営者視点からの猫カフェ動向の感想だったり読み応えあり。(→移転前)

*関西 猫 カフェめぐりの日々
→更新終了。いままで素敵な写真で楽しませてくださりありがとうございました!!
主に関西圏猫カフェのにゃんこ写真が盛りだくさん。 やさしい表情のにゃんこから、アクロバティックな姿まで生き生きした写真は必見。

*赤ソマ狂の詩
旧題「coco壱!」。飼い猫coco(ソマリ)ちゃんのブログ。ブリーダさんの頃から見てるので 個人的に愛着が強いのですが、ソマリ好きさんも是非。
赤ソマ狂の詩バナー

*這いつくばって猫に近づけ
猫写真家、荻窪氏が書く猫の撮影といろんなデジカメのレビュー。

*【実録】隠れ?ヲタギャルの日常【4コマ】
イラストレータさんの4コマブログ。わからないネタもあるかもしれませんが、 猫漫画は秀逸。
「08冬コミ参加おめでとうございます」 ←この意味が分かる人なら猫ネタ以外でも全部面白いとおもいます。
【実録】隠れ?ヲタギャルの日常【4コマ】バナー

*ミシュニャン
タイトルは、レストランガイドミシュランをもじったもの。世界をまたにかけた猫探訪録。

*猫の肉球が素材-ダ・ジ・ポン
猫モチーフのフリー素材。めっさかわいくて、全部散りばめたい衝動に駆られます。

[tag cloud]