はてなブログサイドバーのカテゴリ表示をタグクラウドにする！

最近 jQuery をちょこちょこ勉強しだしたので、jQuery を使ってサイドバーのカテゴリ表示をタグクラウドにしてみた。

はてなブログサイドバーのカテゴリ表示をタグ表示っぽくする - TMD45INC!!! のときは、カテゴリに「記事件数」が表示されていなかったんだけど、いまは「記事件数」が category (99) の形で表示されるようになったので、その数字を使ってタグ（カテゴリ）リンクの文字サイズを変えていくだけ。
※CSS は前記事と同じまま。所要１時間強で作成。

<script>
// タグクラウドもどき
$(function() {
	var categories = $(".hatena-module-category ul li a");
	$.each(
		categories,
		function(index, domEle) {
			var ele = $(domEle);
			var texts = $.trim(ele.text());
			// リンクテキストから記事件数を取得
			var count1 = texts.match(/\([^\(\s +]+\)/);
			var count2 = count1[0].match(/\d+/);
			// 大きさ指定 Start
			if(count2 >= 10) ele.css("font-size", "250%");
			else if(count2 >= 5) ele.css("font-size", "200%");
			else if(count2 >= 3) ele.css("font-size", "150%");
			else if(count2 >= 2) ele.css("font-size", "120%");
			else ele.css("font-size", "90%");
			// 大きさ指定 End
			// リンクテキストから記事件数を除去
			ele.text(texts.replace(/\([^\(\s +]+\)/, ''));
			// ツールチップに記事件数含めて表示する（title要素）
			ele.attr("title", texts);
		}
	);
});
</script>

正規表現で２回抽出してやっと数字をとってきてるのと、記事件数によって変える倍率を直書きしてるのが、なんだかスマートじゃない気がするけど
初 jQuery にしては上出来なんじゃないかと自分で自分を褒めてあげようヨシヨシ(*'∀`)ヾ(ﾟДﾟ )ﾅﾃﾞﾅﾃﾞ

助言もらって、$(domEle) を何度も呼び出して使っていたところを var ele = $(domEle); にして ele を使いまわすように直したりしたよ。

~~ツールチップが変な大きさになってるのはデフォなんだろうか…？~~→ 2012/08/29 直しました。上記に反映済み
ひとまず満足ﾜｰｲヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉﾜｰｲ

お使いになりたい方は複製改変ご自由にどうぞー（CSS の設定を忘れずにね☆）。

('ω`)

追記：2012/05/24

肝心の使い方をちゃんと書いてなかった･･･
上記のソースコードを「サイドバー」の１つとして貼り付けるだけです。「サイドバー」の［モジュールを追加］で html を選択して、タイトルは未入力でコードだけ貼り付けてください。サイドバーを挿入する位置はどこでも構いません。
これで、記事件数によってタグのリンクの文字サイズが変わります。

それに加えてこちらをデザイン設定のカスタマイズ→「デザインCSS」に追加すると、リスト表示が解除されてタグクラウドっぽくなります。

追記：2013/01/11
もちろんご利用の際にはお好きなように改変していただいて構いませんですよ^^

TMD45'β'LOG!!!

Life is Beta-ful.

はてなブログサイドバーのカテゴリ表示をタグクラウドにする！