個別コメントへリンクする

[category] customize [tags] カスタマイズ, 独自タグ,

改装ついでに細かなところをいじってみたのでまとめ記事を書いてみます。
サンプルはこのブログのコメント一覧。
記事タイトルは記事ページに飛んで(注:コメント欄には飛ばない)コメント投稿者からは直接個別のコメントへと飛びます。
ここでは好みでツリー形式にしてますが、ノーマル形式にも応用はできますのでよければ参考にしてください。

「デザイン」-「コンテンツ」から「記事」を選択。
右上にリンクされている「コンテンツHTML編集」へ飛びます。

<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | tag_strip %></a><% else %><% comment.writer | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y.%m.%d %H:%M') %><br /></div>
</div>

標準のままであれば116行目から以上のような記述が始まるのでそこにid属性を追加します。

<div class="comments-body" id="comment<% comment.createstamp | date_format('%Y%m%d%H%M%S') %>">

投稿された日時(秒まで含む)を使ってid属性を指定することで他との重複を防いでいます。
Seesaaブログは文章型がXHTML Transitionalなので、ブラウザの互換性を保ちたいならばname属性も一緒に指定してもいいかもしれません。
ちなみにここのブログはXHTML1.1にしてしまったのでid属性のみです。

<div class="comments-body" id="comment<% comment.createstamp | date_format('%Y%m%d%H%M%S') %>" name="comment<% comment.createstamp | date_format('%Y%m%d%H%M%S') %>">

※name属性を指定した場合

追記したら保存して再構築をかけます。
コメント欄なので「記事ページ」のみを選択して再構築すれば十分です。
次は同じく「コンテンツ」にある「最近のコメント」を選択して、同様に「コンテンツHTML編集」へ飛びます。
ここではツリー形式の方法についてを説明するので<% if:content_recent_comment.type == 1 -%>以降を見ます。

<a href="<% article.page_url %>#comment"><% article.subject | tag_strip %></a>

ここに書かれてあるhref属性の値から#commentを取ります。
これで記事タイトルのリンクからは記事ページに移動するのみでコメント欄には飛びません。
なぜこのようにするかについては後で説明します。

 ⇒ <% article_child.writer %> (<% article_child.createstamp | date_format('%m/%d') %>)<br />

次は13行目に書かれてある以上の部分に個別コメントへのリンクを貼ります。

 ⇒ <a href="<% article.page_url %>#comment<% article_child.createstamp | date_format('%Y%m%d%H%M%S') %>"><% article_child.writer %> (<% article_child.createstamp | date_format('%m/%d') %>)</a><br />

先ほど書いたid属性をリンク先に入れることで直接各投稿者が書いた個別のコメントに飛ぶことができます。
こちらも終わったら保存、再構築をします。
今度は「すべてのページ」に再構築をしてください。
以上でカスタマイズ終了です。
ノーマル形式の方は<% if:content_recent_comment.type == 0 -%>の部分の記述を同様の手順で変更すれば可能です。


:::補足:::

id属性を追加したとき、接頭のcommentは別に不必要では?と思った方がいるかもしれませんが、実はid属性については書き方の決まりがあります。

id属性や、a要素のname属性の値の付け方には、一定の約束があります。これらは、アルファベット[A-Za-z]で始まり、そのあとにアルファベット、数字[0-9] 、ハイフン( - )、アンダースコア( _ )、コロン( : )、ピリオド( . )を組み合わせた名前でなければなりません。

名前付けの注意点 by [ごく簡単なHTMLの説明]

以上のような決まりがあるので日付のみをもちいた数字のみのidは許されません。
今回は適当にcommentを用いましたが一文字アルファベットが入ればいいので、省略してcだけでも構わないんですけどね。
ちなみに日時ではなく%s(紀元 [1970年 1 月 1 日 00:00:00 UTC]からの秒数)を指定しても多分同様の結果が現れると思います。
id属性に文字数制限がないか不明なのでちょっと心配ではありますが…。


次に、記事タイトルからコメント欄に飛ばないわけには理由があります。

上のリンクから試しに飛んでみてください。
同じページに飛ぶように見えて違うサイトに飛んでしまいます。
アクセシビリティの観点から、同じ文字列で違うリンク先に飛ぶことは、閲覧者の混乱を招くため極力避けるべきです。
ブログで言えば「最近の記事」「最近のコメント」「最近のトラックバック」に同じ記事へのリンクが貼られてあったとして、クリックしてみたら同じページでも表示開始の位置が違う、というのがこれに当たります。
投稿者名から個別コメントには飛べるのでここでは修正しているわけです。
ただ、元のままが良かった場合はtitle属性を追加すれば代替案になります。

今度はリンクをクリックする前に、文字列にカーソルを合わせるとそれぞれ名前が出るはずです。
これによって同じ文字列でも違うリンク先に飛ぶことが分かります。

<a href="<% article.page_url %>#comment"> title="<% article.subject %>へのコメントへ"<% article.subject | tag_strip %></a>

今回のカスタマイズにこれを適用するとこんな感じです。

Comments

Comment Form

NAME*

URL

COMMENT*

認証コード*

※画像の中の文字を入力してください[半角]

TrackBacks

TrackBackURL
※言及リンクのないトラックバックは受信されません。
sample
New Entries
Archives
Comments
RSS(by FeedBuner)