Blogger:ページ内アンカーへジャンプしたい場合には、HTML編集が必要。リンクだと余計な情報がついてしまう

イントロダクション

Webページの閲覧者を、ページ内の任意の場所へ自動的に移動させるには、アンカーを設定するのが便利です。


ジャンプしたいページ内の任意の場所に、a タグの name 属性や、任意のタグの id 属性を用いて、移動用の名前を付けます。（アンカー）

そして、指定した値の先頭に#を付けたものを、リンクとして用いる a タグの href 属性の値として設定すると、そのリンクをクリックしたときに、そのアンカーの場所まで自動的に移動することができます。

Links in HTML documents

12.2 The A element

http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#h-12.2

Blogger におけるアンカーの指定・アンカーへのジャンプの指定

このページ内へのジャンプに使用するアンカーや、アンカーへのリンクは、Google のブログサービス「Blogger」でも使うことができます。

現状

ただし、「ページ内へのジャンプに使用するアンカー」も、「アンカーへのリンク」も、通常のブログ投稿の編集モードである「作成」では行えません。

「HTML」による、編集モードにて行う必要があります。


そもそも、「作成」モードでは、a タグの name 属性や、任意のタグの id 属性の値を設定することが出来ません。

そして、アンカーへのリンクを、「作成」モードの「リンク」で行おうとすると、次のように、Blogger が余計な情報を付与するため、作成することができません。

Blogger : 「作成」モードの「リンク」で、アンカーへのジャンプを行おうとすると...

#anchor だけのリンクを作成したつもりが、
Blogger が自動的に http:// を付与して、
http://#anchor
というリンクになってしまっている

対応策

そこで、Blogger にて、ページ内へのジャンプをアンカーにて実現したい場合には、「HTML」の編集を行う必要があります。

ジャンプ先に、以下のタグを埋め込みます。

<a name="anchor"></a>


そして、ジャンプしたいところに、次のリンクを埋め込みます。

コード：
<a href="#anchor">anchor へジャンプ</a>

実例：
anchor へジャンプ


このようにすることで、Blogger でも、ページ内のジャンプを実現することができます。


なお、ページ外からあるページの特定の場所にジャンプする場合や、ページ内でも アンカー部分以外の URL を含めてリンクに指定する場合には、リンクの設定だけは、「作成」モードで行うことができます。

例）リンクに設定する URL
http://upa-pc.blogspot.com/2015/03/blogger-anchor.html#anchor

実例：
anchor へジャンプ

重要な注意

<a href="#anchor">anchor へジャンプ</a> というアンカーへジャンプするコードを埋め込んだら、「作成」モードへ戻してはいけません!!


「作成」モードへ戻すと、href の値が Blogger によって修正され、意図しないリンク先がアンカーの前に付与されていました。

アンカーの前に付与されていた意図しない URL:
https://www.blogger.com/blogger.g?blogID=(省略)


そのため、アンカーへのリンク設定は、投稿を公開する直前に行い、「HTML」作成モードのまま投稿するようにしましょう。


ただ、アンカーへのリンクが設定されているのに、それを忘れて再編集した結果、意図しない URL になってしまう危険性があります。

それを考えると、上で紹介した、

例）リンクに設定する URL
http://upa-pc.blogspot.com/2015/03/blogger-anchor.html#anchor


というアンカーだけでなく URL すべてを記載した形式で書いた方が安全だと言えます。

この「アンカーだけでなく URL すべてを記載した形式」の場合、リンクをクリックすると、場合によっては（Blogger の場合、URLのドメインがアクセスする国によって変わってしまうため、埋め込んだURLと実際にアクセスしているURLが異なる場合がある等）ページのリロードが発生しますが、意図しない URL が付与されてしまうよりかは、ましだと思います。


また、a タグの name 属性をアンカーとして用いる場合、「HTML」作成モードから「作成」モードに変更すると、自動的に次の href が付与されていました。

href="https://www.blogger.com/null" 


このような href が付与されたくない場合には、a タグの name 属性アンカーとして用いる場合には、投稿の編集の一番最後に埋め込み、「作成」モードに戻さず投稿する必要があります。

もしくは、a タグ以外の要素 の id 属性をアンカーとして用いる方法があります。

まとめ

このように、Blogger では、「HTML」作成モードを使用することで、ページ内へのアンカーを埋め込み、そこへページ内ジャンプすることができます。

使いやすい・読みやすいブログページを実現するために、是非試してみてください。


テスト用アンカー：ここに飛びます。


編集メモ：この投稿は、編集時に「作成」モードにした場合には、アンカーのリンク先とリンク元の再編集が必要！