Bloggerのラベルをカテゴリ別に整理する(ラベルの階層化)

Bloggerでカテゴリ別にラベルを管理したいと思い、暇に任せて自前でやってみた。
 jQuery?何それ?美味しいの?状態なので見苦しい事になってる気がするけど気にしない。^^;

仕様としては、ラベルの文字列が

• カテゴリ/ラベルA
• カテゴリ/ラベルB

こんな感になっていれば、文字列を/で分割してカテゴリ単位にまとめてしまおう、というもの。
こんな感じに。

• カテゴリ
• ラベルA
• ラベルB

ついでにツリービューっぽくする。

テンプレート>HTML編集で、ウィジェットのテンプレートを展開にチェックを入れて、ラベルのウィジェットの箇所を探し出し、下記のソースと差し替える。
 #jQueryを導入すること
(2013/10/29)選択中のラベルのノードを開くように修正
(2014/06/18)フッターのラベルをサブカテゴリのみ表示するように修正
(2014/06/22)ラベルクラウドのラベルをサブカテゴリのみ表示するように修正
(2018/03/07)階層化されない場合の対応方法の記事を追加

<b:widget id='Label1' locked='false' title='カテゴリ' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div id='Label1Cover' style='display:none;z-order:-1;'>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </div>
<script type='text/javascript'>
//ラベル階層化
$(function(){
    // 選択中のラベルを取得
    var selLabel = ""; 
    if($('.status-msg-body').length > 0)
    {
      selLabel = $('.status-msg-body').children('b').text();
    }
    var list = $('div#Label1 div ul > li');
    var dest = $("<ul style='display: none;'/>");
    var nodes = new Array();
    $(list).each(function(){
        var work;
        var selected = false;
        var targetText = "";
        if($(this).children('a').length>0){
            targetText = $(this).children('a').text();
            work = targetText.split("/");
            $(this).children('a').text(work[work.length-1]);
        }else{
            targetText = $(this).children('span:first').text();
            work = targetText.split("/");
            $(this).children('span:first').text(work[work.length-1]);
        }
        if(selLabel==targetText)
        {
            selected = true;
        }
 
        var key="";
        $(this).addClass("categoryLabel");
        var target=$(this);
        $(work).each(function(i){
            if (i == work.length-1){
                 if (key == ""){
                      dest.append($(target).clone(true));
                 }else{
                      nodes[key].append($(target).clone(true));
                 }
                 $(target).remove();
            }else{
                 var parent = null;
                 if (i>0){
                     parent = nodes[key];
                     key = key + "/";
                 }
                 key = key + work[i];
                 if (nodes[key] == null){
                      var item = $("<li class='categoryLabel'>" + work[i] + "</li>");
                      var temp = $("<ul style='display: none;'/>");                      
                      item.append(temp);
                      nodes[key] = temp;
                      if (parent == null){
                          dest.append(item);
                      }else{
                          parent.append(item);
                      }
                 }
            }
        });
        // ラベルを選択中の場合、該当ノードを表示する
        if(selected)
        {
            work = selLabel.split("/");
            key = "";
            $(work).each(function(i){
                if (i>0){
                    parent = nodes[key];
                    key = key + "/";
                }
                key = key + work[i];
                $(nodes[key]).css('display','block');
            });
        }
    });
    $('div#Label1 div ul').html($(dest).html());
});
//トグル処理
$(function(){
    var open = 'data:image/gif;base64,'+
        'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACEYyPoAvG614LQFg7ZZbxoR8UADs=';
    var close = 'data:image/gif;base64,'+
        'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACFIyPoAu2spyCyol7W3hxz850CFIA'+
        'ADs=';
    $('.categoryLabel:has(ul)')  
      .click(function(event){  
        if (this == event.target) {  
          $(this).children().toggle();  
          $(this).css('list-style-image',  
            ($(this).children().is(':hidden')) ?  
              'url(' + close + ')' : 'url(' + open + ')');  
        }  
      })  
      .css('cursor','pointer');
    $('.categoryLabel:has(ul)').css('cursor','pointer'); 
    // 子ノードの表示状態で初期表示アイコンを変更する
    var list = $('.categoryLabel:has(ul)');
    $(list).each(function(){
        if($(this).children().css('display') == 'none')
        {
            $(this).css('list-style-image','url(' + close + ')');
        }else{
            $(this).css('list-style-image','url(' + open + ')');
        }
    });
    $('.categoryLabel:not(:has(ul))').css({  
      cursor: 'pointer',  
      'list-style-image':'url(' + open + ')'  
    });  
    $('#Label1Cover').show();
});
// フッタの表示ラベルをサブカテゴリのみにする
$('.post-labels').children("a").each(function(){
    var work = $(this).text().split("/");
    $(this).text(work[work.length -1]);
});
// ラベルクラウドの表示ラベルをサブカテゴリのみにする
$(function(){
    $('.widget-content.cloud-label-widget-content').children().each(function(){
        $(this).children().each(function(){
            var work = $(this).text().split('/');
            $(this).text(work[work.length -1]);
        });
    });
});
</script>
</b:includable>
</b:widget>