--年--月--日

■スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2008年08月06日

■記事別コメント+ツリー化

ブログカスタマイズ覚え書きとして、自分用のメモ記事なので内容はスルーして下さい^^;
・コメントリストを記事別にし、リストiconを付けました。
・個々のリストをツリー化にしてスッキリまとめてみました。

小粋空間様ありがとうございました。m(_ _)m



コメントリストを記事別にまとめて表示する
・コメントリスト用タグの変更+自分カスタム(コメントタイトル表示削除・リストicon追加)
下記のタグをテンプレートに貼り付けます。
<div class="sidetitle">
Recent Comments
</div>

<div class="side" id="commentlist">
<!--rcomment-->
<span><img src="画像URL" border="0"width="7" height="7"> <%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name></a> <%rcomment_month>/<%rcomment_day></li></ul>
<!--/rcomment-->
</div>
※貼り付けた後、タグに改行はNG。 青文字部分にリストiconの追加。

・スクリプトの追加
コメントを記事別にまとめるためのスクリプト(下記)をテンプレートの最後の方に追加。
<script type="text/javascript">
function deleteTextNode(node) {
if(node.parentNode != undefined){
// node.parentNode.removeChild(node);
}
}
function collateData(id) {
var data = '';
var counter = 0;
var ul = new Array('');
var li = new Array('');
var flag;
var elements = document.getElementById(id).getElementsByTagName('span');
for (i = 0; i < elements.length; i++) {
flag = false;
for (j = 0; j < ul.length; j++) {
if (ul[j] == elements[i].innerHTML) {
flag = true;
deleteTextNode(elements[i].nextSibling);
li[j] += elements[i].nextSibling.innerHTML + '\n';
}
}
if (!flag) {
ul[counter] = elements[i].innerHTML;
deleteTextNode(elements[i].nextSibling);
if(li[counter] == undefined){
li[counter] = elements[i].nextSibling.innerHTML + '\n';
} else {
li[counter] += elements[i].nextSibling.innerHTML + '\n';
}
counter++;
}
}
for (i = 0; i < counter; i++) {
data += '<span>'+ul[i]+'</span>';
data += '<ul>'+li[i]+'</ul>';
}
document.getElementById(id).innerHTML = data;
}
collateData('commentlist');
</script>
※赤色の部分はコメントリスト用タグと必ず同じものにする。

サイドメニューのツリー化スクリプト
1.maketree.js DL+UL

2.リスト表示用タグ修正およびJavaScript起動用スクリプト設定。
青色部分が新たに追加する部分です。赤色は任意の名称を設定します。
(タグの id 属性とスクリプト部分の名称が一致するように設定してください)
<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>

<div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<!-- エントリーリスト終了 -->

<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>
※カテゴリー・月別アーカイブ・コメントリストも同様に修正。

※コメントリストのスクリプトタグは、記事別表示用タグに追加。
<script type="text/javascript">

    ~~ 省略 ~~

collateData('commentlist');
generateNormalTree("commentlist");
</script>

3.maketree.js インクルード文挿入
HTMLテンプレートの<head>~</head>の間に下記のタグを追加。

<script type="text/javascript" src="<%url>file/maketree.js" charset="utf-8"></script>

※赤文字部分は『 1 』でUPしたmaketree.jsのファイルURLに変更。

4.ツリー画像のDL+UL
リンクを右クリックして「対象をファイルに保存」を選択します。
DLした画像は管理メニューの「ファイルアップロード」でUPして下さい。
tree_lst_dotted.gif
tree_end_dotted.gif

5.スタイルシート追加
スタイルシートの.sideの下辺りに下記のクラス指定を追加します。
ul.tree {
margin: 0 0 0 3px!important;
padding: 0!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 13px!important;
background-image: url(http://domain/file/tree_lst.gif);
background-position: 0 0;
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(http://domain/file/tree_end.gif);
list-style: none;
}
※赤文字部分は、アップロードしたファイルのURLを指定。


だんだん元のブログに近づいてきた~ リストアイコンを減らしたからこっちの方がすっきりしてるかな。

メイン

コメント

コメントする

サイト管理者にのみ通知する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。