イントロダクション
Webページの閲覧者を、ページ内の任意の場所へ自動的に移動させるには、アンカーを設定するのが便利です。ジャンプしたいページ内の任意の場所に、a タグの name 属性や、任意のタグの id 属性を用いて、移動用の名前を付けます。(アンカー)
そして、指定した値の先頭に#を付けたものを、リンクとして用いる a タグの href 属性の値として設定すると、そのリンクをクリックしたときに、そのアンカーの場所まで自動的に移動することができます。
Links in HTML documents
12.2 The A element
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」作成モードを使用することで、ページ内へのアンカーを埋め込み、そこへページ内ジャンプすることができます。使いやすい・読みやすいブログページを実現するために、是非試してみてください。
テスト用アンカー:ここに飛びます。
編集メモ:この投稿は、編集時に「作成」モードにした場合には、アンカーのリンク先とリンク元の再編集が必要!
コメントを投稿
コメント投稿機能について