◆ツリー化と新着マーク

プラグインコメント欄の、ツリー化スクリプトの挿入と、記事・コメントの新着マーク表示方法。
(忍者テンプレート用)

自分のための覚書です。（*＾艸＾）
あとは、何度でもコピペで使えますから楽ちんなのです♪
ちなみに、ニンブロラボ様　TMP*blog様の記事を参考にさせていただいております。

長いので、折りたたみます（o＾∇＾o）ノ

まず、以下のタグ（ツリー化）を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('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'] = '├'; /* ツリー用マーク(通常) */ gTreeOption['end'] = '└'; /* ツリー用マーク(末端) */ gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */ gTreeOption['top'] = '<br />\n'; /* ツリー本体の最初 */ gTreeOption['btm'] = ''; /* ツリー本体の最後 */ createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化 createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化 createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化 createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化 createTreeList('linkslist',gTreeOption);     // リンクリストのツリー化 createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化 // --> </script>

次に、プラグインの最新コメント表示欄のCSSを変更します。
このテンプレートのように、返信済画像を使用せず管理者の名前を投稿者の下に表示し、なおかつ記事のアップ時に “UP♪” 新着コメントに “New♪ ”マークを表示させます。

プラグイン最新コメント編集画面を開き、以下のCSSをコピペで貼り付けます。
フォントの色は、お好みの色に変えて下さい。

<div class="plugin_data" id="commentlist"> <ul> <!--plugin_comment--> <li><font color="#ffffff"><!--$plugin_comment_entry_title--></font><br />⇒<a href="<!--$plugin_comment_link-->">&nbsp;<!--$plugin_comment_name-->&nbsp;(<!--$plugin_comment_mon-->/<!--$plugin_comment_day-->)&nbsp;&nbsp;<font color="#ff1493"><SCRIPT>newUp(<!--$plugin_comment_year-->,<!--$plugin_comment_mon-->,<!--$plugin_comment_day-->,"new") </script></font></a></li> <!--if_comment_res--><li><font color="#ffffff"><!--$plugin_comment_entry_title--></font><br />⇒<a href="<!--$plugin_comment_link-->">&nbsp;&nbsp;&nbsp;<font color="#333333"><!--$g_nickname--></font>&nbsp;&nbsp;<font color="#ff1493"><SCRIPT>newUp(<!--$plugin_comment_res_year-->,<!--$plugin_comment_res_mon-->,<!--$plugin_comment_res_day-->,"new") </script></font></a></li><!--/if_comment_res--> <!--/plugin_comment--></ul> </div>

次に、プラグインの最新記事のCSSも以下に変えます。

<!--plugin_entry--> <div class="plugin_data"> <a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>&nbsp;(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)&nbsp;&nbsp;&nbsp;<font color="#ff1493"><SCRIPT>newUp(<!--$plugin_entry_year-->,<!--$plugin_entry_mon-->,<!--$plugin_entry_day-->,"up") </script></font> </div> <!--/plugin_entry-->

まだこれだけでは、“New”　“Up”　の文字は表示されませんので、最後に新着マーク表示用のスクリプトをhtmlに埋め込みます。
html上部の、（/head）の真上に以下のタグを埋め込みます。

<SCRIPT LANGUAGE="JavaScript"> <!-- // 一定期間New/Upマークを表示する function newUp(y, m, d, c) { delDay = 2; // 何日後に削除するか oldDay = new Date(y + "/" + m + "/" +d); newDay = new Date(); d =(newDay - oldDay) / (1000 * 24 * 3600); if(d <= delDay) { // Newマーク if(c == "new") document.write("New&nbsp;!!"); // Upマーク if(c == "up") document.write("Up&nbsp;!!"); } } //--> </SCRIPT> <style type="text/css"> <!-- body { } ul {  list-style-image : url("画像のURL") ; } --> </style>

スクリプト以下、スタイルシートを使った部分（着色部分）は、コメントエントリータイトル前に表示される画像の指定です。
必要ない場合は削除して下さって結構ですが、黒丸ポチがついてしまいます。
これは、リストマークタグによるものなのですが・・・
背景色ピンクの部分は、投降後何日新着マークを表示するかの数です。
お好みで変えて下さい。
ちなみにここでは、2日としています。
赤文字のURLは、リストマーク画像ですのでご自分のお好みのものに変えて下さい。


最後に、ツリー化することによって、プラグインに変な隙間ができることがありますが、それを防ぐためにもCSSを書き加えます。
CSSの一番下に以下のタグをコピペしてください。

div#newentrylist, div#linkslist, div#commentlist, div#tblist, div#categorylist{ list-style: none; border:none; /*ボーダーを消す*/ background-image:none; /*背景画像を消す*/ background-color: transparent; /*背景色をなしに*/ margin: 0px; /*マージン消し*/ padding: 0px; /*パディング消し*/ }

長いですが、以上で終わりです。