【はてなブログ】カテゴリーを階層化する方法

2016/05/04

code

・2階層までしか対応してません
・外部のスクリプトファイルを読み込みません（jQueryは除く）

検索で調べると、ある定番のスクリプトを外部から読み込む方式で導入している人しかいなかったので自前で作ってみました。

当記事の方法を導入すると、上記のような表示になります。

・ブログ運営
・ブログ運営-カスタマイズ
・ブログ運営-収益

カテゴリー名を上記のようにつけることで、疑似的に２階層カテゴリーを実現しています。
・「-」＝ハイフンの半角です
・スペースは入れないでください

導入方法

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sub_cat(str){
 (function($) {
   $(function() {
     $(str).each(function(){
        var txt = $(this).text();
         $(this).html(
             txt.replace(/.*-(.*)/g,'$1')
         );
      });
	});
 })(jQuery);
}
 (function($) {
    $(function() {
      $("ul.hatena-urllist li a:contains('-')").css( "margin-left", "20px" );
      sub_cat("ul.hatena-urllist li a:contains('-')");
      sub_cat("article div.entry-categories a:contains('-')");
      sub_cat("archive-entry div.categories a:contains('-')");
	});
 })(jQuery);
</script>

デザイン－＞カスタマイズ－＞フッタのところに上記のタグを貼り付けてください｡
1行目はjQueryの読み込みです。

上記のスクリプト（タグ）でやってることは単純です
・カテゴリー名の「-」より前を削除する
・サイドバーのカテゴリーでは、右に20pxずらしている