色んな情報を載せたページを作成することありますよね。
そんな時、ページ内でリンクできたら良いな。そう思ったことはありませんか？
結論から言います。
当然ながらできます。
しかも簡単に。
【ワードプレス】ページ下から見出しに戻すアンカーリンクとは？
アンカーリンクは、ページ内で指定場所に飛ばすリンクを言います。
正確に言うと、どこそこのページへというのが普通の内部リンク、どこそこのページのどの場所へというのがアンカーリンクやページ内リンクと呼ばれています。
SEO的には、そんなに重要ではありませんが、ユーザビリティ向上のために設置する場合が多いです。
たくさんの情報を載せたページの一番最後に設置すると、「あ、この情報が一番良かったな。これもう一度読みたいな」と思ったときにそこに戻ることが出来たら便利ですよね。
そんなわけで、本日はアンカーリンクの設置について、レッツトライ！
【アンカーリンク】すでにアンカーは打たれている！？
アンカーリンクを設置する場合、まず初めに「ここに戻りたい！」という場所にアンカーを打たなくてはいけません。
ですが、みなさんは以下のプラグインやテーマを使用していませんか？
- テーマ：SWELL
- プラグイン：Table Of Content Plus
- プラグイン：Eazy Table Of Content
- プラグイン：SUGOI MOKUJI
ワードプレス有料テーマのswellでは、目次表示が標準搭載ですので、プラグインは必要ありません。
【ワードプレス】swellの場合
swellでは、見出しにindex_id0から順番に名前がつけられています。
目次の上から順番に、h2見出しやh3見出しに関係なく、上から順番にです。
お友達のちむにーさんのサイトで設置しています。
https://chimu-chimu.com/maternity-application
Table Of Content Plus、Easy Table Of Contentの場合
Table Of Content Plus（TOC+）とEasy Table Of Contentでは、目次の上から順にi、i-2、i-3のように名前がつけられています。
目次の上から順番に、h2見出しやh3見出しに関係なく、上から順番にです。
SUGOI MOKUJIの場合
SUGOI MOKUJIでは、st-toc-h-1からst-toc-h-2と順番に名前がつけられています。
目次の上から順番に、h2見出しやh3見出しに関係なく、上から順番にです。
【アンカーリンク】アンカーの設置
プラグインやswellを使用していない方や、見出し以外にアンカーを設置したい方は手動で設置しなければいけません。
アンカーというのは英語で錨。ニュアンス的には停泊場所、錨泊場所といったところでしょうか。
まずは、ここに戻りたい！という場所にアンカーを打ちます。
後からわかるよう、ここにアンカーを打ってみます。（実際にアンカーを打っています）
【ビジュアルエディタ】アンカーリンクの設置
[timeline]
[tl label=’step1′ title=’【ビジュアルエディタ】アンカーの文字列’]
アンカーを設置したい文字列を選択します。
[/tl]
[tl label=’step2′ title=’【ビジュアルエディタ】アンカーの設置’]
文字列を選択したら、リンクを貼ります。
リンクを貼るというより、アンカーに名前を付けるイメージです。
[/tl]
[tl label=’step3′ title=’【ビジュアルエディタ】アンカーに名前をつける’]
名前をつける際に、「#」は必須です。
ビジュアルエディタでは仕様により「#」を付けないと、自動成形されてアンカーをドメインと勘違いしたリンク先を出力してしまいます。
また、名前が被らないよう注意が必要です。
[/tl]
[/timeline]
【テキストエディタ】アンカーリンクの設置
テキストエディタで設置する場合のほとんどは、タグで設置するかと思います。
タグは、<span id=”anchor”>文字列</a>です。
ブロックエディタの場合
ブロックエディタは少し特殊です。
もともと特殊なエディタなのですがｗ
「HTMLとして編集」を選択することで、従来のテキストエディタに近いエディタをブロック単位で入力することが出来ます。
ここに、<span id=”anchor”>ここにアンカーを入れました！</span>とタグを入れることで、アンカーを打つことが出来ます。
なぜ、aタグでアンカーを打たないのか
基本的に、ワードプレスでなければaタグでアンカーを打ちます。
理由は「わかりやすいから」です。
実はアンカーを付けるのは、どんなタグでもいいのです。
divタグでもtableタグでもpタグでもidがあれば、そこに勝手にアンカーが打ち込まれます。
ですが、ワードプレスでは、aタグでアンカーを作ってしまうと、自動で成形され、そこにリンクがあるように表示されてしまいます。
私はそれを嫌って、spanタグでアンカーを打ち込んでいます。
ただ、ビジュアルエディタではどうしようもなく、aタグでアンカーを打ち込まなければなりません。
【アンカーリンク】リンク先はどうするの？
リンク先は、先程付けたアンカーの名前です。
実際には<a href=”#anchor”>先程つけたアンカーへ飛ぶ！</a>と記載してあります。
ただ単にリンク先を#anchorにしているだけです。
まとめ
最初に述べたとおり、アンカーリンクはユーザビリティ向上のためです。
集中的な場所を見てもらいたい場合などにも使われます。
また、通常のリンク先にアンカーを指定することで、このドメインのこのページのこのアンカーへというリンクも作ることが出来ます。
最後まで読みいただきありがとうございました！