Movable Type 備忘録
タグクラウドのフォントサイズの計算式
- 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>
後は再構築するだけぇ (●>∀<●)/
わたしのサイトではタグクラウドページとサイドバーに表示してる最近のタグとで併用してますので、サイドバーに表示する際には基準となるフォント最小/最大サイズを半分にして表示させてます。
それをやってるのが tagclouds.weight になります。
また、以下は使用前、使用後のイメージです。違いは明らかですね ( ̄∇ ̄)b
いい感じです (●´∀`●)
後ほど、配布してますテンプレートでもフィードバックしたいと思います。
フィードバックしました (●>∀<●)
Trackback Pings(0)
No trackbacks found.
Comments(0)
No comments found.





Post a Comment