コメント欄へのリンクは修正すべき

　リニューアル後に続いていたSo-net blogの不具合で【What's new?】で報告されていた分は全て解消したようだが、【Another HTML-lint gateway】で１００点を取るためには修正しなければいけないところが多い。ログインやログアウトのためのヘッダの部分は文法上の重大な問題があるのだが自分では修正できない。だからSo-netが修正しない限り１００点を取るのは不可能だろう。しかし、自分で修正できるところは修正して少しでも１００点に近づけようと思って修正を始めた。

　まず最初に手がけたのがヘッダの冒頭に付けるXML宣言<?xml version="1.0" encoding="UTF-8"?>。デフォルトで追加されるのを待っていたのだが、追加されないようなので自分で追加した。私はFirefox2.0で確認しつつ修正しているので気付かなかったのだが、他の修正を大量に行った後でIE6で閲覧したら文字のサイズが大きくなっていた。最初は原因が分からず焦ったのだが、どうやらXML宣言が原因でIE6の有名なバグらしい（参照）。対処法（参照）はあるのだが、問題（参照）もありそうなので、結局は削除する（追加しない）のが一番良さそうである。これで１００点は遠ざかった。

　その他にいろいろと修正していて次に困ったのが文書の特定の場所へのリンク。「記事」コンテンツの「コンテンツHTML編集」の次の部分である。

<div id="comments" class="entry">
<h4>コメント <% individual_article.children_count | __or__ | echo('0') %><a name="comments"> </a></h4>

　<div>に「id="comments"」があるのに別の要素<a>に「name="comments"」と名前付けしている。これは問題がある。

名前の唯一性
名前は、同一ドキュメントの中で唯一のものでなければならず、重複してはいけません（Uniqueness）。
（中略）
×：なお、idとnameは名前空間を共有するので、同じ名前を異なる要素のidとnameに設定することはできません。つまり

（誤った例）<h2 id="detail"><a name="detail">詳細</a></h2>

は名前の唯一性に反する（2箇所に同じ名前を付けている）誤った書き方ということになります。

（「名前付けの注意点」ハイパーリンク -- ごく簡単なHTMLの説明）

　<div>に「id="comments"」があるのに別の要素<a>に「name="comments"」と名前付けしているのは『誤った書き方』なのである。
　 　「#comments」でブログのコメント欄にリンクする場合、「id="comments"」の方に飛ぶのか「name="comments"」の方に飛ぶのか分からない（たぶん上に記述されている方に飛ぶ）が、とにかく、どちらかを削除しなければならない。将来のことを考えたら「name="comments"」の方を削除すべきだろう。また、「id="comments"」はスタイルシートでも使っていることを確認していて、「name="comments"」よりも重要そうである。そこで、次のようにした。

<div id="comments" class="entry">
<h4>コメント <% individual_article.children_count | __or__ | echo('0') %></h4>

　問題はコメント欄へのリンクが機能していない可能性があることである。私が使っているブラウザ（MacintoshのIE5.1.7,Netscape7.02,WindowsのIE6,Firefox2.0,Safari3.1.1）では、ちゃんとコメント欄にジャンプした。私のブログを訪れた他の閲覧者の環境ではどうだろうか。【テスト】
　もしも、サイドバーの「最近のコメント」欄のリンクや上の【テスト】をクリックしてもコメント欄へジャンプしないことを確認した方がいらっしゃいましたら、コメント欄でブラウザの種類とともにご指摘ください。何らかの対策を考えます。

　ところで、nice!やトラックバック欄へのリンクもそうなのだが、<a> </a>の中が空である。半角スペースを入れているが何も入れてないのと同じことである。このような使い方にも問題がある。私のブログでは「nice!」や「トラックバック」の文字を<a></a>で囲んだ。気にしなければいけないのは、<a>に対して指定したスタイルシートである。マウスのポインタを上に乗せた時に色が変わったりアンダーラインが付いてしまうとリンクと勘違いしてしまう。「#favorite」（「id="favorite"」を追加してある）や「#trackback」（「id="trackback"」を追加してある）に別に「a:hover」（「a:link」「a:visited」「a:active」も？）を指定すれば大丈夫だと思ったのだが、Firefox2.0で閲覧したらダメだった。色が変だしアンダーラインも付いてしまった。IE6で確認したら、アンダーラインは付かないが、「トラックバック」という文字の色が変になってしまった。さらに、「#trackback」と「#trackback a」にも同じ指定をしたら、問題が解決したようである。余分な指定もありそうだが、とりあえず成功した。

タグ：ソネブロ HTML