階層化ラベル

Bloggerは広告も挿入されなくて見やすいのだけど、不満なのがラベル。
城関係でラベルをつけようとすると、まず場所として都道府県のラベルを付けるだけで47種類。それだけでも充分多いが、他に日本100名城とか日本三大○○とか言うのもラベルを付けたいし、天守や櫓が現存か復元かもラベルを付けたいし、さらに国宝や重文とかもラベルを付けたいし…　となると、とてもじゃ無いが階層化しないとやってられない。しかし、Bloggerのラベルは標準のままだと階層化出来ない。

ということでググってみた。色々なサイトが見つかるが、やり方はほぼ同じで、テンプレートを直接編集する必要がある。一見ややこしそうだが、結局は2箇所、コピペするだけ。


1.　HTMLの編集画面を呼び出す

左メニューの「テンプレート」→「HTMLの編集」

※この画面上で直接編集できるが、念のため全文をコピペしてローカルに保存。ローカル側をテキストエディタで編集した。（バックアップも取った）



2.　jQUERYの導入

階層化するためにjQUERYを利用している。まずはjQUERYを呼び出すため、以下の文を</header>の直前に挿入する。

<script language='javascript'
  src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>
</script>

3.　ラベルウィジェットのコードを置き換え

ラベルウィジェットのコード部分を以下の文と置き換える。"Label1"で検索するとわかりやすい。

<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 list = $('div#Label1 div ul > li');
    var dest = $("<ul style='display: none;'/>");
    var nodes = new Array();
    $(list).each(function(){
        var work;
        if($(this).children('a').length>0){
            work = $(this).children('a').text().split("/");
            $(this).children('a').text(work[work.length-1]);
        }else{
            work = $(this).children('span:first').text().split("/");
            $(this).children('span:first').text(work[work.length-1]);
        }
        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);
                      }
                 }
            }
        });
    });
    $('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',
      'list-style-image':'url(' + close + ')'
    });
    $('.categoryLabel:not(:has(ul))').css({
      cursor: 'pointer',
      'list-style-image':'url(' + open + ')'
    });
    $('#Label1Cover').show();
  });
</script>
</b:includable>
</b:widget>

4.　テンプレートの保存

2箇所コピペしたら、「テンプレートを保存」で保存する。


5.　ラベル名の変更

ラベル名を次のように付ける。

[親ラベル名]/[子ラベル名]

これで、次のように表示される

- [親ラベル名]
　 - [子ラベル名]

参考：
http://internet-bibouroku.blogspot.jp/2012/11/blogger_13.html