小粋空間: 最近のコメントアーカイブ

Top ＞ FC2ブログ＞カスタマイズ＞最近のコメント [全て開く]

2007年3月23日

FC2ブログの「最近の記事＋コメント」プラグインをきれいなツリーにする

March 23,2007 2:20 AM
Tag：[Comment, Customize, FC2, Tree]
Permalink

FC2ブログの人気プラグイン「最近の記事＋コメント」のツリー表示を、画像を使ってきれいなツリーにするカスタマイズです。

「最近の記事＋コメント」プラグインのきれいなツリー

以下、カスタマイズ方法です。すでに「最近の記事＋コメント」プラグインを適用されている状態から説明を開始します。
適用されていない場合は、FC2 ブログ管理画面より、「プラグインの追加 [ 公式 / 共有 ]」の「共有」のリンクをクリックし、次ページに表示されている「最近の記事＋コメント」をクリック、さらに次ページで「追加する」のフォームボタンをクリックしてください。これで、その少し上にある「プラグインカテゴリー」の位置に「最近の記事＋コメント」が表示されます。

１．プラグインのHTML編集

FC2ブログの管理画面より、[環境設定] - [プラグインの設定] で、プラグインカテゴリーに表示されている「最近の記事＋コメント」の右側にある「HTMLの変更」をクリックします。

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 は最後のツリー画像です。

Comments [29] | Trackbacks [1]

2007年3月12日

FC2ブログのツリー化された「最近のコメント」のリンクから該当コメントにジャンプする

March 12,2007 1:50 AM
Tag：[Comment, Customize, FC2, Tree]
Permalink

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) {
　　　　：

Comments [2] | Trackbacks [1]

2007年2月22日

FC2ブログのコメントリンクから該当のコメントにジャンプさせる方法

February 22,2007 1:52 AM
Tag：[Comment, Customize, FC2]
Permalink

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」を付与しています。

Comments [11] | Trackbacks [0]

2006年4月23日

コメントリストを記事別にまとめて表示する for FC2 ブログ

April 23,2006 1:30 AM
Tag：[Customize, FC2, Tree]
Permalink

コメントリストを記事別にツリー化するカスタマイズです。今のところ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 ブログを実施してください。

Comments [23] | Trackbacks [1]

2006年2月 4日

FC2ブログテンプレート修正

February 4,2006 11:50 PM
Tag：[FC2, Information, Template]
Permalink

現在公開中の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 となっていたため、正常に動作しておりませんでした。すいません。

設定方法の詳細は下記にありました。

ブログ管理者用お知らせ：ブログ管理者用お知らせ

Comments [0] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site