ＦＣ２ブログの最近のコメント、トラバ、記事のツリー化
どの記事にコメントやトラックバックが入ったか分かりやすいですし、
過去の記事にコメントが入ってもコメントが入った順番で表示されるので
(なので過去記事にコメントしても気づきますからね♪
過去記事でもどんどんコメントしちゃってくださいね♪)
見落としが少なく、レスを忘れる確率が格段に減ります。
「小粋空間」のyujiroさんの
「コメントリストを記事別にまとめて表示する for FC2 ブログ」と
「サイドメニューのツリー化スクリプト for FC2 ブログ」、
「yozoの気が向いたと記2.0」のyozoさんの
右サイドバーのメニューのツリー化する。(1)を参考にさせていただきました。
ちなみに私は「小粋空間」のyujiroさんのテンプレートを使わせてもらっています♪
詳しくは「小粋空間」さまのテンプレに変更いたしました♪をご覧ください。
こちらのソースは「yozoの気が向いたと記2.0」のyozoさんの
「右サイドバーのメニューのツリー化する。(2)」の記事を参考にさせていただきました。
次のように書き換えてください。
<div class="sidetitle">
Recent Comments
</div>
<div class="side" id="commentlist">
<!--rcomment-->
<span><%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li></ul>
<!--/rcomment-->
</div>
<!-- 最近のトラックバック開始 -->から<!-- 最近のトラックバック終了 -->の部分を
以下の記述に変更してください。
Recent Trackbacks
</div>
<div class="side" id="trackbacklist">
<!--rtrackback-->
<span><a href="<%rtrackback_link>"><%rtrackback_etitle></a></span><ul><li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_title></a><br /><%rtrackback_blog_name> <%rtrackback_month>/<%rtrackback_day></li></ul>
<!--/rtrackback-->
</div>
このスクリプトだと左のキャプのように
自分の記事タイトルの下に
トラバをくださった方の記事タイトルとブログ名が出ます。
どの記事にどんなトラバが入ったかが
非常に分かりやすいです。(o^-')b グッ!
そしてトラックバックを入れてくれた方の
記事タイトルを押すと
そのトラックバック部分へ飛ぶように
変更いたしました。
小粋空間様のhtmlの中の
<div class="trackback" id="p<%tb_no>">
の部分のid="p<%tb_no>をid="trackback<%tb_no>に変更しました。
<div id="footer">Copyright c 200x xxxxx by FC2 BLOG All Rights Reserved.</div>
</div><!-- /box -->
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>
最近のコメント部分は赤字部分、
最近のトラックバック部分は青字の部分を追加してください。
maketree.jsをダウンロードしてください。
そしてmaketree.jsをFC2ブログのファイルアップロード機能を使ってアップロードです♪
「サイドメニューのツリー化スクリプト for FC2 ブログ」の記事に
実線と点線の画像が用意されています。
私は実線の方を選びました。
そしてこちらもアップロードします。
次の記述をCSSに追加します。
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://〜/tree_lst_solid.gif);
background-position: 0 0;
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(http://〜/tree_end_solid.gif);
list-style: none;
}
赤字の部分は画像のアドレスにします。
これで最近のコメントとトラックバックの部分がツリー化されるはず!!
さてもうひとつ。
最近の記事の部分が気になっていました。
左のキャプのようにただ一覧になっていて、
いつの記事なのかがちょっと分かりづらい。。。
日付の下に記事タイトルが出るように
してみることにしました。
<div class="sidetitle">
最近の記事♪
</div>
<div class="side" id="entrylist">
<!--recent-->
<span><%recent_month>月<%recent_day>日</span><ul><li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li></ul>
<!--/recent-->
</div>
<!-- エントリーリスト終了 -->
generateNormalTree("entrylist");
これで左のキャプのようなツリー化になりますよ♪
yujiroさん、yozoさん、おかげで見やすくなりました。
ありがとうございました♪ペコリ(o_ _)ｏ))
もしもこのカスタマイズに挑戦されるのでしたら、
バックアップはくれぐれも忘れずに!!
↓ポチっとしてくれると嬉しいです♪ペコリ(o_ _)ｏ))
コメント
FC2ブログ用ツリー化カスタマイズですね。yozoもこちらと同じ小粋空間テンプレートですけど、このカスタマイズは、FC2ブログなら可能なカスタマイズですよね。とってもわかりやすくて親切だと思いまっす。(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
トラバ部分のIDの修正、最近の記事のツリー化部分はyozoもできていませんでしたので、たった今、そのままソースをお借りしてカスタマイズしてきました。ありがとーございまっす♪m(_ _)m
ちなみに、この記事にある３つのツリー化見本画像のスクロールバーを、なんと３回も触ってしまい、当然動かなくて、「(/≧◇≦＼)ｱﾁｬｰ!!」って、なったyozoでっす。ﾋｿﾋｿ(ﾉ･o･((｡_｡*)ﾌﾑﾌﾑ
追伸：記事でのyozoの紹介及びトラバありがとーございまっす♪
こちらからもお返しトラバいれさせていただきました。m(_ _)m
Posted by yozo at 2007.02.26 20:06 | edit
コメント等のツリー化は本当に便利ですよね〜♪
いただいたコメントにしっかりお返事するにはこれがないと!!
分かりやすいですか!!yozoさんにそういっていただけると
本当に嬉しいです♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞トラバ部分のIDの修正、最近の記事のツリー化部分はyozoもできていませんでしたので、
＞たった今、そのままソースをお借りしてカスタマイズしてきました。
いえいえ、お役に立ててよかったです♪(´▽｀) ホッ
トラックバック部分はこれでより使いやすくなったのではと思います♪
クリックするといただいたトラバのところへ行きますので♪(*'ー'*)ふふっ♪
ああ、キャプのスクロールバー、触ってしまいましたか!!
すみませんー。ペコリ(o_ _)ｏ))
私も記事をアップしたあとにややこしいなぁと思ったのですが。
実は私も引っかかりました。(笑)
yozoさんの分かりやすい記事のおかげで本当に助かりました。
いつもいろいろお世話になっております。
本当にありがとうございます!!(*- -)(*_ _)ペコリ
トラバもありがとうございました!!d(*⌒▽⌒*)b ﾆｺﾆｺｯ
Posted by まゆび→yozoさんへ at 2007.02.26 22:34 | edit
ＦＣ２のブログは壁紙も変えてないほど無精しているのですが、こういう記事を見ると、やってみたくなりますよねｗ
ただ、ここまでいじれると、際限なくやってしまいそうな気もしますf(^_^;)
Posted by 柴成 at 2007.02.27 07:07 | edit
ＦＣ２はテンプレートもいろいろありますものね〜。
私も使ってみようかな？と思うのですが、
ツリー化スクリプトなどを追加しないといけなかったりすると
それも面倒で。(笑)
最近はいろいろ自分でいじるのも楽しいです♪
もちろんいじっている間はいらいらしてますけど。(爆)
＞ただ、ここまでいじれると、際限なくやってしまいそうな気もしますf(^_^;)
そうなんです!!なんでもかんでもやってみたくなっちゃって。(笑)
Posted by まゆび→柴成さんへ at 2007.02.27 17:04 | edit
こちらのツリー化のタグを参考にして
ただいま格闘中です。
CSSに追加の部分をいじるとツりー化された部分の位置をずらすことができるとわかったのですが、
親記事の頭の位置がほかのプラグイン内の項目と揃わないんです。
どこかでロックされているんでしょうか？
その他のタグも含め、数字の部分をあれこれいじってみているのですが、親記事の位置だけは変化しないんです。
Posted by うずら at 2007.03.04 00:50 | edit
使用しているテンプレートによって記述が違いますので、
いただいたコメント内容だけですと、正直どんな状態になっているのかが分かりかねます。
これはあくまで推測ですが、『他のプラグインの項目と揃わない』というのは、
paddingかmarginの設定ではないでしょうか？
これくらいのことしか助言が出来ずに申し訳ないです。
なお、私はサポートの人間ではございませんので
今後はURLを入力していただけない質問は、
ご遠慮していただけますようにお願いいたします。
ご協力よろしくお願いします。
Posted by まゆび→うずらさんへ at 2007.03.04 16:01 | edit