【WordPress】ページ内リンク（アンカーリンク）でUX向上

ブログで記事を作成するとき、ページ内リンク（アンカーリンク）を使っていますか？

もし、使っていないのであれば、ぜひこれを機に使ってみてください。訪問者に対するUX（ユーザーエクスペリエンス）が向上し、より見やすい記事になる可能性がありますよ。

ページ内リンク（アンカーリンク）とは

まずは簡単にページ内リンク（アンカーリンク）とは何かを説明します。といっても、「ページ内リンク」とある通り、ページ内の特定の箇所へリンクさせることを表しています。

役立つシーンを挙げると、たとえば、記事の中に以下のようなリストを作ったとします。

• リスト1
• リスト2
• リスト3

そして、各リストの詳細な説明がリストの後に記載されているとします。すると、リスト3に辿りつくにはかなりスクロールが必要となりますよね。リスト毎の説明が長文であれば尚更です。

ここでもし、「リスト3を見たい！」という訪問者がきた場合、そのユーザーに対して「スクロールさせる無駄な時間」を与えることになります。これはUX上良くないですよね。（目次にリンクがあれば別ですが）

そこで役立つのがページ内リンク（アンカーリンク）というわけです。ユーザーが見たいと思った場所にすぐ飛べるように、ページ内にリンクを張り巡らせると良いのです。

ページ内リンク（アンカーリンク）の貼り方

貼り方はとても簡単です。

たったこれだけ。

以降では各手順の詳細を、画像を交えながら説明します。

手順1：「HTML アンカー」を設定する

まずはリンクさせたいブロックの「HTML アンカー」を設定します。

WordPressの画面右にあるブロックタブの下の方に行くと、「高度な設定」という項目があります。

ここを開くと「HTML アンカー」という設定項目が出てきます。

ここにページ内で一意となる（被らない）文字列を入れます。例えば、今説明してるこの見出しに戻る「HTML アンカー」を設定する場合、以下のような感じで設定します。

設定する文字は英語でも良いですし、日本語でも良いです。とにかく被らなければデタラメな文字列でも良いです。ただし、スペースは入れてはダメなので、そこだけは注意してくださいね。（といってもWordPressが勝手にスペースをハイフンに変換すると思いますが）

これで「HTML アンカー」の設定は完了です。

手順2：設定した「HTML アンカー」へのリンクを貼る

手順1でリンクしたいブロックに目印を付けたので、あとはそこへリンクさせる設定をするだけです。

たとえば、ここで【「HTML アンカー」を設定する 】の見出しに戻るリンクを設定したい場合、以下のようにします。

まずはリンクを貼りたい文字列を選択します。

すると、リンクを貼るメニューがあるので選択します。（赤枠の部分）

あとは手順1で設定した文字列と、先頭に「#」を入れます。

これでリンクを貼ることが出来ました！簡単！

ちなみにリンクを貼る時はショートカットキーの「Ctrl」＋「K」を使うと捗りますよ。

まとめ

ページ内リンク（アンカーリンク）を使うとページのUXが向上し、ユーザーにとって見やすい記事にすることができます。とくに長大な内容の場合、ページ内リンクの有無しでUXが大きく変わるので、ぜひ設定しておきたいですね。