はてなブログの「カテゴリ」は、FC2ブログやSEESAAブログなどのカテゴリなどとは少し違った機能として扱われていますよね。
どちらかと言えば、１つの記事にいくつもタグを貼ることができるイメージですので・・・
タグクラウドのような感じの機能だと思います。
そこで私のブログのカテゴリ表示を普通のようにしておくよりもタグクラウドっぽくしておく方が「はてなブログ」に似合うと思いましたので、少しカスタマイズしてみることにしました！
タグクラウドにしてみたい方は、ぜひ参考にしてみて下さい！
はてなブログのカテゴリをタグクラウド風にカスタマイズする方法
最初は、普通のブログのカテゴリみたいな感じですよね。
当ブログ「ウチタテ！」ですと、こんな感じでした。
始めにCSSコードを貼り付ける
「デザイン設定➔カスタマイズ➔デザインCSS」を選択して、次のCSSコードを貼り付けてから「変更を保存」を押します。
CSSコード
.hatena-module-category .hatena-module-body ul li {
display: inline-block;
margin: 0 0.3em 0 0;
padding: 0em;
border-bottom: 0px;
transition: 0.2s;
}
.hatena-module-category .hatena-module-body ul li:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
z-index: 20;
}
すると、当ブログのカテゴリ表示は次のようになります。
これだけでもサイドバーの長さを短くするという効果はあるので、このままでも良いかなーとも思うのですが・・・
やはりタグクラウドっぽくしたいですよね。
HTMLコードを追加する。
「デザイン設定➔カスタマイズ➔サイドバー➔モジュールを追加➔HTML」を選択してHTMLモジュールを追加します。
ここに次のHTMLタグをコピーして貼り付けます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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($.trim(texts.replace(/\([^\(\s +]+\)/, '')));
// ツールチップに記事件数含めて表示する（title要素）
ele.attr("title", texts);
}
);
});
</script>
ただし、追加するHTMLモジュールのタイトル部分は空白にしておかなければなりません。
これで、はてなブログのカテゴリ表示がタグクラウド風にカスタマイズされているハズですよ。
まとめ
今回のカテゴリのカスタマイズは・・・
「１６bit!」さんと、「TMD45INC!!!」さんの記事を参考にさせていただきました。
先人達の役に立つ記事のおかげで、はてなブログのカスタマイズが手軽に行えるので感謝ですね。
ただ、カテゴリのタイトル表示をどうしたら良いのかで少し迷ってしまいますね。
「カテゴリ」のままだと、ちょっと違う気がしますし・・・
「タグクラウド」でも、はてなブログの場合は少し違うような気がしてしまいます。
一応、当ブログでは・・・
しばらくは、「カテゴリタグ」という表示にしておきます？
ちょっと変かな？