FC2ブログの「最近の記事＋コメント」プラグインをきれいなツリーにする
FC2ブログの人気プラグイン「最近の記事＋コメント」のツリー表示を、画像を使ってきれいなツリーにするカスタマイズです。
以下、カスタマイズ方法です。すでに「最近の記事＋コメント」プラグインを適用されている状態から説明を開始します。
適用されていない場合は、FC2 ブログ管理画面より、「プラグインの追加 [ 公式 / 共有 ]」の「共有」のリンクをクリックし、次ページに表示されている「最近の記事＋コメント」をクリック、さらに次ページで「追加する」のフォームボタンをクリックしてください。これで、その少し上にある「プラグインカテゴリー」の位置に「最近の記事＋コメント」が表示されます。
１．プラグインのHTML編集
FC2ブログの管理画面より、[環境設定] - [プラグインの設定] で、プラグインカテゴリーに表示されている「最近の記事＋コメント」の右側にある「HTMLの変更」をクリックします。
次のページで表示されたテキストエリアをスクロールし、下の内容、
を、下のリストの赤色部分を削除し、青色を追加してください。よく分からない方は「変更後」のリストをマウスコピーし、元のソースコードの同じ行の部分と丸ごと入れ替えてください。
テキストエリアが狭いので、任意のエディタに一旦コピーしてから編集した方が分かりやすいでしょう。
変更前
var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '';
var FMT_COMM_BODY = ' <BR />├ %COMMENT%';
var FMT_COMM_TAIL = '';
var FMT_PARENT_TAIL = ' </LI>';
var FMT_TAIL = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL = ' <BR />└ %COMMENT%';変更後
var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL>';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </LI>';
var FMT_TAIL = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL = ' <LI class="tree_end"> %COMMENT%</LI>';
大体お分かりと思いますが修正内容は、ツリー用のテキストを削除し、その代わりに順序なしリストタグ（ul / li）を追加しています。この追加した ul タグおよび li タグは必ず大文字で記述してください。小文字で記述すると内容が全く表示されなくなるという不具合が確認されました。
２．スタイルシートの修正
スタイルシートに下記を追加してください。
設定は当サイトで公開しているテンプレートに合わせておりますので、ご利用のテンプレートによってはプロパティの設定を変更する必要があるかもしれません。予めご了承ください（分からない場合はご質問ください）。
.tree {
margin-left: 3px;
padding: 0 0 0 15px;
background: url(http://blog-imgs-2.fc2.com/k/o/i/koikikukan/tree_lst.gif) no-repeat 2px 0;
list-style: none;
}
.tree_end {
margin-left: 3px;
padding: 0 0 0 15px;
background: url(http://blog-imgs-2.fc2.com/k/o/i/koikikukan/tree_end.gif) no-repeat 2px 0;
list-style: none;
}また、ツリー画像のURLは私のサイトにある画像を読み込むようにしています。他の画像を利用したい場合は、ご自身のサイトに画像ファイルをアップロードし、その画像ファイルを読み込むようにしてください。
tree_lst.gif は 途中のツリー画像、tree_end.gif は最後のツリー画像です。
FC2ブログのツリー化された「最近のコメント」のリンクから該当コメントにジャンプする
FCブログの一部のテンプレートで利用されているツリー化スクリプトを修正し、ツリー化された「最近のコメント」のリンクから該当のコメントに直接ジャンプする方法を紹介します。
ご質問された方が利用されているテンプレートは [simple-w] というものですが、カスタマイズ自体は Jugem カスタマイズ講座から継承された汎用的なもので、下記のサイトで同じスクリプトが公開されています。
１．「最近のコメント」タグの変更
抜粋で変更箇所を掲載します。a 要素にコメント番号を示すための id 属性を追加しています。
変更前
：
<!--rcomment-->
<li>
<%rcomment_etitle><br/>
<a href="<%rcomment_link>#comment_head"><%rcomment_name><span class="day"> (<%rcomment_month>/<%rcomment_day>)</span></a>
</li>
<!--/rcomment-->
：変更後
：
<!--rcomment-->
<li>
<%rcomment_etitle><br/>
<a href="<%rcomment_link>#comment_head" id="comment<%rcomment_no>"><%rcomment_name><span class="day"> (<%rcomment_month>/<%rcomment_day>)</span></a>
</li>
<!--/rcomment-->
：２．スクリプトの修正
こちらも抜粋で変更箇所を示します。追加した処理で、コメントリストに付与した id 属性値を取得し、それを各コメントリンクの href 属性の # の後方に設定しています。
変更前
：
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
：変更後
：
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
var linkId = objLink.getAttribute('id');
var tmpLink = linkUrl.split("#");
this.elem = '<a href="' + tmpLink[0] + '#' + linkId + '">' + objLink.innerHTML + '</a>';
} else if (idName.indexOf('entry') > -1) {
：
