意外と簡単？WordPressでページ内リンクを作る方法

ワードプレスで気合を入れて文章を書いたらすっごく長くなっちゃった！
もっと読みやすくできないかな…

アンカーリンクを使えば読みやすくなりますよ！

アンカーリンク？？

この下にある「目次」も実はアンカーリンクです！

なんだって！？

せっかく頑張って作った投稿なのに、確認したら「ちょっと長すぎたかも…」、
調べ物をしているときに「この部分だけ読みたいのに、スクロールしてもなかなかたどり着かない」なんてこと、ありますよね。
そんなときに便利なのが「アンカーリンク（ページ内リンク）」です。

アンカーリンクを使えば、クリック1つでページ内の特定の場所へジャンプさせることができます。
長い記事でも目的の場所へすぐに移動できるので、読者のストレスを減らし、読みやすい記事に仕上がります。

この記事では、WordPressのブロックエディタを使ってアンカーリンクを設定する方法と、スラッグ（ID）を活用するポイントを、初心者向けに丁寧に解説します。

アンカーリンクとは？

アンカーリンクとは、同じページ内の特定の場所にジャンプするリンクのことです。
「よくある質問」や「申し込みフォーム」など、同じページ内の特定の場所へ一気に飛ばすことができます。

HTMLでは <a href="#faq">FAQはこちら</a> のように記述しますが、ワードプレスのブロックエディタではID（スラッグ）を設定するだけで簡単に実現できます。

たとえば、以下の文字をクリックすると「アンカーリンクとは？」の見出しへジャンプされることにより、見出しがページの一番上になります。

「アンカーリンクとは？」をはじめから見る！

場所さえ覚えてしまえば簡単です！

WordPressでアンカーリンクを作る2ステップ

アンカーリンクは、たった2ステップで作れるんです！

ステップ1：ジャンプ先のブロックにIDを設定する

1. ジャンプ先にしたいブロックを選択します。
2. 右側の設定メニューから「ブロック」→ 一番下にある「高度な設定」を開きます。
3. 「HTMLアンカー」の欄に任意の英数字（例：about）を入力します。

IDは重複しないよう注意！
重複してしまうと、うまく機能しなかったり意図しない場所へジャンプしてしまう可能性があります

これで、見出しに「about」が設定されました。
ステップ2のリンク元を設定することでジャンプできるようになります。

ステップ2：リンク元に 「ID名」 を設定する

次に、ジャンプさせたいリンク元を設定します。
リンク元にしたいブロック（テキストやボタンなど）を選択したら、横長のバーよりをクリックし、
ステップ1で設定したIDを「#」の後ろに入力します。（例：#about）
入力したら、右隣にある矢印ボタンを押して設定完了です。

ページ内ではなく他のページのアンカーリンクへジャンプさせたい時は、
「https://xxxx.com/sample-page/#about」
のように、そのページのURLの最後にIDを入れると設定できます。

編集画面では確認ができないため、「新しいタブでプレビュー」で実際にジャンプできるか確認しましょう。

実際に作ってみたよ！ちゃんとジャンプするかな？

ID名を設定するときの注意点

IDの設定にはいくつかルールがあります。間違えて設定してしまうとリンクが動作しないので注意しましょう。

• 英数字・ハイフンのみ使用可（日本語やスペースは使えません）
  　例： ◎#about-company、×#会社概要
• 同じIDはページ内で重複させない（違うIDにする）
  　例：#step01、#step02 など
• 短く、意味のわかる名前にするのがおすすめ！
  　例： #faq、#contact、#how-to-use など

よくある使い方と活用例

アンカーリンクは、さまざまな場面で活用できます。よくある例をいくつか紹介します。

1. 長文記事の「目次」

長い文章でも、目次があると見たい部分へすぐに移動出来て便利ですよね！
テクこやでも目次を表示しています。

「長くて読む気失ったー」ってならなくて済みそう！

そうですね。読者の離脱防止にもつながります。

2. ランディングページでのセクション移動

商品ページやサービス紹介ページなどでは、「料金を見る」「申し込む」などのボタンから下部の該当エリアにジャンプさせるのが一般的です。

3. その他

その他にも、アンカーリンクが活用されているシーンはたくさんあります。

• イベントやセミナー案内ページ
  　開催概要、アクセス、申込方法など、情報量が多い場合にあると便利です。
• 会社概要やプロフィールページ
  　事業内容や所在地など、読者が求める情報へダイレクトにアクセスできます。
• サービス・料金ページ
  　料金プランやコースが複数ある場合、各プラン・コースへジャンプできると見落とし防止にもなります。
• レシピ記事
  　材料、作り方、ポイントなど、セクションごとに分かれていると知りたい情報がすぐに得られます。

下の画像はパソコン教室のホームページです。
青いボタンをクリックすると、青い枠の部分へジャンプしました。

まとめ

アンカーリンクを使えば、WordPressの記事をもっと見やすく、読みやすくできます。
特に情報量が多い記事や、縦に長いページでの読みやすさに直結するテクニックなので、覚えておくことをおすすめします。

長くて読むのが大変そうな記事でも読みやすくなるから、
読む人も書いた人も嬉しいね！

簡単に設定できるのも魅力です。
まだ使ったことがない方は、ぜひ試してみてくださいね！