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

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

<!-- コメントタイトル -->
<!--comment-->
<div class="comment" id="c<%comment_no>">

<!-- コメントタイトル -->
<!--comment-->
<div class="comment" id="comment<%comment_no>">

<div class="comment" id="c<%comment_no>">

<div class="comment" id="comment<%comment_no>">