`」を回避する方法

追記リンクのためにページ内に表示されてしまう<a name="more"></a>を回避するためのちょっとしたハックです。Seesaa系のブログサービスに共通して起きる現象のようなので、Seesaaブログやさくらのブログなどにも対応できると思います。

そもそも「`<a name="more"></a>`」について

HTMLのソースコードを見てもらえばわかりますが、ファンブログでは追記の直前に<a name="more"></a>という記述があります。これはリンク先（目的地）のアンカーとして過去に用いられていた手法で、現在ではid属性にかえられるべきものです。この場合、a要素が空なのでこれを削除して直近の要素のid属性を使うのが一番いい修正方法ですが、<a id="more"></a>としてもかまわないと思います。

ただ、a要素のname属性はHTML5では一応廃止されたことにはなっていますが、W3C勧告によるとconforming features（直訳すると適合機能ってところですか？）としてThe presence of a name attribute on an a element, if its value is not the empty string.とあります。つまり空でないならいいとのことで、実際Validatorでも「Warning」は出るものの結果は「Passed」です。なのでそこまで気にすることでもないのかもしれませんが、ってそれじゃあこの記事の必要性は……

「`<a name="more"></a>`」の回避法

では気を取り直して<a name="more"></a>の回避法です。「本文」しか使っていない場合と「追記」もある場合とで若干違いがありますが、やっていることはほとんど同じです。

「本文」のみの場合は投稿時に次のコードを指定箇所に挿入します。

「本文」の末尾に<!--
「追記リンク文言」に<a>
「追記」の冒頭に-->

「追記」もある場合は次のようになります。

「本文」の末尾に<!--
「追記リンク文言」に<a href="/ブログ名/archive/記事番号/0#more">追記リンク文言
「追記」の冒頭に--><要素名 id="more"></要素名>

たとえばこの記事なら「追記リンク文言」には<a href="/trialanderror/archive/8/0#more">続きを読む...、「追記」の冒頭には--><h2 id="more"></h2>と記述しています。

管理画面の記事投稿ページ。左には「本文」パネルを表示した状態、右には「追記」パネルを表示した状態で分けて表示。左側は「本文」入力欄の末尾に「<!--」、右側は「追記リンク文言」入力欄に「<a href="/trialanderror/archive/8/0#more">続きを読む...」、「追記」入力欄の冒頭に「--><h2 class="heading" id="more"></h2>」と記述。クラスは関係ないので無視していい。 — 回避コードの例

回避コードの解説

上記のコードは簡単にいえば問題の部分をコメントアウトしてなかったことにしているだけです。といえば十分のような気もしますが、一応解説します。

まず<a name="more"></a>は本文の直後、追記の直前に表示されます。したがって表示されるのは追記があるページ、つまり記事ページです。

記事ページのソースコードの一部。本文の末尾が「<p>」で、その後に「<a name="more"></a>」が記述され、追記が「<h2」で始まる。 — 記事ページのソースコード（回避コードなし）

この部分が本文の最後と追記の最初のコードによってコメント宣言ではさまれてコメントアウトされます。

上記のソースが修正されたもの。本文の末尾「<!--」に、追記の冒頭に「-->」が挿入され、「<a name="more"></a>」がはさまれてコメントアウトされている。また後に続くh2タグには「id="more"」が追加されている。 — 回避コードによってコメントアウトされた`<a name="more"></a>`

そしてコメントの終了宣言の直後のタグにid="more"と記述することで、単なるコメントとなったa要素の代わりにこのタグの要素（この場合h2要素）が追記リンクのリンク先になります。これは追記がない場合には必要ないため、コメントの終了コードのみになります。

本文のみで追記がない場合の記事ページのソースコード。「<!--<a name="more"></a>-->」で終わる。 — `id="more"`がない（*「本文」のみの場合*）

これで<a name="more"></a>を黙殺できましたが、このままでは本文最後のコメント開始コードが追記リンク自体もコメントにしてしまいます。これは記事ページではなく、追記がないページ（トップページなど）に表示されます。

追記ではなく追記リンクが表示されるページのソースコード。本文の末尾「<!--」の後に追記リンクとなるaタグが表示されているが、その開始タグの終わりが「>」ではなく「-->」になっていて、開始タグ全体がコメントになってしまっている。その後には終了タグ「</a>」がある。 — トップページのソースコード（**「追記リンク文言」**の回避コードなし）

aタグの開始タグの終わり（紛らわしい）がなぜかコメント終了コードに変わってしまっています。ファンブログはコメントを開いたままにするとこういう挙動をするようです。それはいいとして、次はコメントアウトされた追記リンクの代わりに改めて追記リンク<a href="/ブログ名/archive/記事番号/0#more">追記リンク文言を「追記リンク文言」に記述して強引に復活させます。

コメントになってしまった開始タグはそのままにして、その後に改めて開始タグと「続きを読む...」を記述。 — 放棄された元の追記リンクと新たに追加された追記リンク

これも追記がない場合には必要ないのですが、そのままにするとaタグの終了タグだけが残ってしまうので<a>だけを記述して内容が空のa要素にしておきます。

コメントになった開始タグの後に<a>とだけ記述。 — コメントになった追記リンクと空の`a`タグ（*「本文」のみの場合*）

これで<a name="more"></a>は無効化されたはずです。見た目に変化はないと思いますが、W3C的には好ましい文書になっていることでしょう。ただ実際のところValidかどうかよりもSEO的にどうなのかが重要なのかもしれませんが。

で、問題はない？

あるかもしれません。よほど古いブラウザでない限り大丈夫だとは思いますが。

コメントの内部にタグを内包することには文法上の問題はありません。<a href="/fanblog-master/archive/1/0#more">続きを読む...のようにハイフンが入ることは避けたほうがいいとは思いますが、これも2連ハイフンでなければ文法上はセーフです。

また、href属性のないa要素もHTML5では認められています。一応スタイル指定でdisplay: none;とでもしておいたほうが安全かもしれません。

あとは、すでに大量の記事がある場合にはちょっと厳しいくらいですか。うん、ちょっとというか、致命的問題ですね。

タグ：追記