6.ラベルの階層化

ラベルである程度分類できるけど、さらに分類しやすいように階層的に扱えるようにします。
（まだ、管理するほど投稿してないけど（￣▽￣；）

こんな感じ。

いろいろ調べて、HTMLを変更しないといけないみたい。
でも、基本2箇所替えるだけでいいみたいなので、試してみる。
*今回使用したソースはVery Pinchさんが作成したものを使用させていただいてます。
Bloggerのラベルをカテゴリ別に整理する(ラベルの階層化)


とりあえず試してみたのですが、いまいちうまくいきませんでした。
機能的にはうまく動いているみたいなのですが、見た目が階層っぽくない。
参考にした人のブログでは、ちゃんと階層っぽく表示されてるのにぃ。
こんな感じになってしまう。

いろいろやってみて、どうやらテンプレートがまずいらしい。
”ウォーターマーク”というテンプレートを選択していたのですが、これだと、上記のような表示になってしまいます。
”エスィリアル”ってのも、だめでした。
とりあえず”シンプル”選ぶと、ちゃんと表示されました。

//----準備
テンプレートを変更すると、変更したHTMLもなくなってしまいますので、上記のことを考慮しつつ、適当なテンプレートを設定します。
その後、あらかじめ既定のラベルガジェットを追加しときます。
4.ラベルをブログに表示させる

//----設定

Bloggerの管理画面で”テンプレート”を選択し、”HTMLの編集”をクリックします。

HTMLの編集画面に移ります。

*HTML編集する前には、必ずバックアップを取りましょう。

操作は２点
1. jQUERYを呼び出すためのscript差し込み
2.ラベルウィジェット（ガジェット）の総とっかえ

1. jQUERYを呼び出すためのscript差し込み
</header>の直前に以下の記述を挿入します。
*編集画面にカーソル移して、Ctrl+f で文字検索できます。


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

2.ラベルウィジェットの総とっかえ

既定のラベルウィジェットの箇所を探します。

　*Label1で検索すると見つけやすいです。
　widgetはたくさんあるので、念のためtitleの設定が自分がタイトルに設定した文字列と同じか、確認しましょう。ターミナルの位置も同じようなのたくさんあるので気を付けてください。

<b:widget id='Label1' locked='false' title='Category' type='Label'>
...
</b:widget ....>

上記の箇所を削除し、以下のコードを挿入します。

<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>

以上。
ラベルの設定を、”/”で区切り、親タイトル/子タイトルで設定すると、階層的に表示されます。


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


Category: Blogger Tips もくじ >
< 5.リンクを貼る     7. プロフィールのなまえ変更 >