まず、以下のタグ（ツリー化）を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-->"> <!--$plugin_comment_name--> (<!--$plugin_comment_mon-->/<!--$plugin_comment_day-->) <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-->"> <font color="#333333"><!--$g_nickname--></font> <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> (<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->) <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 !!");
// Upマーク
if(c == "up") document.write("Up !!");
}
}
//-->
</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; /*パディング消し*/
}
|
長いですが、以上で終わりです。
Christmastide月華
Kun
Pearl Box
*MARIA
Atelier Black/White
Egg* Station