何人かの方に気に入って使っていただいたようなのですが、以前の記事では jQuery だけベロっと貼ってあってわかりずらかったので、きちんと通して説明するために、改訂版として本記事を書くことにしました。
改訂版といってもまとめ直しただけで、コードが改「善」されたわけでないのであしからず…(´・ω・｀)
はてなブログのサイドバーの「カテゴリ」表示、よく一般的なブログで見かける「タグクラウド」のようにしたいと思う方は少なくないと思うのです。そもそもこの、記事にキーワードをがしがし追加してく感じって「タグ」じゃないのかなぁ…というわけで、自分のブログでもやってる「タグクラウド」表示の仕方を以下にまとめました。
ちなみにタグクラウドっていうのは↓みたいなやつです。ここにあるコードではこんなに格好良くはなりませんが（苦笑）
Original by Markus Angermeier. Vectorised and linked version by Luca Cremonini
ざっと簡単に
手順を省略して書くと以下になります。PC の管理画面から実行した場合を想定しています。
１．［デザイン設定］→［カスタマイズ］タブ →［デザインCSS］の末尾に以下のコードを貼り付け
div.hatena-module-category div.hatena-module-body ul li { display: inline; margin: 0 0.3em; }
２．［デザイン設定］→［カスタマイズ］タブ →［サイドバー］の「＋モジュールを追加」から「ＨＴＭＬ」に以下のコードを貼り付け。タイトルは入力しないで！
<script src="//code.jquery.com/jquery-1.10.2.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>
2013-10-25 追記
はてなの仕様が変わったとのことで、記事中のコードを修正しました。
以下の記事で、この記事を取り上げて変更点についてわかりやすくまとめていただいています。ありがとうございます！
プレビューで上手くいってそうだったら、「変更を保存する」して完了です！
わからなかった！という方は以下をご覧くださいな。
スクリーンショットなんかも載せてみましたのでちょっと長いですが…
手順１．「カテゴリ」表示を横並びにする
編集したいはてなブログの設定から［デザイン設定］→［カスタマイズ］タブ →［デザインCSS］というメニューをクリックして、そこにある入力欄（クリックすると大きく広がります）の一番最後の行に以下のコードを貼り付けます。元から入力されている内容は消さないように気をつけてください。
div.hatena-module-category div.hatena-module-body ul li { display: inline; margin: 0 0.3em; }
このコードで、例えば変更前がこんな感じだったら…
こんな感じに変わります。
縦に並んでいたリストが、横に連続して並ぶようになりました。
これだけでもタグクラウドっぽいといえば、ぽいのですが、もうちょっとそれっぽくします。
手順２．「タグクラウド」らしく！文字のサイズで記事数を表現
次のコードは、ブログの設定から［デザイン設定］→［カスタマイズ］タブ →［サイドバー］に登録します。
サイドバーの設定メニューの中に「＋モジュールを追加」というのがありますのでそれをクリックします。さらに、出てきたウィンドウのサイドメニューの「ＨＴＭＬ」をクリックします。
すると以下のような入力欄が出てきますので、広いほうに下のコードを貼り付けてください。狭いほうの入力欄（タイトル）は空欄にしてください。
貼り付けるコードはこれ↓です。<script>～</script>全部を入力欄に貼り付けます。
<script src="//code.jquery.com/jquery-1.10.2.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>
これで、さっきまでこんな感じだったのが...
こう変わります！文字が大きかったり小さかったりしているのがわかりますでしょうか？
記事の数の表示が消えてしまいますが、リンクにマウスを乗せると記事数も含めたカテゴリ名が表示されます。
これで「タグクラウド」表示への変更は完了です！
おつかれさまでした。
どうでしょうか？みなさんのブログでもキレイに「タグクラウド」表示になりましたでしょうか？
もし上手くいかなかったら、このページの下にコメント欄がありますのでそこからご相談ください。でもすぐにお答え出来るかわからないので「このままじゃ困る！」ってなったら、“今回追加したもの”をすべて削除してしまってください…。
（［デザインCSS］の元々あった入力内容は消さないように注意！）
以上でございます。
HTMLなどの初心者さんにもできるだけそのまま使っていただけるように書いてる…つもりです。いずれもご利用・改変などはご自由にどうぞ。ご報告なども不要ですが、もしこの記事の内容がお役に立ちましたらブクマとかはてなスターとか付けていただけると嬉しいです。
('ω`)
