WordPressでアンカーリンク（ページ内リンク）を作成する方法
WordPressでアンカーリンク（ページ内リンク）を作成する方法を紹介します。コンテンツが多いWEBサイトで情報に早く辿り着ける機能を果たすので、ユーザビリティの向上につながりseo対策にも効果あり。WEBサイトの情報の理解度を深めるなどストレスなく閲覧してもらうためにも必須の知識です。
目次
アンカーリンクについて
WEBページ内で任意の場所に移動させる
アンカーリンクはaタグで作成されたリンクから同じページ内の指定した部分にジャンプ移動(遷移)できる仕様のことです。そのため『ページ内リンク』とも呼ばれます。多くのWEBサイトでは長文記事の目次・規約などの見出しに採用されており、見出しやテキスト、画像など種類を問わず様々なものに使用することが可能です。アンカーリンクの詳細は知らなくても、一度は他のWEBサイトで体験していると思います。
実際にアンカーリンクの例を見てみましょう。
※【Result】をクリックして確認。
下記のようにHTMLで3つの見出し「おはよう」、「こんにちは」、「こんばんは」の用意をしてリンク先のテキストを配置。それぞれの見出しをクリックすると指定のリンク先に移動することが確認できたと思います。
See the Pen
アンカーリンク by yohei779904 (@yohei_takei)
on CodePen.
アンカーリンクとハイパーリンクの違い
ハイパーリンクは一般的には『リンク』と呼ばれていて一度は聞いたことがあるかもしれません。リンクをクリックすると指定されたURLに移動する点はアンカーリンクもハイパーリンクリンクも同じ。しかし、厳密には少しだけ違いがあります。アンカーリンクは新しいWEBサイトのページ（外部のWEBサイト）に移動するのではなく、主に現在ページの指定部分に移動するのです。
アンカーリンクの作成方法
WordPressでアンカーリンクを作成する方法は以下2種類の方法があり、どちらでも問題なく作動します。WordPressで頻繁にアンカーリンクを使用する場合は『プラグインを使用する方法』は効率的ですが、あくまでWordPressだけで使用できる方法です。しかし、プラグインはWordPressの機能追加に便利ですが、そのプラグインがWordPressを重くする原因になることもあります。
WordPress以外でもアンカーリンクを使用するかもしれない方やアンカーリンクの基礎知識を覚えておきたい方は『手動でアンカーリンクを作成する』方法をオススメします。
アンカーリンクの作成方法
- プラグインを使用してアンカーリンクを作成する
- 手動でアンカーリンクを作成する
プラグインでアンカーリンクを作成する
▼ Advanced Editor Tools (旧 TinyMCE Advanced) を利用
手順➀ プラグインをインストール、有効化する。
WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞『Advanced Editor Tools』、または『 Advanced Editor Tools 』で検索。検索した後、有効化をする。設定は特に必要なし。
手順➁ 記事に移動し、アンカーリンクを指定したい箇所にカーソルを移す。その後、『アンカー』を選択する。
手順➂ アンカーリンクのIDを入力する画面が表示されるので、任意の文字を入力する。
手順➃ アンカーリンクが設置される。
手動でアンカーリンクを作成する
手順➀ リンク元にリンクを設定
aタグのhref属性に#と任意のテキストを入力。
※下記ではテキストが『anker』だが、リンクに関連するテキストを推奨。
<a href="#anker">希望のリンク先</a>
手順➁ リンク先のHTMLを編集
aタグにid属性を追加し、リンク元のhref属性と同じ値を入力。
※id属性に指定する内容は「半角英数字」、「-（ハイフン）」、「_（アンダーバー）」などに限定。数字や記号から始まるテキストは認識されない。
<a id="anker">希望のリンク先</a>
手動でアンカーリンクを作成する【応用編】
aタグ以外にもh1-h6やpタグにもid属性が指定できますし、class属性を指定することもできます。
<!-- リンク元のaタグにclass属性を指定する場合 -->
<a class="anker1" href="#anker">希望のリンク先</a>
<!-- リンク先にh2を指定する場合 -->
<h2 id="anker">希望のリンク先</h2>
<!-- リンク先にpを指定する場合 -->
<p id="anker">希望のリンク先<p>