忍者ブログ

CusblO

忍者ブログテンプレートカスタマイズ ブログテンプレートCSS/HTMLカスタマイズ覚書 忍者用ブログテンプレート作成中

HOME[PR]カラムとサイドバーとプラグインツリー化表示と行間変更 最新コメント

[PR]

07/24(Mon)  YESR2017

×

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

ツリー化表示と行間変更 最新コメント

03/07(Sun)  YESR2010

 HTML
Ⅰ.</body>直下に

 

<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%; 説明:この説明はCSSにコピペ後、削除する
行間変更好きな半角数字に変更
%低いほど行間狭い縦が短め %高いほど行間広い縦が長め
注意:記事全体の横幅指定がなく、/*全体の設定*/で横幅が設定されている場合 %が低い場合カラム落ちする場合があります。

}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(リスト用画像線URL);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(リスト用画像終わりURL);
background-repeat: no-repeat;
}



カテゴリ編集

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

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


ツリー用画像
 DL用 

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



管理画面プラグイン⇒ツリー化したいプラグインのHTML編集⇒全て削除後以下コピペ
最新コメント
<div class="plugin_data" id="newentcate">
<ul>
<!--plugin_entry-->
<li><a href="<!--$plugin_entry_category_link-->"><!--$plugin_entry_category--></a><br />⇒<a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title-->(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</a>
<!--/plugin_entry-->
</ul>
</div>

拍手

PR

この記事にコメントする

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
 管理人だけに表示

この記事へのトラックバック

この記事にトラックバックする:

ブログ著作権表記« HOME »最新記事表示

最新コメント
[04/23 管理人]

最新トラックバック
(03/10)

Yurapisは、Twitterとmyspace同期中

ブログ:
ネーム:
かすぽ
趣味:
美しい・綺麗なものの鑑賞
自己紹介:
CusBloスタート:2010.03.07
3月16日1作目完成とどうじに愛猫天使記念日

最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中

素材配布サイト様へ:リンク漏れが有る場合以下の専用ページにコメントください



Copyright (C) CusblO
TEMPLATE by CusBlo
     忍者ブログ [PR]
 | 管理 | 新記事