はてなブログのカテゴリ記事数によって、カテゴリ文字の大きさを変化させる
記事数が多いカテゴリ名の大きさを自動で変化させるスクリプトです。
自分も一応技術屋の端くれなので、たまにはこんなネタを提供したいと思います。
まず、このネタは
はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!
#13/5/26追記:上記記事が改良(よりわかりやすく)されました。タグクラウド化に興味のある方はこちらへ
【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!
から、ヒントを得て改造したものです。
これによって実装できたときは、tmd45さんにコメントでお礼を伝えたかったのですが、コメントできないブログ(13/5/16追記:自分がDISQUSのjavascriptを禁止してたからコメントできなかっただけでした。コメントでお礼をさせていただきました)だったので、申し訳ございませんがこんな場所でお礼を述べさせてください。
すごく助かりました。ありがとうございました。
改造要件
自分の場合は、カテゴリの記事数に応じてカテゴリ名の大きさを変化させる、という他に、
- 基本的にカテゴリの記事数は表示させる
- ただし、メインカテゴリ名となる「x00番のカテゴリ」には件数を表示させず、大きさも変更対象外とする
としたかったので、その辺をいじってます。
#13/5/18追記:以下のスクリプトには反映していない*1ですが、カテゴリ名から数字を削除する変更を入れました。
HTMLモジュールの配置
まず、ブログのダッシュボードの「デザイン」から
「カスタマイズ」→「サイドバー」→「+モジュールを追加」→「HTML」で
以下のスクリプトをコピペしてください。
<script> $(function() { //original written by id:tmd45 //improved by id:BNorider //カテゴリの記事数に応じて、カテゴリ名の大きさを変える var categories = $(".hatena-module-category ul li a"); $.each( categories, function(index, domEle) { var ele = $(domEle); var texts = $.trim(ele.text()); //original // リンクテキストから記事件数を取得 //original var count1 = texts.match(/\([^\(\s +]+\)/); //original var count2 = count1[0].match(/\d+/); // カテゴリNo.x00の場合は大きさ変更対象外とする if(texts.match(/^\d(00)/) != null){ var count2 = 0; } else { var count1 = texts.match(/\([^\(\s +]+\)/); var count2 = count1[0].match(/\d+/); } // 大きさ指定 Start if(count2 >= 10) ele.css("font-size", "230%"); else if(count2 >= 7) ele.css("font-size", "200%"); else if(count2 >= 5) ele.css("font-size", "170%"); 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 //original // リンクテキストから記事件数を除去 //original ele.text(texts.replace(/\([^\(\s +]+\)/, '')); // カテゴリNo.x00のみリンクテキストから記事件数を除去 if(count2 == 0){ ele.text(texts.replace(/\([^\(\s +]+\)/, '')); } // ツールチップに記事件数含めて表示する(title要素) ele.attr("title", texts); } ); }); </script>
※細かいところですが、記事数による変更箇所も増やしてます。この辺りは、各自お好みで。
※あと、たぶん他の方はカテゴリ名の頭にx00なんて数字をつけていないと思うので、ここら辺のロジックは削除しなくても問題ないです。
最後に
改造、再配布、全て自由で構いませんが、オリジナルはあくまでもtmd45さんなので、自分よりもtmd45さんに感謝してあげてくださいね。
【関連記事】
- 「プログラミング」カテゴリ一覧へ
【タグ】
{html}
*1:だって、他の人はカテゴリ名に数字なんていれていないよね。でも、もし知りたい場合は、このページのページソースを見てみてください