FC2ブログ・プラグイン「最新の記事＋コメント」の使い方
FC2ブログで人気の共有プラグイン「最新の記事＋コメント」は、最近の記事表示と最近のコメントを同時に表示するものです。コメントは記事毎にまとめて表示し、折りたたみも可能です。
コメントを折りたたんだ状態
本エントリーでは「最新の記事＋コメント」の設定・カスタマイズと、当ブログで公開している「追記文章の折りたたみ 2.0 for FC2 ブログ」を併用したときに発生する不具合の解消方法を説明します。
１．「最新の記事＋コメント」の設定
FC2ブログ管理画面の「環境設定」の「プラグインの設定」をクリック。
「プラグインの設定」の「共有プラグイン追加」をクリック。
「最近の記事＋コメント」で検索。
これでプラグインが表示されるので、「名前」のリンクまたは画像リンクをクリック。
ダウンロード設定を行って、ダウンロードをクリックすれば完了です。
２．「最新の記事＋コメント」のツリーをきれいに表示する
冒頭のサンプルのようにツリーをきれいに表示するには、「FC2ブログの「最近の記事＋コメント」プラグインをきれいなツリーにする」のカスタマイズを行ってください。
カスタマイズ前
カスタマイズ後
３．追記文章の折りたたみとの併用
また、当サイトで公開している「追記文章の折りたたみ 2.0 for FC2 ブログ」は、追記文章の折りたたみをスクロール表示するものです。
この「追記文章の折りたたみ」を利用した場合、「最新の記事＋コメント」の部分に「原因不明のエラーが発生しました。作者に連絡すれば、もしかすると対応できるかもしれません。」というメッセージが表示され、元のリストが正常に表示されなくなる不具合があります。
「最新の記事＋コメント」が正常に表示されない原因は、「追記文章の折りたたみ 2.0 for FC2 ブログ」で使っているprototype.js と「最新の記事＋コメント」のJavaScriptのコードが干渉しているためです。
これを解消するためには、以下の手順で「最新の記事＋コメント」のソースコードを修正してください。
プラグイン設定画面の「プラグインの管理」をクリック。
「最新の記事＋コメント」の「詳細」をクリック。
「HTMLの編集」をクリック。
これでプラグインのソースコードがテキストエリアに表示されます。次に示すソースコードの編集後、「設定」をクリックしてください。
修正部分は以下です。青色のコード（計6行）を追加してください。
…前略…
for(i in cLst) {
if(i.indexOf('http') != 0){
continue;
}
…中略…
for(j in cLst[i].lst) {
if (isNaN(parseInt(j))) {
continue;
}
tCmt = cLst[i].lst[j];
var cmtIsInLimit = (curTime - tCmt.getTime() < cmtDateLimit);
…後略…実際の追加イメージを以下に示します。
これで元通り表示されるようになります。
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-13.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-13.fc2.com/k/o/i/koikikukan/tree_end.gif) no-repeat 2px 0;
list-style: none;
}また、ツリー画像のURLは私のサイトにある画像を読み込むようにしています。他の画像を利用したい場合は、ご自身のサイトに画像ファイルをアップロードし、その画像ファイルを読み込むようにしてください。
tree_lst.gif は 途中のツリー画像、tree_end.gif は最後のツリー画像です。
３．コメントの日付が表示されない場合
コメントのついた記事に日付が表示されない（[--/--]となる）のは、「環境設定」で設定した記事数に含まれない記事に対してコメントが投稿された場合です。本カスタマイズの影響ではありませんので、ご注意ください。
2008.08.03
ツリー画像のURLを変更しました。また、３項を追加しました。
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) {
：FC2ブログのコメントリンクから該当のコメントにジャンプさせる方法
FC2ブログのサイドバーに表示しているコメントリストのリンクをクリックした時、各エントリーの先頭にジャンプするのではなく、該当コメント位置に直接ジャンプさせる方法について数名の方からご質問を頂きましたので、本エントリーにて紹介致します。
１．文書の特定位置へジャンプさせる方法
ご存知の方も多いと思いますが、文書の特定の場所へのリンクは、
- リンク元：URL + # [fragment]
- リンク先：（該当 URLの） id 属性
というフォーマットにしたがって記述します。[fragment] の部分には id 属性値と等しい文字列を指定します。
今回のカスタマイズでは、コメントリスト（リンク元）・エントリーページのコメントリスト（リンク先）に上記フォーマットを適用します。
具体的には、下記リストのように青色部分を追加します。これで該当のコメントに直接ジャンプできるようになります。
コメントリスト（リンク元）
<a href="http://hogehoge.blogxx.fc2.com/blog-entry-1.html#c1">コメント</a>エントリーページ（blog-entry-1.html）のコメントリスト（リンク先）
<div class="comment" id="c1">
：
（コメント本文）
：
</div>上記のリンク先は div 要素に id 属性を与えていますが、当サイトのテンプレートを例に使っているだけですので、div 要素でなくても構いません。
この id 属性ですが、以前はリンク先に、
<a name="c1">文字列</a>というタグを記述していたかもしれませんが、XHTML では id 属性による名前付けをすることでリンク先として指定できるようになっています。
厳密に言えば、
- XHTML1.0：互換性を考慮して a 要素に id 属性と name 属性の併記が可能
- XHTML1.1：a 要素の name 属性による名前付けは廃止
となっています。
また、id 属性は a 要素以外でも付与可能ですので、無理に a 要素を作る必要はなくなります。ただし id 属性値はページ内で一意の名称になるように気をつけてください。
２．実例
当サイトで配布している FC2 ブログテンプレートからの抜粋です。
青色部分が先に述べた文書の特定の場所へリンクする指定になります。当サイト以外のテンプレートをお使いの場合は対応を考えて設定してみてください。
コメントリスト（リンク元）
<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>エントリーページのコメントリスト（リンク先）
<!-- コメント -->
<!--comment_area-->
<div id="comments" class="comments">
<div class="comments-content">
<!-- コメントタイトル -->
<h3 class="comments-header">コメント</h3>
<!--comment-->
<div class="comment" id="c<%comment_no>">
<!-- コメント本文 -->
<div class="comment-content">●<%comment_title><br /><%comment_body></div>
<!-- コメント投稿者情報 -->
<p class="comment-footer">
Posted by <a href="<%comment_url>"><%comment_name></a> at <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>" title="コメント編集のページへ">edit</a>
</p>
</div>
<!--/comment-->
</div>
<!-- コメント投稿 -->
<form method="post" action="./" name="comment_form">
：
（略）
：
</form>
</div>
<!--/comment_area-->id 属性値には FC2 ブログとして一意となる %comment_no （数字）を利用しています。ただし id 属性値は数字から開始することはできないので、先頭に任意のアルファベット、ここではコメントを表す「c」を付与しています。
コメントリストを記事別にまとめて表示する for FC2 ブログ
コメントリストを記事別にツリー化するカスタマイズです。今のところFC2ブログのみで確認していますが、後述するタグの構成が同様であれば他のブログでも適用可能と思われます。またトラックバックリストにも適用可能と思いますが当方では動作未確認です。
カスタマイズを行うことで下記のスクリーンショットのように記事別にコメントをまとめ、さらにツリー化カスタマイズと組み合わせることも可能です。ここでは公開テンプレートを例に使用していますが、コメントリスト・トラックバックリストのタグ構成が同じであれば他のテンプレートにも適用可能です。
カスタマイズ前 | → | カスタマイズ後 |
動作は Windows2000/XP の IE/Firefox/Opera で確認しています。急いで作ったのでα版という位置づけでご利用ください。
１．コメントリスト用タグの変更
下記のタグをテンプレートに貼り付けます。
<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>貼り付けた後、タグに改行を入れないでください。改行を挿入した場合、動作の保証はできません。
また上記以外のタグを貼り付ける場合は下記の事項を守ってください（下記で全て網羅できていないかもしれません）。
- コメントタイトルが span タグで括られていること
- コメント投稿者情報が ul タグ および li タグで括られていること
- span の終了タグと次の ul タグの間に改行を入れないこと
２．スクリプトの追加
コメントを記事別にまとめるためのスクリプト（下記）をテンプレートの最後の方に追加してください。
<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>赤色の部分は１項にある赤色の文字と同じものを設定してください。設定する文字は任意ですが個別ページで似たような id を使っている箇所があるので、まずは上記の設定のままお使いになってみてください。
３．ツリー化する
上記までの設定で記事別にコメントがまとまりますが、冒頭のスクリーンショットのようにツリー化する場合はサイドメニューのツリー化スクリプト for FC2 ブログを実施してください。
FC2ブログテンプレート修正
現在公開中のFC2ブログ用テンプレートに不具合がありましたので修正しました。テンプレートのエントリーは修正済ですが、部分的に修正される方は下記の内容をご覧ください。
１．コメント編集タグの追加
FC2ブログでは投稿したコメントを、投稿時に設定したパスワードを用いることで該当のコメントを（投稿した人が）ブラウザから編集することが可能です。これまでコメント投稿画面でパスワード入力の設定ができるようにしておりましたが、コメント編集画面へのリンクと編集画面自体がごっそり欠落しておりました。すいません。
これまでのテンプレートに変更を加える場合は、 /comment_area ? trackback_area の間に下記の青色部分を挿入してください。
：
<!--/comment_area-->
<!-- コメント編集 -->
<!--edit_area-->
<div id="comments" class="comments">
<!-- コメント編集 -->
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="edit">
<input type="hidden" name="mode2" value="edited">
<input type="hidden" name="edit[rno]" value="<%eno>">
<!-- コメント投稿フォームタイトル -->
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">コメントの編集</h2>
<div class="comments-open-content">
<!-- コメント投稿フォーム開始 -->
<div id="comments-open-data">
<dl>
<dt><label for="comment-author">名前:</label></dt>
<dd><input id="comment-author" name="edit[name]" tabindex="6" accesskey="n" size="20" value="<%edit_name>" /></dd>
<dt><label for="comment-title">タイトル:</label></dt>
<dd><input id="comment-title" name="edit[title]" tabindex="7" accesskey="t" size="30" value="<%edit_title>" /></dd>
<dt><label for="comment-email">メールアドレス:</label></dt>
<dd><input id="comment-email" name="edit[mail]" tabindex="8" accesskey="m" size="30" value="<%edit_mail>" /></dd>
<dt><label for="comment-url">URL:</label></dt>
<dd><input id="comment-url" name="edit[url]" tabindex="9" accesskey="u" size="30" value="<%edit_url>" /></dd>
<dt></dt><dd><script type="text/javascript" src="http://blog8.fc2.com/load.js"></script></dd>
<dt><label for="comment">コメント:</label></dt>
<dd><textarea id="comment" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>
<dt><label for="pass">パスワード:</label></dt>
<dd><input id="pass" type="password" name="edit[pass]" tabindex="10" size="20"></dd>
<dt><label for="secret">Secret:</label></dt>
<dd><input id="secret" type="checkbox" name="edit[himitu]" tabindex="11">サイト管理者にのみ通知する</dd>
</dl>
</div>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" tabindex="13" accesskey="s" id="comment-post" value="変更" />
<input type="submit" tabindex="13" accesskey="s" name="edit[delete]" id="comment-post" value="削除" />
<input type="reset" tabindex="14" value="クリア" />
</div>
<!-- コメント編集フォーム終了 -->
</div><!-- /comments-open-content -->
</div><!-- /comments-open -->
</form>
</div>
<!--/edit_area-->
<!--trackback_area-->
：また、コメント編集へのリンクが必要ですので、コメント投稿者情報の部分に青色部分を追加してください。
<!-- コメント投稿者情報 -->
<p class="comment-footer">
Posted by <a href="<%comment_url>"><%comment_name></a> at <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>" title="コメント編集のページへ">edit</a>
</p>さらに、絵文字を挿入した場合の位置補正のため、スタイルシートに下記を追加してください。
.comment-content img {
vertical-align: middle;
padding:0 2px;
}２．コメント投稿で絵文字が使えない不具合の修正
絵文字の表示は行っていたのですが、絵文字挿入用の JavaScript が正常に動作しておりませんでした。
これまでのテンプレートに変更を加える場合は、コメント投稿タグの comment-text という文字列を検索し、赤色の
<dt><label for="comment-text">コメント:</label></dt>
<dd><textarea id="comment-text" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>を青色の
<dt><label for="comment">コメント:</label></dt>
<dd><textarea id="comment" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>に変更してください。
またスタイルシートの赤色部分
#comment-text {
width: 266px;
}を青色の
#comment {
width: 266px;
}に変更してください。
３．コメントに絵文字を挿入するためのタグ設定
備忘録です。コメントに絵文字が挿入できる設定は、コメント投稿用 form 要素で
<form method="post" action="./" name="comment_form">という青色の name 属性を設定し、textarea 要素の前等に
<script type="text/javascript" src="http://blogx.fc2.com/load.js"></script>を設定し、textarea に
<textarea id="comment" name="comment[body]" cols="xx" rows="x"></textarea>という青色部分の名称が comment となるように設定します。これでFC2ブログから提供されている JavaScript が、comment_form というフォームの中にある comment という id 属性名を検索し、絵文字用タグを埋め込みます）。
で、textarea タグの id 属性が comment-text となっていたため、正常に動作しておりませんでした。すいません。
設定方法の詳細は下記にありました。
