WordPressで長文の記事を作成する際、読者が目的の情報へ素早くアクセスできるようにすることは、ユーザビリティ向上のために極めて重要です。
ページ内の特定の位置にジャンプさせる「HTMLアンカー」を活用することで、読者の利便性を高め、離脱率の防止につなげることができます。
2026年現在のWordPressでは、ブロックエディタの標準機能としてこの設定が組み込まれており、HTMLの知識が乏しくても直感的な操作が可能です。
本記事では、WordPressの標準機能を最大限に活用して、ページ内リンクを正しく設置するための具体的な手順と注意点を詳しく解説します。
HTMLアンカー（ページ内リンク）の基本概念
HTMLアンカーとは、Webページ内の特定の要素に対して付与する「識別子（ID）」のことを指します。
通常、リンクをクリックすると別のページへ遷移しますが、アンカーを設定することで同じページ内の特定の見出しや箇所へ瞬時に移動させることが可能になります。
ページ内リンクは、目次から各セクションへ誘導する場合や、記事の下部から上部に戻る「ページトップへ戻る」ボタンなどで頻繁に利用されています。
また、検索エンジンの検索結果において、特定のセクションが直接表示される「リッチスニペット」の形成を助ける効果も期待できます。
このように、HTMLアンカーは単なる利便性の向上だけでなく、SEO（検索エンジン最適化）の観点からも非常に有用な技術です。
ブロックエディタで見出しにアンカーを設定する手順
現在のWordPressでは、ブロックエディタ（Gutenberg）の標準機能として、見出しブロックにHTMLアンカーを設定する項目が用意されています。
見出しブロックの選択と高度な設定の展開
まず、記事編集画面でリンクの飛び先となる「見出しブロック」をクリックして選択します。
右側のサイドバーにある「ブロック」タブを確認し、最下部にある「高度な設定」という項目をクリックして展開してください。
「高度な設定」の中に、「HTMLアンカー」という入力フィールドが表示されます。
アンカー名の入力ルール
HTMLアンカーの入力欄には、そのセクションを識別するための任意の文字列を入力します。
アンカー名には、半角英数字とハイフン（-）、アンダースコア（_）を使用するのが一般的です。
例えば、会社概要の見出しであれば company-profile といった、内容が推測しやすい名称を付けることを推奨します。
大文字と小文字は区別されますが、混乱を避けるためにすべて小文字で統一するのがベストプラクティスです。
また、数字から始まる名前や、スペースを含めることはできませんので注意してください。
設定したアンカーへリンクを貼る方法
飛び先となる見出しにアンカーを設定したら、次はそこへ誘導するためのリンクを作成します。
同一ページ内でのリンク設定
リンク元となるテキストを選択し、ツールバーのリンクアイコン（またはCtrl+K）をクリックします。
URLの入力欄に、先ほど設定したアンカー名の先頭に「#（シャープ）」を付けて入力します。
例えば、アンカー名が step-01 の場合、リンク先URLには #step-01 と記述します。
この「#」記号は、ブラウザに対して「現在のページ内の指定したIDへ移動せよ」という命令を送る役割を持っています。
別ページから特定のアンカーへ直接リンクする場合
他の記事や外部サイトから、特定のページの特定の見出しへ直接ジャンプさせることも可能です。
その場合は、ページのURLの末尾に直接「#アンカー名」を付与します。
具体的なURLの形式は以下のようになります。
<!-- 外部ページから特定の見出しへリンクする例 -->
<a href="https://example.com/target-post/#step-01">特定の手順へジャンプ</a>これにより、リンクをクリックしたユーザーは、ページの冒頭ではなく、指定したセクションが画面上部に来る状態でページを開くことができます。
HTMLアンカー作成時の命名規則と注意点
アンカー名の設定には、いくつかの技術的なルールと、運用上の推奨ルールが存在します。
以下の表に、HTMLアンカーを記述する際の基本的なガイドラインをまとめました。
| 項目 | ルール・推奨事項 |
|---|---|
| 使用可能な文字 | 半角英数字、ハイフン（-）、アンダースコア（_） |
| 開始文字 | 必ず英文字から始める（数字開始は避ける） |
| 重複の禁止 | 同一ページ内で同じIDを複数回使用してはいけない |
| 命名のコツ | contactやpriceなど、簡潔で意味の通る英語にする |
特に重要なのは、「重複の禁止」です。
1つのページ内に同じアンカー名（ID）が複数存在すると、ブラウザはどの場所にジャンプすべきか判断できず、リンクが正しく動作しなくなります。
スムーズスクロールの実装によるUXの向上
標準の状態では、ページ内リンクをクリックすると瞬時に目的の場所へ切り替わりますが、これはユーザーにとって「どこに移動したのか」が分かりにくい場合があります。
画面が滑らかにスライドして移動する「スムーズスクロール」を導入することで、視覚的な連続性が保たれ、UX（ユーザーエクスペリエリエンス）が飛躍的に向上します。
2026年現在のモダンブラウザであれば、WordPressのテーマに特別なプラグインを追加しなくても、CSS一行でスムーズスクロールを有効にできます。
以下のコードを、外観 ＞ カスタマイズ ＞ 追加CSS、あるいはテーマのCSSファイルに記述してください。
/* ページ全体のスクロールを滑らかにする */
html {
scroll-behavior: smooth;
}この設定を行うだけで、全てのHTMLアンカーへの移動が滑らかなアニメーションを伴うようになります。
ただし、ページが非常に長い場合にスクロール時間が長くなりすぎるのを避けたい場合は、JavaScriptを用いて速度を制御する方法もあります。
よくあるトラブルと解決策
HTMLアンカーを設定しても、意図した通りに動作しないケースがいくつか考えられます。
固定ヘッダーでリンク先が隠れてしまう問題
サイトのデザインで上部にメニューを固定（追従）させている場合、ジャンプした先の見出しがヘッダーの下に隠れてしまうことがあります。
これは、ブラウザが見出しの最上部を画面の最上部に合わせようとするために起こる現象です。
この問題を解決するには、CSSの scroll-margin-top プロパティを使用するのが最も簡単で効果的です。
/* 固定ヘッダーの高さ分（例: 80px）だけ余白を作る */
h2, h3, h4 {
scroll-margin-top: 80px;
}この指定を行うことで、アンカーリンクで移動した際に、見出しの上に指定した分の余白が確保され、ヘッダーに重なるのを防ぐことができます。
アンカー名に日本語を使用した場合の挙動
WordPressのHTMLアンカー欄には日本語を入力することも可能ですが、基本的には推奨されません。
日本語のアンカー名は、URLとして出力される際にエンコード（複雑な記号の羅列に変換）されるため、リンクが非常に長くなってしまいます。
また、一部の古いブラウザや特定のSNSアプリ内ブラウザでは、日本語アンカーが正常に動作しないリスクもゼロではありません。
トラブルを未然に防ぐためにも、アンカー名は必ず半角英数字で設定する習慣を付けましょう。
まとめ
WordPressでHTMLアンカーを活用することは、読者が求める情報へストレスなく到達できるようにするための基本的な手法です。
ブロックエディタの「高度な設定」を活用すれば、コードを直接編集することなく、誰でも簡単に見出しへのページ内リンクを作成できます。
設定時には、分かりやすいアンカー名を付け、IDの重複を避け、必要に応じてCSSによるスムーズスクロールや余白調整を行うことが大切です。
本記事で紹介した手順を参考に、読者にとって優しく、かつ検索エンジンからも評価されやすい記事構造を構築してください。
適切なページ内リンクの設置は、あなたのWebサイトの信頼性と専門性を高めるための大きな一歩となるはずです。