忍者ブログ

刻ノ深淵

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

2017.12│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

カテゴリのツリー化。

■カテゴリのツリー化。
色々考えた末にカテゴリのツリー化に踏み切りました。
画像を使わない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
*COMMENT-コメント-
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。 
■カレンダー
11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
■プロフィール
HN:
sui
性別:
非公開
■最新記事
---2013/10/24 00:06
---2013/10/23 23:48
---2013/02/03 22:59
---2012/07/29 19:36
---2012/07/29 18:16
■最新コメント
[02/05 mic]
[05/01 きろ]
[04/23 きろ]
[03/25 通りすがり]
[03/23 通りすがり]
■ブログ内検索
■バーコード
■カウンター
■ブクログ
■防振ゴム
天然ゴムシート GS-16
天然ゴムシート GS-16
■CAC化粧品
■DHC
■B・R・Y
■楽天
■ポイントサイト
■アンケートサイト
マクロミルへ登録
■アド
■フリーエリア