【Blogger】ラベルを階層化する方法

2016/05/04

Blogger

code

・2階層までしか対応してません
・別途jQueryの読み込みが必要です

テンプレートは「画像ウィンドウ」の１つめを利用しましたが、多くのBloggerのテンプレートでも動作すると思います。

・ラベルガジェット
・個別記事のラベル表示

導入するとその２つが、階層表示に対応したものになります。

導入方法

<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() {
      $(".list-label-widget-content li:contains('-')").css( "margin-left", "20px" );
      sub_cat(".list-label-widget-content a:contains('-')");
	  sub_cat(".post-labels a[rel='tag']:contains('-')");
	});
 })(jQuery);
</script>

上記のスクリプトを
・テンプレートのフッター
・サイドバーの後ろのほうに「HTML/JavaScript」ガジェットとして追加
どちらかに導入してください。

HTML/JavaScriptガジェットで追加して確認しました。

※jQueryを使用しているので組み込んでない人は別途組み込んでください。