ページ内の特定の場所にジャンプできる「アンカーリンク」は、長い記事やFAQページでとても便利です。ここでは、初心者でも分かりやすいように、HTMLとWordPressブロックエディタでの設定方法を解説します。
この記事で分かること
アンカーリンクのメリット
- ユーザビリティ向上：長い記事の中で目的のセクションに素早く移動可能。
- SEO対策：構造が明確になり、検索エンジンにも好まれる。
- 簡単な設定：HTMLの基本知識があれば誰でも設定可能。
例えば、以下のリンクをクリックしてみてください。
適切なページ内リンクが置いてあるとユーザーの利便性を向上させたりSEO効果が期待できます。覚えておくと便利ですよ。
About meこの記事を書いた人
はるみです
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計500件（月間約20件）のご購入実績
（2025年9月現在） - カスタマイズを丁寧にサポート
アンカーリンク（ページ内リンク）の設定方法
リンク先にid名（アンカー）をつけて、それを目印にリンクするイメージです。
リンク先のアンカーポイントを設定
アンカーリンクを作るには、まず「リンク先のポイント」を指定します。これはHTMLの id属性 を使って行います。
HTMLでの設定例
<h2 id="section1">セクション1</h2>この例では、「セクション1」という見出しに id="section1" のアンカーポイントを設定しています。
idの記述ルール
- タグ内に半角スペースを空けて
id="○"を追加 - 同じidはページ内で複数設定できない
- id名は半角英数字で自由に設定可能（例：
id="section1"） <h2>以外にも<p>や<div>など、任意のタグに設定できる
命名規則のポイント
WordPressブロックエディタでの設定方法
- リンク先にしたいブロックを選択
- 右側サイドメニューの 「高度な設定」 を展開
- 「HTMLアンカー」 欄に任意のid名を入力（例：
section1）
※ 先頭に#は付けません
設定ミスを減らせるのでぜひ覚えておきましょう！
リンク元を設定する／指定した位置へジャンプ
アンカーポイントを作ったら、次はその場所にジャンプするリンクを作ります。
HTMLでのリンク例
<a href="#section1">セクション1にジャンプ</a>- 同ページ内のリンクでは、
href="#id名"と記述 - 他ページの特定箇所にリンクする場合は、URL全体を記述
- 例：
<a href="example.html#section1">セクション1へ</a>
- 例：
WordPressブロックエディタでのリンク設定方法
- リンクしたいテキストを選択
- 上部ツールバーの リンクアイコン をクリック
- URL入力欄に
#id名を入力（例：#section1）- 重要： id名の先頭には必ず
#を付ける
- 重要： id名の先頭には必ず
- 内部リンク（internal）ボタン をクリックして確定
これで自動的に <a> タグが生成され、正しいアンカーリンクが作成されます。
<a href="#section1">セクション1に移動</a>スムーズにスクロールさせる（CSS設定）
通常のアンカーリンクは「パッ」と瞬時にジャンプしますが、CSSで設定を加えると なめらかにスクロール するようになります。
html {
scroll-behavior: smooth;
}scroll-behavior: smooth;を ルート要素（html） に指定します- WordPress（Cocoonなど）の場合は 子テーマのstyle.css に追記すればOKです
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
- 子テーマ（Cocoon Child）が選択されていること を確認します。
- ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開きます。
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加します。
効果とメリット
- 一瞬で飛ばずに「スクロール移動」するため、読者がページ内移動だと直感的に理解できる
- 体感的に自然で読みやすい
- JavaScriptを使わずCSSだけで実装できるので手軽
当サイトでも導入していますが、目次リンクや「ページトップへ戻る」ボタンを押したときにとても快適です。
アンカーリンク（ページ内リンク）まとめ
- アンカーリンクの基本：
id属性で移動先を設定、リンク元で#id名を指定 - WordPressブロックエディタを使えば初心者でも簡単に設定可能
- スムーズスクロールを加えれば、より自然で快適な移動が実現
アンカーリンクは、長い記事やFAQページ、目次付き記事に特に効果的です。ちょっとした工夫で読者のストレスを大きく減らせるので、ぜひ取り入れてみてください。
Comment 記事の感想を書き込んでいただけると幸いです
はっちゃんさん、お返事いただきありがとうございます。
気づくのが遅くなってしまい申し訳ありません。
そしてお忙しい中細かく教えて頂きありがとうございます。
いただいたアドバイスを見ながら、もう一度やってみたいと思います。
本当にありがとうございます…！
はっちゃんさんはじめまして。
いつも分かりやすい記事をありがとうございます。沢山参考にさせていただいております。
実はアンカーリンクがどうしても上手くいかず、困っていまして…。
HTMLアンカーにidを入力するのですが、記事を保存すると消えてしまいます…。
そういったことは起きたことはありますか？
ネットで調べてもヒットせず、ここで質問させていただきました。
もし少しでもなにか分かることがあれば教えて頂けないでしょうか。
すみませんが、よろしくおねがいいたします。
> はっちゃんさんのファンさん
初めまして。
まず…ブログを見てくださりありがとうございます。
HTMLアンカーの件ですが、保存すると消えるという事例は聞いたことがなく下記を確認してみてください。
①idに使う文字は合っているか
・半角アルファベット(a-z)
・数字(0-9)
・ハイフン(-)
・アンダースコア(_)
また、書き出しは半角アルファベットで始まり大文字/小文字は区別されます。
②着地点（リンク先）
ブロックを選択→高度な設定→HTMLアンカー
に入力するときは「#」は不要。
id名だけを入力しているか。
カスタムHTMLで直接入力する場合、例えば＜h2 id=”page-top”＞ここに着地します＜/h2＞のidの直前は半角スペースで区切っているか。
③リンクするとき
URLのところに②の「#id名」を指定する。
id名の先頭に「#」をつけているか。
使う文字はスペースを含めてすべて半角です。
リンクと着地点（リンク先）のidが一致し、適切に設定されていれば動作するかと思います。