スポンサーサイト

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

FC2ブログの最近のコメント、トラバ、記事のツリー化

2007年02月26日
コメントやトラックバックのツリー化は私にとって欠かせないものです。
どの記事にコメントやトラックバックが入ったか分かりやすいですし、
過去の記事にコメントが入ってもコメントが入った順番で表示されるので
(なので過去記事にコメントしても気づきますからね♪
過去記事でもどんどんコメントしちゃってくださいね♪)
見落としが少なく、レスを忘れる確率が格段に減ります。

そこでテンプレートを変えた後、着手したのがこちらのカスタマイズでした。
「小粋空間」のyujiroさんの
「コメントリストを記事別にまとめて表示する for FC2 ブログ」
「サイドメニューのツリー化スクリプト for FC2 ブログ」
「yozoの気が向いたと記2.0」yozoさん
右サイドバーのメニューのツリー化する。(1)を参考にさせていただきました。
ちなみに私は「小粋空間」のyujiroさんのテンプレートを使わせてもらっています♪
詳しくは「小粋空間」さまのテンプレに変更いたしました♪をご覧ください。

(1)まずは最近のコメント、最近のトラックバックの部分のタグを以下のタグに変更します。
こちらのソースは「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>


トラックバックの部分は
<!-- 最近のトラックバック開始 -->から<!-- 最近のトラックバック終了 -->の部分を
以下の記述に変更してください。
<div class="sidetitle">
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>

070226tree3.jpg

このスクリプトだと左のキャプのように
自分の記事タイトルの下に
トラバをくださった方の記事タイトルとブログ名が出ます。
どの記事にどんなトラバが入ったかが
非常に分かりやすいです。(o^-')b グッ!
そしてトラックバックを入れてくれた方の
記事タイトルを押すと
そのトラックバック部分へ飛ぶように
変更いたしました。


その際、思った通りに動かなかったので
小粋空間様のhtmlの中の
<!-- トラックバック本文 -->
<div class="trackback" id="p<%tb_no>">
の部分のid="p<%tb_no>をid="trackback<%tb_no>に変更しました。
同じページに同じidがある場合は変更する必要があるようです。

(2)次に次のスクリプトをコピペします。

<div id="footer">Copyright c 200x xxxxx by FC2 BLOG All Rights Reserved.</div>


</div><!-- /box -->

の後に入れてくださいね。
<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>

最近のコメント部分は赤字部分、
最近のトラックバック部分は青字の部分を追加してください。


(3)「サイドメニューのツリー化スクリプト for FC2 ブログ」の記事より
maketree.jsをダウンロードしてください。

そしてmaketree.jsをFC2ブログのファイルアップロード機能を使ってアップロードです♪

(4)次にhtmlの</head>の手前に下の記述を入れます♪
<script type="text/javascript" src="<%url>file/maketree.js" charset="utf-8"></script>

(5)ツリー化のための線の画像をダウンロードします。
「サイドメニューのツリー化スクリプト for FC2 ブログ」の記事に
実線と点線の画像が用意されています。
私は実線の方を選びました。
そしてこちらもアップロードします。

(6)CSSの変更です。
次の記述をCSSに追加します。
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://~/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;
}

赤字の部分は画像のアドレスにします。
これで最近のコメントとトラックバックの部分がツリー化されるはず!!


070226tree1.jpg

さてもうひとつ。
最近の記事の部分が気になっていました。
左のキャプのようにただ一覧になっていて、
いつの記事なのかがちょっと分かりづらい。。。
日付の下に記事タイトルが出るように
してみることにしました。


まずは最近の記事のプラグイン部分を以下のように変更します。

<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>
<!-- エントリーリスト終了 -->


そしてさきほど上の(2)で追加したスクリプトに下の記述を追加。
collateData('entrylist');
generateNormalTree("entrylist");
赤字、青字で書いた部分の下に入れればいいと思います。

070226tree2.jpg

これで左のキャプのようなツリー化になりますよ♪


yujiroさん、yozoさん、おかげで見やすくなりました。
ありがとうございました♪ペコリ(o_ _)o))


もしもこのカスタマイズに挑戦されるのでしたら、
バックアップはくれぐれも忘れずに!!



↓ポチっとしてくれると嬉しいです♪ペコリ(o_ _)o))
banner_02.gif

スポンサーサイト

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

メイン

トラックバックURL


トラックバック

