Movable Type 備忘録

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

Nov172006
Author: bzbell
Categories: Customize
Tags: Customize, TagCloud, Tagwire

Next Page: カウンタによって表示を変える
Prev Page: AjaxでIFRAME的な表示をやってみる

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

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

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

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

<script type="text/javascript">
<!--
function calcFontSize(count) {
return count / 6 + 12;
}
var tags = new Array();
var now = (new Date()).getTime();
var tagsNode = document.getElementById('tags');
var childNodes = tagsNode.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var e = childNodes.item(i);
if (e.nodeName.match(/li/i)) {
var s = e.title.split(':');
e.style.fontSize = calcFontSize(s[1]) + 'px';
var d = s[2].split('-');
var diff = (now - (new Date(d[0], d[1] - 1, d[2])).getTime()) / 86400000;
// 変更前の更新頻度
//  if (diff < 14) e.className = 'hot';
//  else if (diff > 365) e.className = 'oldest';
//  else if (diff > 60) e.className = 'old';
// 変更後の更新頻度
if (diff < 15) e.className = 'level1';      //      ～ 15日
else if (diff <  30) e.className = 'level2';//  15日～ 30日
else if (diff <  60) e.className = 'level3';//  30日～ 60日
else if (diff <  90) e.className = 'level4';//  60日～ 90日
else if (diff < 180) e.className = 'level5';//  90日～180日
else if (diff < 365) e.className = 'level6';// 180日～365日
tags.push([ e, s[1] ]);
}
}
tagsNode.style.display = 'block';
var coff = 0;
var coffNode = document.getElementById('coff');
function decCoff(c) {
if (coff == 0) return;
coff -= c;
if (coff < 0) coff = 0;
coffNode.innerHTML = coff;
refreshCoff();
}
function incCoff(c) {
if (coff == 20) return;
coff += c;
if (coff > 20) coff = 20;
coffNode.innerHTML = coff;
refreshCoff();
}
function refreshCoff() {
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
tag[0].style.visibility = (tag[1] <= coff) ? "hidden" : "visible";
}
}
//-->
</script>

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

変更前
#tags li.hot a { color: #549355; }
#tags li.old a { color: #7aa814; }
#tags li.oldest a { color: #ccc; }
変更後
#tags li a {
border-width: 0;
color: #cccccc;
text-decoration: none;
}
#tags li.level1 a { color: #549355; }
#tags li.level2 a { color: #beeb56; }
#tags li.level3 a { color: #e28d00; }
#tags li.level4 a { color: #ffda46; }
#tags li.level5 a { color: #5366be; }
#tags li.level6 a { color: #b1c0fd; }

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

以上です。
SEE YOU

Trackback Pings(3)

TrackBack URL for this entry:

from Kazuhiro's Weblog: 「Movable Type」3.3以降では、エントリーにタグを付けることができる...
Tracked on February 25, 2007

from K's Labo: MovableTypeをバージョンアップした際に、TagCloudの調整まで手が...
Tracked on March 2, 2007

from Movable Type 備忘録: Technorati(テクノラティ)って知ってますか？簡単にいうと、ブログ専用の検索エンジンです。以下は、Technorati(テクノラティ)から引用...
Tracked on February 20, 2008

Comments(4)

#1: Posted by panser [RES]

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

ＵＲＬ：http://vita.qee.jp/screenshot/mihon.JPG

Posted on November 18, 2006

#2: Posted by bzbell [RES]

>>1 panser さん

こんにちわ^^

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

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

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

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

Posted on November 18, 2006