今回はアンカーリンク（ページ内ジャンプ）についての備忘録です。参考にしたのは、How to create anchor links in wordpress & Blogger – Jump links （wordpressとBloggerでのアンカーリンクの設定方法）ですが、アンカーリンクは、wordpress や Blogger に特化したものではありません。
ということで、アンカーリンクを使ってインデックス付きの記事を書いてみました。
Index：
アンカーリンクとは
アンカー（anchor）とは、船を固定するための錨（いかり）のことです。アンカーを下すことで船を固定できるので、固定した場所にリンクすることなのだと理解しています。
HTMLではaタグ（アンカー・タグ）を使ってアンカー・リンクすることでページ内の特定の場所にジャンプさせることができます。
索引としてアンカーリンクを使う
書籍や辞書では目的の内容を読むために索引を参照してページをめくりますが、ブログやネットの記事なら索引から直接目的の場所にジャンプさせることができます。またジャンプした場所の章の最後に「索引に戻る」リンクを付けておけば、スクロールせずに索引を行き来しながら記事を読むことができます。
何より記事の先頭に索引（目次）があると何が書かれているかを俯瞰することができるので読み手としては便利です。
アンカーリンクの設定方法
ジャンプ先であるアンカー名とジャンプ元のリンクの設定方法についてです。
リンク場所（アンカー）の設定
もともとはaタグのname属性でアンカーを指定するようになっていたようですが、HTML5からID属性だけで認識されるようになったようです。この記事ではh3の見出しにID属性でアンカーの設定をしています。
<h3 id=”アンカー名”>テキスト</h3>
例えば、この章の「アンカーリンクの設定方法」では、h3タグの中でid属性を使ってアンカー名を下記のように設定しています。
<h3 id=”how_to_set”>アンカーリンクの設定方法</h3>
下記は、aタグを使う場合です。
<a id=”アンカー名”>テキスト</a>
リンクの設定
リンクの設定は、aタグで外部ページにリンクするときと同じようにhref（Hypertext Reference）を使いますが、URLではなく#アンカー名 を設定します。別ページのアンカーにジャンプさせるのであれば、<a href="https://walking-elephant.blogspot.com/2016/06/flickr.html/#アンカー名">のようにURLを指定します。
<a href=”#アンカー名”>
Indexのアンカーリンクの設定方法 には、
<a href=”#how_to_set”>アンカーリンクの設定方法</a>
と設定しています。
ページの先頭に戻す
リンクの設定で下記のように#の後ろにアンカー名を付けなければページの先頭に戻ります。
<a href=”#”>
Bloggerでの注意事項
Bloggerの場合、リンク元の設定で <a href="#アンカー名"> としても、勝手に下記のように <a href="https://draft.blogger.com/……/#アンカー名"> とドラフト（プレビュー用）のURLがついてしまいます。
もちろんリンク元で正確なURLを設定してもいいのですが、Bloggerの場合だと、PostするまでブログのURLがわからないので、公開する前にもう一度リンク先を下記のように#アンカー名に書き換えてください。
URLを書き換える場合は、HTMLモードで変更してそのまま投稿する必要があるようです。作成モードに変更してしますとURLが書き換わってしまいますので注意を。公開後も内容を変更するのであれば、面倒ですが公開後にURLを確認して#の前にURLを追記しましょう。
0 件のコメント:
コメントを投稿