Movable Type 備忘録

 tagwireプラグインでカラフルなタグクラウドを作る

先日、tagwireプラグインを使ったタグクラウドで、更新頻度を細分化するようなカスタマイズについて訪問者さんからご相談を受けました。

訪問者さんのサンプルとして、わたしのタグクラウドを7色を使って更新頻度の細分化を行ってみました。 今回はそのカスタマイズ方法をご紹介します。

カスタマイズといっても、タグの出現頻度および、更新頻度を計算していたJSのカスタマイズと、CSSの変更だけです。 とりあえずサンプルですが、わたしのサイトで表示しているタグクラウドをご覧ください。

以下のコードが上記サンプルで使っているスクリプトになります。

そして以下は、上記サンプルで使っている更新頻度を表すCSSになります。

  1. 変更前
  2. #tags li.hot a { color: #549355; }
  3. #tags li.old a { color: #7aa814; }
  4. #tags li.oldest a { color: #ccc; }
  5.  
  6. 変更後
  7. #tags li a {
  8.     border-width: 0;
  9.     color: #cccccc;
  10.     text-decoration: none;
  11. }
  12. #tags li.level1 a { color: #549355; }
  13. #tags li.level2 a { color: #beeb56; }
  14. #tags li.level3 a { color: #e28d00; }
  15. #tags li.level4 a { color: #ffda46; }
  16. #tags li.level5 a { color: #5366be; }
  17. #tags li.level6 a { color: #b1c0fd; }

これらを差し替えるだけで、7色で更新頻度を表すことができるようになります。 更新頻度の期間を変更したい場合には、上記スクリプト中にコメントしてますので、そこら辺をお好みで変更してください。 そして色使いは、同じくお好みでCSSを変更してください。

以上です。
SEE YOU

 Trackback Pings(3)

from Kazuhiro's Weblog

「Movable Type」3.3以降では、エントリーにタグを付けることができる...

from K's Labo

MovableTypeをバージョンアップした際に、TagCloudの調整まで手が...

from Movable Type 備忘録

Technorati(テクノラティ)って知ってますか? 簡単にいうと、ブログ専用の検索エンジンです。 以下は、Technorati(テクノラティ)から引用...

 Comments(4)

#1: Posted by panser @ November 18, 2006 [REPLY]
user-pic

先日は大変お世話になりました。この記事を見て以前私が質問させて頂いた件だったので早速記事を参考にカスタマイズさせて頂きました。ありがとございます! エントリーして頂きうれしく感じております。 そこで、よく見かけるカスタマイズなんですけど以前も質問させて頂いたBlog本体に影をつけるカスタマイズももし良ければお手すきの時にエントリーして頂けないでしょうか? とりあえず私が影をつけたい箇所を下記URLで破線で表示させて頂きました。 もし、ご迷惑でなかったらカスタマイズ方法をエントリーして頂ければ幸いです。 宜しくお願い致します。

URL:http://vita.qee.jp/screenshot/mihon.JPG

#2: Posted by bzbell @ November 18, 2006 [REPLY]
user-pic

>>1 panser さん

こんにちわ^^

> この記事を見て以前私が質問させて頂いた件だったので早速記事を参考にカスタマイズさせて頂きました。

思い通りのタグクラウドができたようですね♪
よかったぁ(●´∀`●)

> よく見かけるカスタマイズなんですけど以前も質問させて頂いたBlog本体に影をつけるカスタマイズももし良ければお手すきの時にエントリーして頂けないでしょうか?

分かりました( ̄∇ ̄)
とりあえず、大まかなやり方…ということで、ご紹介してみます♪

#3: Posted by かわぐち @ March 2, 2007 [REPLY]
user-pic

どうも、かわぐちです。

私のブログで表示しているTagCloudですが、
実はこのエントリーを参考にさせてもらってます。

ありがとうございます。

#4: Posted by bzbell @ March 2, 2007 [REPLY]
user-pic

>>3 かわぐち さん

こんにちわ^^

> 実はこのエントリーを参考にさせてもらってます。

ゼンゼンOKですっ!!
参考にしていただいてありがとうございます♪
至らないところは多々あると思いますが、今後ともよろしくお願い致します (m;_ _)mペコ

 Post a Comment

 

コメント用フィード