右サイドバーのメニューのツリー化する。(2) yozoの気が向いたと記2.0

右サイドバーのメニューのツリー化する。(2)

「Recent Comments」(最近のコメント)、「Monthly Archives」(最近のトラックバック)を記事別にツリー化します。

このカスタマイズは、小粋空間のyujiroさんの記事コメントリストを記事別にまとめて表示する for FC2 ブログを参考にさせていただきました。yujiroさん、どうもありがとうございました　m(_ _)m

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにRecent Commentsと入力して、検索してください。
から続く下のコードの赤字のコードを追加します。
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪

<div class="sidetitle">
Recent Comments
</div>
<div class="side" id="commentlist">

<span><a href="<%rcomment_link>"><%rcomment_etitle></a></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_name></a> <%rcomment_month>/<%rcomment_day></li></ul>

</div>


<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side" id="trackbacklist">

<span><a href="<%rtrackback_link>"><%rtrackback_etitle></a></span><ul><li><a href="<%rtrackback_link>#c<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_title></a><br /><%rtrackback_blog_name> <%rtrackback_month>/<%rtrackback_day></li></ul>

</div>
この「テンプレートの編集」画面はそのまま残しておいて、yujiroさんの記事コメントリストを記事別にまとめて表示する for FC2 ブログを別ウィンドウ開いて、「2.」のスクリプトをコピーします。
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに/boxと入力して、検索してください。
の下にスクリプトを貼り付けます。
<br class="clear" />

<div id="footer">Copyright ©2005-2006 yozoの気が向いたと記2.0 by FC2 BLOG All Rights Reserved.</div>
</div>
<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');
generateNormalTree("commentlist");
collateData('trackbacklist');
generateNormalTree("trackbacklist");
</script>
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
～省略～

</script>
</body>
</html>

※collateData('commentlist');の下に、この3行を追加してください。
collateData('commentlist');
generateNormalTree("commentlist");
collateData('trackbacklist');
generateNormalTree("trackbacklist");
[プレビュー]で確認して、[更新]をクリックしましょう。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

なお、このテンプレートは、小粋空間のyujiroさん作成のFC2ブログテンプレートからお借りしたものです。

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:テンプレート:ブログ

出来ない、出来ないと言っていたコメントのツリー化が出来たような気がする。
実はツリーになるにはきっと新記事へのコメントが必要かと思うので、次に新しい記事を書いたら確認しよう！(爆)
こちらでは随分とお世話になりました。ありがとう。＞ってまだ未確認（＾＾；

Posted by ととろ at 2006.06.01 12:06 | edit

ととろさん、こんにちはー♪
ツリー化できてましたね。ｵﾒﾃﾞﾄ(*^ｰ^*)∠※Pan!!｡･:*:･
カレンダー部分もとてもきれいになっているし・・・CSSカスタマイズの腕を上げたのですね♪d(ﾟ-^*) ﾅｲｽ♪
yozoはぼちぼち・・・というか、コメント欄のURLがずれてますね。今から直しまーす（苦笑）

Posted by ととろさんへ at 2006.06.01 14:55 | edit

yozoの気が向いたと記2.0

BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪

スポンサーサイト