Bloggerのカテゴリ（ラベル）ツリー化

今回は、『Bloggerのカテゴリ（ラベル）ツリー化』についてご紹介します。

Bloggerのカテゴリーのツリー化はFC2ブログやSeesaaブログに比べると若干面倒です。
ただ今回ご紹介する手順で実施すれば１０分ほどで終了すると思いますので、Bloggerをお使いの方は試してみてはいかがでしょうか？

※カテゴリーのツリー化イメージについては、「Seesaaのカテゴリーツリー化」の記事にもありますので合わせてお読みいただけますとより理解しやすくなると思います。

Seesaaブログのカテゴリツリー化

早速Bloggerを使って「カテゴリツリー」を作成する方法をご紹介します。

１．jQUERYの導入

ツリー化するためにjQUERYを利用します。
下記手順で導入します。

Bloggerにログイン後、[テンプレート]　→　[HTMLの編集]　→　[続行]でHTMLの編集画面に進みます。

対象ソースを下記画像の位置に埋め込みます。

※ソースを変更する場合何らかのミスでテンプレートが崩れる場合があります。作業前にHTMLソースをTerapadやメモ帳にコピーしてバックアップしておきましょう。


［対象ソース］
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>




</head>の直前ですね。

埋め込んだら[テンプレートを保存]します。


２．カテゴリツリー化

[HTMLの編集]　→　[続行]　→　[ウィジェットのテンプレートを展開]にチェックでHTML編集画面に進みます。

ラベルウィジェットのコード部分を探し、対象ソースに貼り替えます。
「Label」で検索をかけると見つけやすいです。


［対象ソース］
 <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>

下記貼り替えの目安にして下さい。

当ブログにおけるラベルウィジェット開始部分



当ブログにおけるラベルウィジェット終了部分



張り替えたら[テンプレートを保存]します。

当ブログのカテゴリはこのソースを用いたものになっているので、そちらでツリーのイメージをご確認下さいね。

ラベルを作成するときの注意ですが、
ツリー化するためには必ず、

親カテゴリー/子カテゴリー

のようにスラッシュを使用して下さい。

スポンサードリンク