Skip to content

Instantly share code, notes, and snippets.

@tmd45
Created August 29, 2012 01:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tmd45/3505936 to your computer and use it in GitHub Desktop.
はてなブログのサイドバーのカテゴリ表示をタグクラウド表示にするjQuery
<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>
div.hatena-module-category div.hatena-module-body ul li {
display: inline;
margin: 0 0.3em;
}
@tmd45
Copy link
Author

tmd45 commented Aug 29, 2012

リンクの titile 要素表示が変だったのを修正
取得したテキストの両端に不要なスペースが大量に含まれていて、ツールチップが改行表示されていたことが原因だった。
テキストを取得したときにトリムするように修正。それに伴って記事件数表示の除去を行う正規表現を変更。

@tmd45
Copy link
Author

tmd45 commented Aug 29, 2012

はてなブログのタグクラウドとして使用するときには、以下の CSS 設定も必要。

div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment