WordPressページ内リンク（アンカーリンク）活用完全ガイド！

2025年8月13日

こんな悩みはありませんか？

「長い記事を読んでいる途中で、目次まで戻るのが面倒……」
「特定の見出しにすぐ飛びたいのに、スクロールが大変！」
「固定ヘッダーが邪魔で、リンク先が見えなくなる……」
「他の記事の特定セクションにサッと遷移させたい！」

WordPressでページ内リンク（アンカーリンク）を活用すれば、これらのストレスを一気に解消できます✨

「ボタンひとつで目的の場所へジャンプ」「目次自動生成で記事の回遊率アップ」「スムーススクロールで滑らかな読書体験」……

本記事では、初心者でも迷わないよう、基礎から応用までを徹底解説！

手順を追うだけで、あなたのサイトが使いやすく・わかりやすく進化します。

アンカーリンクの基礎知識

アンカーリンクとは何か

アンカーリンクとは、同じページ内の特定の場所にジャンプできるリンクのことです。

ページをスクロールせずに目的のセクションへ一瞬で移動できる
長い記事やFAQページでのユーザビリティ向上に役立つ
メニューや目次、CTAボタンなどでよく使われる😊

ポイント：URLの末尾に #ID名 を付けるだけで動作します。

背後にある仕組み

アンカーリンクはHTMLのID属性とURLの「#」を組み合わせています。

スクロールできます

要素	説明	例
ID属性	ジャンプ先に設定する一意の名前	`<h2 id="section1">見出し</h2>`
リンク（URL）	`#ID名` をリンク先に指定	`<a href="#section1">移動</a>`

ID属性の指定

   <h2 id="about">サービス紹介</h2>

リンクの設定

   <a href="#about">🔗 サービス紹介へジャンプ</a>

ブラウザはリンクをクリックすると、指定されたIDの位置まで自動的にスクロールします✨
見出しや段落、画像ブロックなど、ほとんどすべてのHTML要素にIDを付与可能

ID属性を使った基本の設定方法

対象要素へのID付与手順

編集画面を開く
- ブロックエディター／クラシックエディター、どちらでもOK
IDを設定したい要素を選択
- 見出しブロック、段落ブロック、画像など
属性パネルからIDを入力
- ブロックエディター：右サイドバー → 「高度な設定」 → HTMLアンカー 欄に任意の名前を入力
- クラシックエディター：テキストモードに切り替え、要素タグに id="任意の名前" を追加
ID名のルール
- 半角英数字とハイフン（-）のみ
- スペースや日本語は避ける
- 例：section-intro、faq-2

😃 Tip：IDはページ内で一意に。重複すると正しい位置へジャンプしません！

リンク先URLへ「#ID」を指定する方法

リンク元テキストやボタンを選択
リンク設定に #ID名 を入力
- ブロックエディター：リンクアイコン → 「URL」欄に #section-intro
- クラシックエディター：<a href="#section-intro">本文</a> のように記述
プレビューで動作確認
- リンクをクリックし、IDを付与した要素までスクロールすればOK

スクロールできます

方法	手順例
ブロックエディター	1. テキスト選択 → リンクアイコンクリック 2. `#your-id` を入力 3. 適用ボタンを押す
クラシックエディター	`html<br><a href="#your-id">ここへ移動</a><br>`

🚀 ワンポイント：ナビメニューやボタンでも同じ要領でIDリンクが使えます。

この設定をマスターすれば、WordPressの記事内でスムーズに読者を誘導できるようになります！

ブロックエディターでの設定手順

HTMLアンカーを簡単に追加する方法

該当ブロックを選択
- 見出し・段落・画像など、IDを付与したいブロックをクリック
サイドバーの「高度な設定」を開く
- 右側の設定パネルをスクロールして、「高度な設定」セクションを表示
HTMLアンカー欄に名前を入力
- 半角英数字＋ハイフンで分かりやすいIDを設定
- 例：features-list、contact-form
保存して完了
- ブロック上部にプレビュー表示される小さなラベルでIDが確認できます✨

🔑 ポイント：HTMLアンカーは1クリック＋入力だけで設定できるので、手軽にページ内リンクを作成できます！

リンク作成画面でアンカーを指定する方法

リンクを設定したいテキストやボタンを選択
- テキストを範囲選択、またはボタンブロックをクリック
リンクアイコンをクリック
- 小さな鎖マークのアイコンを押して入力フィールドを表示
#ID名 を入力
- #features-list のように先頭に「#」を付けて記入
適用ボタンを押して確認
- プレビュー画面でリンクをクリックし、目的のセクションへ移動するかチェック

スクロールできます

操作場所	手順概要
ブロック設定パネル	HTMLアンカー欄に入力 → 自動保存
リンク入力モーダル	`#your-id` を入力 → 適用アイコンをクリック

🚀 ワンポイント：リンク作成画面ではURL候補として自動でアンカー名が表示されることもあります。迷ったら候補リストから選んでOK！

クラシックエディター／手動タグ編集による設定

テキストエディターでのアンカー挿入手順

投稿編集画面を「テキストモード」に切り替える
- ビジュアルタブの隣にある「テキスト」をクリック
IDを付与したい要素を探す
- <h2>見出し</h2> や <p>段落</p> など
要素タグに id 属性を追加

   <h2 id="section-contact">お問い合わせ</h2>

アンカーリンクを設定する

   <a href="#section-contact">お問い合わせへ移動</a>

プレビューで動作確認
- 「プレビュー」ボタンを押し、リンククリックでスクロールするかチェック ✅

ポイント：

ID名は半角英数字＋ハイフンで一意に
複数回使わないよう注意

ボタンブロックやメニュー項目への組み込み方

ボタンとして表示したい場合
- テキストエディタ内に以下のように記述
<a class="button" href="#section-contact">✉️ お問い合わせ</a>
- テーマのスタイルに合わせ、.button クラス名を調整
ナビメニューにアンカーを設定する
1. 外観＞メニュー を開く
2. 「カスタムリンク」 を選択
3. URL欄に #ID名（例：#section-contact）を入力
4. リンク文字列（例：「お問い合わせ」）を設定して「メニューに追加」
5. メニューを保存

スクロールできます

組み込み先	コード例／操作手順
ボタン（HTML）	`<a class="button" href="#section-contact">ボタン</a>`
メニュー設定	外観>メニュー > カスタムリンク > `#ID` を入力

🔧 コツ：

メニュー項目はページ読み込み後も動作するため、ファーストビューに置くと便利
ボタンデザインはテーマ依存。必要に応じてCSSをカスタマイズ

プラグインを活用した自動追加手法

目次プラグインでアンカーを自動生成する

多くの目次プラグインは、投稿内の見出し（H2～H6）を自動で検出し、ID付きリンク付きの目次を生成してくれます。

プラグインをインストール＆有効化
- 例：Easy Table of Contents、Table of Contents Plus
対象投稿・固定ページで有効化
- 投稿編集画面のサイドバーに設定パネルが表示される
表示位置や対象見出しレベルを指定
- 自動挿入：本文上部／特定のショートコード位置
- 見出しレベル：H2～H4 など
スタイル調整
- 箇条書きデザイン、折りたたみ機能のオンオフ
- 色やフォントサイズもプラグイン設定で変更可能

🎉 メリット：

手動でIDを付ける必要ナシ
目次とアンカーリンクを同時に実装
折りたたみ式や番号付きなど多彩なデザイン

見出しにリンクを自動付与するプラグイン紹介

見出しごとに自動でアンカーリンクを付与し、クリックでURLコピーや短縮リンクを提供するプラグインもあります。

スクロールできます

プラグイン名	主な機能	ポイント
Auto Anchor Links	見出しにアンカーアイコンを自動追加し、リンクを即コピー可能	管理画面でアイコン表示ON/OFF切替可
Easy Anchor Links	ショートコード不要で全見出しをリンク化	CSSでアイコンの位置や色を自由に設定
Heading Anchor	URL末尾にID付きリンクを生成＆SNS共有ボタン組み込み可能	SNSシェアと組み合わせたいときに便利

✨ ポイント：

自動化で手間を大幅削減
テーマのデザインに合わせてCSSカスタマイズも容易
見出し横に表示されるアイコンでユーザーもリンク先を把握しやすい

これらのプラグインを導入すれば、初心者でも簡単にアンカーリンクをページ内に配置でき、かつデザイン調整や動作確認もスムーズに行えます！

別ページやナビメニューへのリンク応用

別投稿・固定ページ内の指定位置へ飛ばす方法

ジャンプ先ページでIDを設定
- 対象ページの編集画面で、移動したいセクションにIDを付与
- 例：
<h2 id="features">特徴紹介</h2>
リンク元ページでURLを組み立て
- フルパスを使う：https://example.com/post-slug/#features
- 相対パスを使う：/post-slug/#features
リンクを貼る

   [特徴紹介を見る](https://example.com/post-slug/#features)

確認ポイント
- ページURLとID名が正確か
- スラッシュの有無（末尾 /）に注意

スクロールできます

方法	サンプルURL	説明
フルパス	`https://example.com/about/#team`	ドメイン＋スラッグ＋アンカー
相対パス	`/about/#team`	ドメイン省略で柔軟に運用

🔍 チェック：リンクをクリックして、他ページの指定箇所まで自動でスクロールするか確認しましょう！

グローバルメニューにアンカーリンクを組み込む

外観 → メニューを開く
「カスタムリンク」を追加
- URL欄に /#footer や /services/#plan を入力
- リンク文字列にはメニュー名を入力
メニュー構造に組み込む
- ドラッグ＆ドロップで順序を調整
- サブメニューとして階層化も可能
メニューを保存して確認
- サイトヘッダーのグローバルメニューから直接指定セクションへ移動

スクロールできます

手順	操作例
カスタムリンク	URL：`/contact/#form` リンク文字列：「お問い合わせ」
メニュー配置	ドラッグしてヘッダー右側に配置
保存＆確認	フロントでメニューをクリック

🚀 活用アイデア：

「お問い合わせ」 をページ下部のフォームに直結
「料金プラン」 をサービス紹介ページの該当セクションに飛ばす

スムーススクロール設定とデザイン調整

CSSプロパティ「scroll-behavior」で滑らかスクロールを実現

html {
  scroll-behavior: smooth;
}

この一行を追加するだけで、ブラウザの標準機能としてページ内リンクの動きが滑らかになります✨
適用箇所：テーマのカスタムCSS、子テーマの style.css、または「外観 > カスタマイズ > 追加CSS」
対応状況：モダンブラウザのほとんど（Chrome、Firefox、Edge、Safari など）でサポート

ブラウザ	対応状況
Chrome	対応
Firefox	対応
Edge	対応
Safari	対応 (※)

※古いバージョンのSafariでは動作しない場合があります。

🚀 ポイント：プラグインやJSを追加せずに導入できるため、パフォーマンスにも優しい方法です！

JavaScript／jQueryによるスクロール演出

より細かな制御やオフセット調整が必要な場合は、JSを利用します。
下記は jQuery を使った例です。

<script>
jQuery(document).ready(function($){
  $('a[href^="#"]').on('click', function(e){
    e.preventDefault();
    var target = $($(this).attr('href'));
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top - 50  // ヘッダー分の余白を調整
      }, 600);
    }
  });
});
</script>

解説
- preventDefault() でブラウザのデフォルト動作を無効化
- animate() でスクロール時間（ミリ秒）やオフセットを細かく設定
- ヘッダーや固定メニューと重なる場合は、- 50 の部分を調整

✨ メリット：

滑らかさ（速度、イージング）を自由にカスタマイズ可能
スクロール後のコールバック機能で、アニメーションやフォーカス移動も実装できる

サードパーティ製ブロック拡張（例：Emanon Blocks）

Emanon Blocks などの拡張プラグインを使うと、
- ブロックエディター上でワンクリックでスムーススクロールを設定
- デザインテンプレート付きのボタンや見出しに簡単にアニメーション効果を追加
導入手順
1. プラグインをインストール＆有効化
2. 投稿編集画面で「Emanon Blocks」ブロックを追加
3. ブロック設定パネルから「スムーススクロール」のオン／オフを切り替え
主な機能比較

スクロールできます

機能	Emanon Blocks	他の拡張プラグイン例
ワンクリック設定	◯	△（ショートコード必要）
豊富なデザインプリセット	◯	×
カスタムオフセット設定	◯	◯
アニメーション効果の追加	◯	△（別プラグイン要）

🎉 おすすめポイント：

コーディング不要で直感的に操作できる
デザイン性の高いボタンやセクションを簡単に導入でき、ビジュアル面でも優れています

トラブルシューティングと注意点

クリックしても動かないときのチェックポイント

ID名の一致確認
- リンク先の #your-id と、対象要素の id="your-id" が完全に一致しているか
先頭の「#」を忘れていないか
- URL入力欄に your-id ではなく #your-id と記載
キャッシュクリア
- ブラウザやキャッシュプラグインの影響で古いコードが表示されている場合あり 🧹
JavaScriptエラーの有無
- ブラウザの開発ツール（Console）でエラーを確認し、プラグインやテーマの競合をチェック 🔍

スクロールできます

チェック項目	確認方法
ID名の一致	編集画面でID属性とリンクを再確認
「#」の有無	リンク入力欄を再度クリックして確認
キャッシュ	ブラウザ更新（Ctrl+F5）／キャッシュ削除
JSエラー	開発ツールConsoleタブを確認

ID重複や要素の表示崩れへの対処法

IDの一意性
- 同じページ内で同一IDを複数使うと、最初の要素にしかジャンプしません 🚫
- 解決策：IDに連番やプレフィックスを付与（例：section-1, section-2）
固定ヘッダーとの重なり
- 固定ヘッダーやナビバーがリンク先を隠してしまう場合あり
- 解決策：CSSでオフセットを調整
:target { padding-top: 80px; /* ヘッダー分の余白 */ margin-top: -80px; }
表示崩れ
- アンカー位置周辺のレイアウトがズレるときは、余白やマージンを見直しましょう ✨

目次機能との共存時に発生する衝突回避

自動目次プラグインとのID重複
- 手動で付けたIDとプラグイン生成IDが被ると意図しない動作に
- 対策：プラグイン設定でIDのプレフィックスを変更、または手動IDと統一
スクロール挙動の二重制御
- CSSの scroll-behavior とJSプラグインのスムーススクロールが干渉
- 対策：どちらか一方を無効化、もしくはJSの設定でCSS版を優先
折りたたみ目次の展開状態
- 折りたたみ式目次が閉じているとリンク先が見えない
- 対策：アンカークリック時に対応セクションを自動で展開するスクリプトを追加

スクロールできます

問題点	解決策
ID重複	プラグイン側プレフィックス変更
二重スクロール制御	CSS or JS いずれかをオフ
折りたたみ目次で非表示	クリック時に該当セクションを自動で開くスクリプト

活用例とベストプラクティス

記事内目次の自動生成と配置アイデア

多くのプラグインが自動生成する目次は、読者の視線を誘導しやすくなります。

ページ上部固定：スクロールしても常に目次が見えるように
左サイドバー：サイドバーに目次を設置し、メインコンテンツと並行して表示
折りたたみ式：初期は折りたたんでおき、必要時に展開（スマホ表示にも最適）

スクロールできます

配置パターン	メリット	注意点
ページ上部固定	いつでも目次へアクセス可能😊	スマホでは画面を圧迫する場合あり
サイドバー	読み飛ばしを防ぎ、フローを保てる	PC向き。スマホ時は非表示推奨
折りたたみ式	スペースを節約しつつ、必要に応じて展開可能💡	展開ボタンが分かりやすいデザインに

ボタンや画像と組み合わせた導線設計

視覚的アクセントを付けることで、ページ内リンクのクリック率をアップできます。

カラー付きボタン：CTAボタンとして設置し、明確な誘導を実現
アイコン付きリンク：ボタン内に矢印やマークを入れて直感的に
画像バナー + キャプション：画像の下にリンクテキストを置き、バナー風に演出

<a class="button primary" href="#pricing">プランを見る</a>

