Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

タグクラウドのフォントサイズの計算式

Apr152008
Vote:
http://bizcaz.com/archives/2008/04/15-080754.php
Categories: Customize
Tags: Customize, TagCloud
Social Bookmark

Prev Page: MathOperatorExpander プラグイン
Next Page: EntryCategory プラグイン

おはようございます^^

Open MagicVox.net さんとこでおもしろそうな記事が紹介されてました (￣∇￣)/

タグクラウドのフォントサイズの計算式について

タグクラウドのフォントサイズ計算式に対数関数が使われてます。

これからお仕事行かなきゃなので試せないけど、帰宅したら試してみようと思います。
どんなふうに表示が変わるかなぁ o(●´∀｀●)o ワクワク

お試しあれぇ～♪

- 2008.04.15 追記 -

お仕事中だけど気になって試してみました (;￣∇￣A 内緒でお願いします。
時間がないので詳しい説明は省きます (m;_ _)mペコ

コードは以下の通りです。

var tagclouds = {
version: '1.0.4',
weight: 1, // フォント重み(大きい値にするとフォントが小さくなる)
font_size_min: 12,// 基準となるフォント最小サイズ
font_size_max: 41,// 基準となるフォント最大サイズ
count_min: Math.log(<MTTags limit="1" sort_by="count" sort_order="ascend"><$MTTagCount$></MTTags>), // 最小タグ数(自然対数仕様)
count_max: Math.log(<MTTags limit="1" sort_by="count" sort_order="descend"><$MTTagCount$></MTTags>),// 最大タグ数(自然対数仕様)
init: function() {
var tags = new Array();
var now = (new Date()).getTime();
var tagsNode = document.getElementById('tags');
var childNodes = tagsNode.childNodes;
this.font_size_min /= this.weight;
this.font_size_max /= this.weight;
for (var i = 0;i < childNodes.length;i++) {
var e = childNodes.item(i);
if (e.nodeName.match(/li/i)) {
var s = e.title.split(':');
var d = s[2].split('-');
var diff = (now - (new Date(d[0], d[1] - 1, d[2])).getTime()) / 86400000;
e.style.fontSize = this.calc_fontsize(s[1]) + 'px';
if (diff < 15) {
e.className = 'rank_1';/* ～ 15日*/
}
else if (diff < 30) {
e.className = 'rank_2';/* 15日～ 30日*/
}
else if (diff < 90) {
e.className = 'rank_3';/* 30日～ 90日*/
}
else if (diff < 180) {
e.className = 'rank_4';/* 90日～180日*/
}
else if (diff < 365) {
e.className = 'rank_5';/* 180日～365日*/
}
else if (diff >= 365) {
e.className = 'rank_6';/* 365日～ */
}
tags.push([e, s[1]]);
}
}
tagsNode.style.display = 'block';
},
calc_fontsize: function (count) {
count = Math.log(count);// 自然対数仕様
return (this.font_size_max - this.font_size_min) * (count - this.count_min) / (this.count_max - this.count_min) + this.font_size_min;
}
};

JavaScript の Math.log 関数を使用しています。
タグクラウドの表示は以下の通りです。

<ul id="tags" class="tag_list">
<MTTags sort_by="modified_on" sort_order="ascend">
<li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagLastUpdated format="%Y-%m-%d"$>"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" rel="tag"><$MTTagName$></a></li>
</MTTags>
</ul>
<script type="text/javascript">
tagclouds.weight = <MTIf name="tag_fontweight"><$MTGetVar name="tag_fontweight"$><MTElse>2</MTIf>;
tagclouds.init();
</script>