ザツログ

雑学、幕末、80年代、ブログカスタマイズ、ITトラブルシューティングなど。

MENU

コピペでOK!はてなブログの『カテゴリー』をタグクラウド風にしてみた

Web 2.0 Map.svg

"Web 2.0 Map" by Original by Markus Angermeier Vectorised and linked version by Luca Cremonini - Based on The huge cloud lens bubble map web2.0 web20map.png Vectorised and linked version from Web 2.0 Map Web_2.0_Map.svg. Licensed under CC 表示-継承 2.5 via ウィキメディア・コモンズ.

ブログのサイドバーに大小様々なタグが表示されているのを見た方も多いと思います。

 

『タグクラウド』とは?

直訳すると「タグの雲」を意味し、雲のように表示されるタグ文字列が大小さまざまに浮かんでいるように見えることからこの名前が付けられた。

出典:タグクラウド - Wikipedia

はてなブログの何となく味気ないカテゴリーをこのようなタグクラウドに変更する手順を紹介します。

 

『タグクラウド』にする手順

①まずは、各ブログ記事にカテゴリーがつけられており、サイドバーにカテゴリーが表示されている事が前提です。

 

②下記のコードを『デザイン』 > 『カスタマイズ』 > 『フッタ』にコピー&ペーストします。

  <script src=\"http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js\"></script> <script> !function ($) { var range = 11, base = 90; var data = []; var list = $(\".hatena-module-category ul li a\"); list.each(function () { data.push(parseInt($(this).text().match(/\\((\\d+)\\)/)[1])); }); var min = Math.min.apply(null, data), max = Math.max.apply(null, data); var sqrtMin = Math.sqrt(min), sqrtMax = Math.sqrt(max); var factor = range / (sqrtMax - sqrtMin); list.each(function (i) { var count = data[i]; var level = parseInt((Math.sqrt(count) - sqrtMin) * factor) * 10 + base; var elem = $(this); var text = $.trim(elem.text()); elem.css(\"font-size\", level + \"%\"); elem.text($.trim(text.replace(/\\([^\\(\\s +]+\\)/, \'\'))); elem.prop(\"title\", text); }); }(jQuery); </script>  

出典:はてなブログのカテゴリー表示をタグクラウドにするコードを改造してみた - しばやん雑記

 

③『変更を保存する』をクリックして設定を保存します。

 

④下記のようにカテゴリータグクラウドになりました。

f:id:maekeeeeen:20140926191357p:plain