忍者ブログ

刻ノ深淵

低周波音と耳鳴りに悩まされ不眠状態に陥る日々とアンチエイジング。只今、現状打破を試み奮闘中。

カテゴリのツリー化。

[編集]
■カテゴリのツリー化。
色々考えた末にカテゴリのツリー化に踏み切りました。
画像を使わないVer.にしようと思ったのですが、上手くいかず。。。
JavaScriptは変更なしで使用させて頂きました。
また、前記事で紹介した『JavaScriptを外部ファイルにする』も利用してみました。
JavaScript部分が長いですし、テンプレートを変えてしまっても此方の方が変更しやすいと思った為です。

■ニンブロラボ.
http://shinobibloglab.blog.shinobi.jp/Entry/2/

■忍者ブログカスタマイズ
http://ninjacustomize.blog.shinobi.jp/Entry/5/

■Cat's-Paw*
http://necote.blog.shinobi.jp/Entry/15/

□以下のJavaScriptをメモ帳にコピーペーストした後、保存(ファイル名は適当に分かりやすいもので)。
拡張子を『.txt』→『.js』に変更し、管理画面のファイルアップロードで.jsファイルをアップロードする。

function makeTreeElements (idName,objList) {
 if (!objList.innerHTML) return;
 var objLink = objList.getElementsByTagName('a')[0];
 var linkUrl = objLink.getAttribute('href');
 if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
  var tmplinkUrl = linkUrl.split("#")
  var tmpText = objList.innerHTML.split("⇒");
  tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
  this.base = Array('<a href="',tmplinkUrl[0],'">',tmpText[0],'</a>').join('');
  this.elem = objLink.innerHTML;
 } else if (idName.indexOf('entry') > -1) {
  var tmpText = objList.innerHTML;
  tmpText.match(/\((\d\d\/\d\d)\)/);
  this.base = Array('[',RegExp.$1,']').join('');
  this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
 } else if (idName.indexOf('link') > -1) {
  var tmpText = objList.innerHTML;
  if ( tmpText.match(/\[(.+)\](.+)/) ) {
   this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
   this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
  }
 } else if (idName.indexOf('category') > -1) {
  var tmpText = objList.innerHTML;
  if ( tmpText.match(/\[(.+)\](.+)/) ) {
   this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
   this.elem = Array('<a href="',linkUrl,'">',RegExp.$2,'</a>').join('');
  }
 }
 return this;
}
function createTreeList(idName,option) { // version 2.2
 var objFocus = this.document.getElementById(idName);
 if (!objFocus) return;
 if (!objFocus.innerHTML) return;
 var objLists = objFocus.getElementsByTagName('li');
 var linkList = new Array();
 var outText = new Array();
 if (objLists.length > 0) {
  for (i=0;i<objLists.length;i++) {
   var chckFlag = true;
   var elemText = new makeTreeElements(idName,objLists[i]);
   if (!elemText.base || !elemText.elem) return;
   for (j=0;j<linkList.length;j++) {
    if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
     chckFlag = false;
     linkList[j][linkList[j].length] = elemText.elem;
    }
   }
   if (chckFlag) {
    var tmpNum = linkList.length;
    linkList[tmpNum] = new Array();
    linkList[tmpNum][0] = elemText.elem;
    linkList[tmpNum].base = elemText.base;
   }
  }
  if (linkList.length > 0) {
   outText[outText.length] = '<ul>\n';
   for (i=0;i<linkList.length;i++) {
    outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
    if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
    for (j=0;j<linkList[i].length;j++) {
     outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
     outText[outText.length] = Array(linkList[i][j],option.leef).join('');
    }
    outText[outText.length] = Array(option.btm,'</li>').join('');
   }
   outText[outText.length] = '</ul>\n';
   objFocus.innerHTML = outText.join('');
  }
 }
}

var gTreeOption = new Array;
gTreeOption['sort'] = false;      /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li>';      /* ツリー用マーク(通常) */
gTreeOption['end']  = '<li class="end">';      /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */
gTreeOption['top']  = '<ul class="tree">\n'; /* ツリー本体の最初 */
gTreeOption['btm']  = '</ul>\n';         /* ツリー本体の最後 */

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linkslist',gTreeOption);     // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化


□以下の記述を</body>の前に追加。
この場合、<head>~</head>内ではないことに注意すること。
<script type="text/javascript" src="http://file.***.blog.shinobi.jp/sinobi_java.js"></script>

□ツリー化で使用する下記の2つの画像を右クリック→[名前をつけて画像を保存]し、管理画面のファイルアップロードでアップロードする。
tree_end.gif←これと
 tree_lst.gif



















←この画像です。
 
□CSSの一番下に下記の記述を追加。
.plugin_data ul{
list-style: none;
margin: 0px;
padding: 0px;
}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(http://file.*****.blog.shinobi.jp/tree_lst.gif);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(http://file.*****.blog.shinobi.jp/tree_end.gif);
background-repeat: no-repeat;
}

 
□管理画面プラグインの設定でカテゴリーのHTML編集部分を全て削除し下記の記述に書き換える。

<div class="plugin_data" id="categorylist">
<ul>
<!--plugin_category-->
<li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
<!--/plugin_category-->
</ul>
</div>


 
□管理画面の環境設定のカテゴリーの編集で、各カテゴリーの名称を[親カテゴリー]子供カテゴリーという感じに全て変更する。
※[ ]は半角にすること。
[親1]子供A
[親1]子供B
[親2]子供C
 
とすると、

親1
tree_end.gif子供A
tree_end.gif子供B
親2
tree_end.gif子供C

このように表示されます。

拍手[1回]

PR