ブログやサイトを読んでいると、目次から見出しへ移動したり、文章内のリンクをクリックするとページ内の指定した場所へ移動することがあります。
このようなページ内移動に使われる機能が「アンカーリンク」です。
この記事では、WordPressでアンカーリンクを設定する方法を初心者向けに紹介します。
※ 使用テーマは「AFFINGER6」です。
※ WordPressのバージョンやテーマ、設定によって、表示される画面や項目が異なる場合があります。
アンカーリンク（anchor link）とは？
アンカーリンクとは、同じページ内の指定した場所へ移動できるリンクのことです。
例えば、目次から見出しへ移動したり、文章内のリンクをクリックしてページ内の特定の場所へ移動するときに使われます。
アンカーリンクを設定すると、読者が必要な情報を探しやすくなり、記事を読みやすくすることができます。
WordPressでは、「HTMLアンカー」にID名を設定し、リンク先に同じ名前の「#ID名」を指定することで、アンカーリンクを作成できます。
アンカーリンクを設定すると、以下のようなメリットがあります。
- 読者が読みたい場所へすぐ移動できる
- ページ内の情報を探しやすくなる
- 長い記事でも必要な情報を見つけやすくなる
アンカーリンク・内部リンク・外部リンクの違い
ブログでは、さまざまな種類のリンクを使います。
それぞれの違いは、リンク先の違いです。
・アンカーリンク（ページ内リンク）
同じページ内の指定した場所へ移動するリンクです。
例：目次から見出しへ移動する、文章途中から指定した場所へ移動する
・内部リンク
同じサイト内の別ページへ移動するリンクです。
例：関連記事へ移動する
・外部リンク
自分のサイトから、別のサイトへ移動するリンクです。
例：公式サイトなどを紹介するときに使う
※なお、外部リンクに関連する用語として、他のサイトから自分のサイトへ貼られたリンクを「被リンク」、自分のサイトから他のサイトへ貼るリンクを「発リンク」といいます。
リンクの設定方法については、以下の記事で紹介しています。
→ WordPress初心者向け｜リンクを付ける方法（内部リンク・外部リンク）
アンカーリンクの設定方法
アンカーリンクは、リンク先とリンク元を設定することで作成できます。
ここからは、設定手順を紹介します。
アンカーリンク設定の簡単な流れ
① ジャンプ先を決める
② HTMLアンカーにID名を設定する
③ ジャンプ元に（#ID名）のリンクを設定する
④ プレビューで確認する
① ジャンプ先を決めます
・ジャンプ先にしたいブロックをクリックします
（見出しに設定することが多いです）
・右上の「設定」→「ブロック」→「高度な設定」を開きます
② HTMLアンカーにID名を設定します
・「HTMLアンカー」にID名を入力します
・ ID名は自由に決められますが、半角英数字で設定すると管理しやすくなります
・ 同じページ内では、同じID名は使用できません。
ID名を設定するときのポイント
・スペースは使用できません
・大文字と小文字は区別されます
・半角英数字や「-（ハイフン）」「_（アンダースコア）」などが使用できます
③ ジャンプ元にリンクを設定します
・アンカーテキストを入力します
アンカーテキストとは、リンクが設定されている文字や文章のことです。クリックすると、別のページやページ内の指定した場所へ移動できます。
例えば、「詳しい設定方法はこちら」のような、クリックできる文字がアンカーテキストです。
アンカーリンク → 指定した場所へ移動するリンク機能
アンカーテキスト → リンクとして表示される文字や文章
・アンカーテキストを選択して「リンクアイコン」をクリックします
・「 #ID名」を入力して Enter キーを押します
④ プレビューで確認します
・アンカーリンクが正しくジャンプするか確認したら完了です
※HTMLアンカーに設定した「ID名」と、リンク先に入力する「#ID名」は同じ名前にします
例
HTMLアンカー：link1
リンクの入力欄：#link1
スムーススクロールを設定する方法
アンカーリンクで移動すると、一瞬で指定した場所へジャンプします。
そのため、移動先が分かりにくい場合や、動きが急に感じる場合があります。
このような場合は、スムーススクロールを設定すると、ページ内を滑らかに移動できます。
設定方法
① 追加CSSを使う
追加CSSに下記のコードを入力すると、スクロールを滑らかにできます
追加CSSの設定手順
①ダッシュボード「外観」→「カスタマイズ」→「追加CSS」を開きます
② 以下のコードをコピーして貼り付けます
html {
scroll-behavior: smooth;
}③「公開」をクリックします
※スクロール速度の調整はできません
※テーマや設定によっては反映されない場合があります
事前にバックアップを取っておくと、設定変更後に問題が発生した場合でも元の状態へ戻しやすくなります。
バックアップの方法については、以下の記事で紹介しています。
WordPress初心者向け｜UpdraftPlusのバックアップと復元方法
② プラグインを使う
プラグインによっては、スムーススクロールの動きや速度を設定できるものもあります。
例：
- Easy Smooth Scroll Link
- Page scroll to id
まとめ
アンカーリンクを設定すると、ページ内の目的の場所へすぐ移動できるため、読者が必要な情報を探しやすくなります。
アンカーリンクは、リンク先に「ID名」を設定し、リンク元に「#ID名」を入力することで作成できます。
記事が長くなったときは、目次や「トップへ戻る」リンクなどにも活用できます。
WordPressを始めるには、サーバーの準備が必要です。
私が利用しているサーバーを参考までに紹介します。
WordPressを始めたばかりの頃は、設定や操作方法で迷うことも多いと思います。
ブログを始めた頃に参考にした本を紹介します。
 | 「ゆる副業」のはじめかた アフィリエイトブログ スキマ時間で自分の「好き」をお金に変える！ [ ヒトデ ] 価格:1628円 |
