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」を付与しています。
- FC2ブログ・プラグイン「最新の記事＋コメント」の使い方
- FC2ブログの「最近の記事＋コメント」プラグインをきれいなツリーにする
- FC2ブログのツリー化された「最近のコメント」のリンクから該当コメントにジャンプする
- コメントリストを記事別にまとめて表示する for FC2 ブログ
- FC2ブログテンプレート修正（コメント編集タグの追加等）
記事にまでしていただきありがとうございました。
さっそく試行錯誤して、いろんな方法を挑戦してみたのですが、
やはり、私の使っているテンプレートのツリー化スクリプトが複雑で思うようにできませんでした。
せっかくこの記事のおかげで、わかってきたのに残念ですが諦めるしかなさそうです。
本当にありがとうございました！すごくわかりやすかったです。
＞フルパワーさん
こんばんは。
すいません。質問の主旨を読み間違えてました。
「コメントツリーが JavaScript で生成されるので、そこにリンクを埋め込みたい」ということですね（元のテンプレートの確認を怠っておりました）。
スクリプトを解析して、実現可能であれば改めてエントリーしますので、しばらくお時間ください。
それではよろしくお願い致します。
何度も色んなとこに申し訳ないです・・。
この方法を試してみようと思ったのですが、
サイドのコメント表示を、プラグインで設定しているため、
どこをどう修正したらいいのかさっぱりで・・・。
色々試してみたんですが、なんだかぐちゃぐちゃになってしまったので、
何度もご迷惑な事だとは思いましたが、また質問させていただきました。
まったくのど素人で、本当に申し訳ないです。
よろしくお願いします
＞ナチさん
こんにちは。
ご質問の件ですが、サイドバーの設定はそのままで結構です。
その代わり、各記事の下にコメントを表示する箇所の
<!-- コメントタイトル -->
<!--comment-->
<div class="comment" id="c<%comment_no>">を
<!-- コメントタイトル -->
<!--comment-->
<div class="comment" id="comment<%comment_no>">に変更すればジャンプするようになると思います。
それではよろしくお願い致します。
yujiroさん、はじめまして。shimaと申します。
小粋空間さんのテンプレートがとても気に入り、利用させていただくことに
しました。よろしくお願いします。
早速質問で申し訳ないのですが、テンプレートを説明の通りに
設置したのですが、どうしても最近のコメントがジャンプしてくれません。
何度かテンプレートを作り直したり、いろいろ調べてみたのですが、
解決しません。
どうしたらyujiroさんの最近コメント一覧のようになるのでしょうか。
（ツリー化については一度理解できたのですが、どうしてもコメントが
ジャンプしないので、最初からやり直しています。ジャンプできるように
なってから、またツリー化しようと思っています。
初心者の質問で大変申し訳ないのですが、お時間あるときに
お答えいただけますでしょうか。よろしくお願いいたします。
＞shimaさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、2つめの「エントリーページのコメントリスト（リンク先）」の中にある、
<div class="comment" id="c<%comment_no>">が
<div class="comment" id="comment<%comment_no>">になっていないでしょうか。
記事の2つのリストの中で青字で示している「c」という文字列が一致していないと、正常にジャンプしてくれません。
それではよろしくお願い致します。
: April 4, 2008 3:50 PMyujiroさん、こんにちは。
お返事ありがとうございました。
今、ちょうどまたカレンダーの休日設定などをしていたところでした。
上でお答えいただいたところ、修正してみました。
実は、最初ジャンプしないので、ここが違うのかな？といじっていた
箇所でした。元に戻してみたのですが、やはりジャンプしません。
それから、休日設定も書かれていた通りにやってみたのですが、
当日の四角かこみの部分は表示されたのですが、なぜか土日の
色が変わりません。
yujiroさんが書かれているとおりにやっているつもりなのですが、
どこがおかしいのでしょうか？？？ 何度かチャレンジしてみます！
でも２つとも表示されないということは、何か関係性があるのでしょうか。
もしわかりましたら教えてください。
お忙しいところ申し訳ありませんが、よろしくお願いします。
yujiroさん、こんにちは。
連投してすみません。
先ほど、カレンダーが色表示されないと書きましたが、
あのあとすぐに自分で解決しました。できない！と何度もやり直して
いたので書きこんだのですが、お恥ずかしいです。
申し訳ありませんでした。
でもいまだにコメントがジャンプしない原因が見つからずに困っています。
yujiroさん、おはようございます。
先ほど、無事に解決しました！
上記２の実例のところにあるものをコピペしていたのですが、
これだと、コメントのタイトルにリンクするようになっていたのですね。
それにやっと気がつきました！
実は今まで使っていたテンプレートには、コメントタイトルが表示
されないものだったので、全コメントがタイトルなしだったのです。
だからリンクされなかったようで・・・
なので、
<span><%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_name></a> <%rcomment_month>/<%rcomment_day></li></ul>
と、titleの部分をnameに変更し、その後ろの<%rcomment_name>を
削ってみたところ、ちゃんと名前にリンクするようになりました。
やっと理解できてよかった～という感じです。
解決しましたので、ご報告します。
貴重なスペースをお借りしましてすみません。
ありがとうございました。
これからもお世話になるかもしれませんが、よろしくお願いいたします。
すみません、上のコメントが途中で切れてしまったようです。
タイトルにリンクせず、投稿者の名前にリンクするように変えたところ、
無事にリンクするようになりました。
ありがとうございました。
今後もお世話になることがあるかもしれませんが、よろしくお願いします。
＞shimaさん
こんばんは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
ではでは！
: April 8, 2008 8:02 PM