![特典紹介](banner.png)  
[🎁 特典詳細へジャンプ](#bonus)

🎯 ポイント：色やアイコンを活用して、リンクが「押せる」デザインであることをアピールしましょう！

SEO・ユーザビリティ向上への効果

アンカーリンクはただの移動手段以上に、サイト全体の評価アップに貢献します。

滞在時間増加：読者が目的の情報までスムーズに到達し、記事全体を読む確率が上がる
直帰率低下：探している情報が見つかりやすいため、すぐに離脱しにくい
クローラー理解促進：見出し構造を明確にすることで、検索エンジンがコンテンツを正しく把握

スクロールできます

効果	ユーザビリティ	SEO
滞在時間増加	読者が迷わずに読み進められる	ページの深い部分まで評価対象に
直帰率低下	必要な情報へダイレクトアクセス😊	サイト全体の信頼性向上
構造化が進む	見出し階層が整理され、読みやすい	マークアップを評価されやすくなる

🚀 まとめ：アンカーリンクを効果的に配置することで、読者にも検索エンジンにも愛されるサイトを作れます！

よくある質問（Q&A）

ページ内リンクが機能しない

原因と対処法を順にチェックしましょう😊

ID名の誤り
- リンクの #your-id と、要素の id="your-id" が完全一致しているか確認
「#」の付け忘れ
- URL欄やHTMLで your-id ではなく#your-id と記載
ブラウザ／プラグインのキャッシュ
- Ctrl+F5 で強制リロード、またはキャッシュ系プラグインを一時停止
固定ヘッダーによる隠れ
- クリック後に要素がヘッダー裏に隠れていないか
- 必要なら CSS でオフセット調整：
:target { padding-top: 80px; margin-top: -80px; }
JavaScript の競合
- ブラウザの開発ツール（Console）でエラーを確認し、スムーススクロール系スクリプトと競合していないかチェック

他ページの特定箇所に遷移できない

外部ページへのアンカーリンクでは、URL形式に注意が必要です🔗

スクロールできます

問題点	チェックポイント
URL の組み立て	`https://example.com/page-slug/#your-id` または `/page-slug/#your-id`
対象ページのID設定	リンク先ページで該当要素に同名のID が付与されているか
ページの先頭読み込み	JavaScript がリダイレクトやリロードを行い、アンカー処理が無効化されていないか
絶対パス vs 相対パス	サイト全体で共通に使うなら絶対パス、同ドメイン内のみなら相対パスが簡潔

💡 ワンポイント：

プレビュー環境と本番環境でドメインやパスが異なる場合、リンク先がずれることがあります。
リンクをクリック後、URLバーに #your-id が付与されていれば、ID側の問題ではなくパス側を見直しましょう。

訪問者の利便性を高めるアンカーリンク活用法

目的別にツールを選ぶ
- 小規模サイトや簡単な設定には、ブロックエディターのHTMLアンカーとCSS一行追加の scroll-behavior だけでも十分。
- 大規模記事や多機能を求める場合は、目次プラグインやアンカー自動生成プラグインで手間を省略しましょう。
ユーザビリティ向上のポイント
1. 一貫性のあるID命名：半角英数字＋ハイフンで分かりやすく
2. デザイン性のある誘導：カラー付きボタンやアイコンを活用🎨
3. スマホ対応：折りたたみ式目次やサイドバーは、モバイル時に表示を最適化
パフォーマンス & メンテナンス

スクロールできます

項目	推奨設定	備考
CSSスムーススクロール	`html { scroll-behavior: smooth; }`	プラグイン不要で軽量
JSスクロール制御	必要時のみ導入	複雑なオフセット調整やアニメ追加に◎
プラグイン更新管理	定期的に最新版へ	競合やセキュリティリスクを回避

トラブル回避の心得
- IDの重複や「#」の付け忘れは最も多いミス。編集後はリンク動作を必ずチェック！
- 固定ヘッダー対策やキャッシュクリアも忘れずに🧹。
- 自動目次と手動IDの衝突は、プラグイン設定でプレフィックスを調整すれば解決します。

✨ アンカーリンクをしっかり設計することで、訪問者はストレスなく情報へたどり着け、結果として離脱率の低下や滞在時間の向上が期待できます。

今すぐあなたのサイトに取り入れて、読者をもっと満足させましょう！

まとめ

本記事では、WordPressのページ内リンクを次のステップで学びました：

基本のID設定 とリンクの貼り方
ブロックエディター＆クラシックエディター での手順
プラグインによる自動生成 と目次作成
別ページやグローバルメニュー への応用
スムーススクロール＆デザイン調整
トラブル対策 と注意点
具体的な活用例 と SEO・ユーザビリティ効果

これらを実践することで、

読者は欲しい情報へスピーディにアクセスでき、満足度が向上
サイト滞在時間が伸び、離脱率が低下
構造化された記事は検索エンジンにも好印象

ぜひ今日から、記事内にアンカーリンクを追加し、訪問者にやさしいサイトを実現しましょう！

あなたのブログがさらに読みやすく、使いやすくなること間違いありません🚀

WordPressページ内リンク（アンカーリンク）活用完全ガイド！

アンカーリンクの基礎知識

アンカーリンクとは何か

背後にある仕組み

ID属性を使った基本の設定方法

対象要素へのID付与手順

リンク先URLへ「#ID」を指定する方法

ブロックエディターでの設定手順

HTMLアンカーを簡単に追加する方法

リンク作成画面でアンカーを指定する方法

クラシックエディター／手動タグ編集による設定

テキストエディターでのアンカー挿入手順

ボタンブロックやメニュー項目への組み込み方

プラグインを活用した自動追加手法

目次プラグインでアンカーを自動生成する

見出しにリンクを自動付与するプラグイン紹介

別ページやナビメニューへのリンク応用

別投稿・固定ページ内の指定位置へ飛ばす方法

グローバルメニューにアンカーリンクを組み込む

スムーススクロール設定とデザイン調整

CSSプロパティ「scroll-behavior」で滑らかスクロールを実現

JavaScript／jQueryによるスクロール演出

サードパーティ製ブロック拡張（例：Emanon Blocks）

トラブルシューティングと注意点

クリックしても動かないときのチェックポイント

ID重複や要素の表示崩れへの対処法

目次機能との共存時に発生する衝突回避

活用例とベストプラクティス

記事内目次の自動生成と配置アイデア

ボタンや画像と組み合わせた導線設計

SEO・ユーザビリティ向上への効果

よくある質問（Q&A）

ページ内リンクが機能しない

他ページの特定箇所に遷移できない

訪問者の利便性を高めるアンカーリンク活用法

まとめ

関連記事