右サイドバーのメニューのツリー化する。(2) from yozoの気が向いたと記2.0
「Recent Comments」(最近のコメント)、「Monthly Archives」(最近のトラックバック)を記事別にツリー化します。このカスタマイズは、小粋空間のyujiroさんの記事コメントリストを記事別にまとめて表示する for FC2 ブ [Read More]

右サイドバーのメニューのツリー化する。(1) from yozoの気が向いたと記2.0
「Categories」(カテゴリーリスト)、「Monthly Archives」(アーカイブリスト)、「Recent Entries」(最近のエントリー)、「Links」(リンク)のツリー化をしました。このカスタマイズは、小粋空間のyujiroさんの記事サイドメ [Read More]

コメント

まゆびさん、こんばんはー♪
FC2ブログ用ツリー化カスタマイズですね。yozoもこちらと同じ小粋空間テンプレートですけど、このカスタマイズは、FC2ブログなら可能なカスタマイズですよね。とってもわかりやすくて親切だと思いまっす。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪
 トラバ部分のIDの修正、最近の記事のツリー化部分はyozoもできていませんでしたので、たった今、そのままソースをお借りしてカスタマイズしてきました。ありがとーございまっす♪m(_ _)m
 ちなみに、この記事にある3つのツリー化見本画像のスクロールバーを、なんと3回も触ってしまい、当然動かなくて、「(/≧◇≦\)アチャー!!」って、なったyozoでっす。ヒソヒソ(ノ・o・((。_。*)フムフム

追伸:記事でのyozoの紹介及びトラバありがとーございまっす♪
こちらからもお返しトラバいれさせていただきました。m(_ _)m
yozoさん、こんばんは♪ヾ(=^▽^=)ノ
コメント等のツリー化は本当に便利ですよね~♪
いただいたコメントにしっかりお返事するにはこれがないと!!
分かりやすいですか!!yozoさんにそういっていただけると
本当に嬉しいです♪(゚-゚*)(。。*)ウンウン
>トラバ部分のIDの修正、最近の記事のツリー化部分はyozoもできていませんでしたので、
>たった今、そのままソースをお借りしてカスタマイズしてきました。
いえいえ、お役に立ててよかったです♪(´▽`) ホッ
トラックバック部分はこれでより使いやすくなったのではと思います♪
クリックするといただいたトラバのところへ行きますので♪(*'ー'*)ふふっ♪

ああ、キャプのスクロールバー、触ってしまいましたか!!
すみませんー。ペコリ(o_ _)o))
私も記事をアップしたあとにややこしいなぁと思ったのですが。
実は私も引っかかりました。(笑)

yozoさんの分かりやすい記事のおかげで本当に助かりました。
いつもいろいろお世話になっております。
本当にありがとうございます!!(*- -)(*_ _)ペコリ
トラバもありがとうございました!!d(*⌒▽⌒*)b ニコニコッ
まゆび様、こんにちはw
FC2のブログは壁紙も変えてないほど無精しているのですが、こういう記事を見ると、やってみたくなりますよねw
ただ、ここまでいじれると、際限なくやってしまいそうな気もしますf(^_^;)
まこさん、こんにちは♪(o・ω・)ノ
FC2はテンプレートもいろいろありますものね~。
私も使ってみようかな?と思うのですが、
ツリー化スクリプトなどを追加しないといけなかったりすると
それも面倒で。(笑)
最近はいろいろ自分でいじるのも楽しいです♪
もちろんいじっている間はいらいらしてますけど。(爆)
>ただ、ここまでいじれると、際限なくやってしまいそうな気もしますf(^_^;)
そうなんです!!なんでもかんでもやってみたくなっちゃって。(笑)
はじめまして。
こちらのツリー化のタグを参考にして
ただいま格闘中です。

CSSに追加の部分をいじるとツりー化された部分の位置をずらすことができるとわかったのですが、
親記事の頭の位置がほかのプラグイン内の項目と揃わないんです。
どこかでロックされているんでしょうか?

その他のタグも含め、数字の部分をあれこれいじってみているのですが、親記事の位置だけは変化しないんです。
うずらさん、はじめまして。
使用しているテンプレートによって記述が違いますので、
いただいたコメント内容だけですと、正直どんな状態になっているのかが分かりかねます。
これはあくまで推測ですが、『他のプラグインの項目と揃わない』というのは、
paddingかmarginの設定ではないでしょうか?
これくらいのことしか助言が出来ずに申し訳ないです。
なお、私はサポートの人間ではございませんので
今後はURLを入力していただけない質問は、
ご遠慮していただけますようにお願いいたします。
ご協力よろしくお願いします。

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。


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