読者です 読者をやめる 読者になる 読者になる

はてなブログのカテゴリをjQCloudを利用してタグクラウド化する

jQueryのプラグインとして開発されているjQCloudを利用して、はてなブログのカテゴリをタグクラウド化してみました。
↓こんな感じになります。


jQCloudはGitHubより入手できます。
lucaong/jQCloud · GitHub


まずは準備として、はてなブログのデザイン画面にあるデザインCSSに、
以下のjQCloudのCSSをコピーします。
font-sizeやcolorの項目などは後から調整してください。
jQCloud/jqcloud/jqcloud.css at master · lucaong/jQCloud · GitHub



次に、はてなブログの管理画面からデザインのヘッダに以下のスクリプトの内容をコピーします。
もちろん、scriptタグで囲むのもお忘れなく。
jQCloud/jqcloud/jqcloud-1.0.4.min.js at master · lucaong/jQCloud · GitHub

上記でコピーしたスクリプトの下に以下のスクリプトを記載すると、
はてなブログのカテゴリがタグクラウドになるはずです。

<script>
$(document).ready(function($) {
    var tagelms = $(".hatena-module-category ul li a");
	var taglist = []
	for (var i = 0; i < tagelms.length; i++) {

		taglist.push({
			text:tagelms[i].text.replace(/\([^\(\s +]+\)/, '').trim(),
			weight:parseInt(tagelms[i].text.match(/\((.+)\)/)[1]),
			link:decodeURI(tagelms[i].href)
		});
	} ;
	$(".hatena-module-category div ul").replaceWith("<div id=\"mytagcloud\" style=\"width: 200px; height: 330px; border: 0px solid #ccc;\"/>");
	$("#mytagcloud").jQCloud(taglist);
});
</script>

前提条件としてサイドバーに「カテゴリ」のモジュールを設定している必要があります。
はてなブログのデザインテーマによりサイドバーの幅などが異なるので、
その場合はスクリプト内のdivタグを置換している場所の、styleの設定を調整してください。

※追記
コード内の「link:tagelms[i].href」の部分が2重にエンコードされてしまうため、
スペースの入ったリンクの場合には以下のように
SPACE->Encode->%20->Encode->%2520
となってしまっていました。
「link:decodeURI(tagelms[i].href)」
と一旦decodeURIでデコードを挟むことで、2重エンコードを防いでいます。