ＣｕｓbｌO

 ＨＴＭＬ
Ⅰ．＜／ｂｏｄｙ＞直下に

 

<script type="text/javascript">

<!--

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('newentcate') > -1) {

var objLink1 = objList.getElementsByTagName('a')[1];

var linkUrl1 = objLink1.getAttribute('href');

 

var tmpText = objList.innerHTML.split("⇒");

tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));

 

this.base = Array('',tmpText[0],'').join('');

this.elem = Array('',tmpText[1],'').join('');

 

} 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).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('newentcate',gTreeOption); // 最新エントリリストのツリー化

createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化

createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化

createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化

createTreeList('linkslist',gTreeOption);     // リンクリストのツリー化

createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化

// -->

</script>

 

Ⅱ．CSS　一番下に
.plugin_data ul{
list-style: none;
margin: 0px;
padding: 0px;
line-height: 130%;　説明：この説明はＣＳＳにコピペ後、削除する
行間変更好きな半角数字に変更
％低いほど行間狭い縦が短め　％高いほど行間広い縦が長め
注意：記事全体の横幅指定がなく、/*全体の設定*/で横幅が設定されている場合 %が低い場合カラム落ちする場合があります。
}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(リスト用画像線ＵＲＬ);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(リスト用画像終わりＵＲＬ);
background-repeat: no-repeat;
}

---

カテゴリ編集

Ⅰ．カテゴリを作る
スタイル
親カテゴリ
子カテゴリ

[親カテゴリ名]子カテゴリ　を複数作る
[　↑同じ親カテゴリ名にする　]


ツリー用画像　ＤＬ用　

画像⇒　リスト用終わり線
↓リスト用線
 

最新コメント