WordPressアンカーリンクが飛ばない原因と解決策を徹底解説
WordPressで記事内にアンカーリンクを設定したのに、クリックしても目的の場所にジャンプしない。そんな経験をされた方は、決して少なくありません。個人的な経験では、アンカーリンクが飛ばない原因の多くは、ほんの小さな設定ミスや環境要因に起因しています。しかし、原因が分かりにくいために何時間も悩んでしまうケースも珍しくありません。この記事では、WordPressのアンカーリンクが正常に動作しない原因を体系的に整理し、それぞれの具体的な解決策をお伝えします。
この記事で学べること
- アンカーリンクが飛ばない原因の約80%はIDの記述ミスと固定ヘッダーに集中している
- キャッシュが原因の場合、シークレットモードで即座に切り分けできる
- 固定ヘッダーによるズレはCSS一行の追加で根本解決が可能
- モバイルだけ飛ばないケースにはデバイス固有の原因がある
- 正しいID命名規則を守るだけで今後のトラブルを大幅に予防できる
アンカーリンクの基本的な仕組みを確認する
そもそもアンカーリンクとは、同じページ内の特定の場所にジャンプするためのリンクのことです。HTMLの仕組みとしては、ジャンプ先の要素にid属性を設定し、リンク側で#id名を指定することで動作します。
WordPressのブロックエディタ（Gutenberg）では、見出しブロックやその他のブロックに「HTMLアンカー」を設定できます。右サイドバーの「高度な設定」を開くと「HTMLアンカー」という入力欄があり、ここにID名を入力します。
リンク側では、テキストを選択してリンクを挿入する際に、#設定したid名と入力します。
この仕組み自体はとてもシンプルです。しかし、実際に運用してみると、さまざまな理由で正しく動作しないことがあります。
IDの設定ミスが原因で飛ばないケース
これまでの取り組みで感じているのは、アンカーリンクが飛ばない原因として最も多いのが、IDの設定に関するミスだということです。
大文字と小文字の不一致
HTMLのid属性は大文字と小文字を区別します。たとえば、ジャンプ先にid="Section1"と設定しているのに、リンク側で#section1と小文字で書いていると、アンカーリンクは機能しません。
解決策はシンプルです。ID名はすべて小文字の半角英数字で統一しましょう。これだけで大文字・小文字の不一致によるトラブルを完全に防げます。
スペルミスや余分な空白
意外と見落としがちなのが、単純なスペルミスです。id="contct"と#contactのように、たった一文字の違いでもアンカーリンクは動作しません。
また、IDの前後に半角スペースや全角スペースが入っていることもあります。WordPressのエディタでコピー＆ペーストした際に、意図せず空白が混入するケースがあるため注意が必要です。
IDの重複
同じページ内に同一のIDが複数存在すると、ブラウザはどこにジャンプすべきか判断できなくなります。HTMLの仕様上、1つのページ内でIDは一意（ユニーク）でなければなりません。
特に、WordPressのプラグインが自動的にIDを生成している場合、手動で設定したIDと重複してしまうことがあります。
ID命名のベストプラクティス
固定ヘッダーが原因でズレるケース
IDの設定は正しいのに、アンカーリンクをクリックすると目的の見出しが固定ヘッダー（ナビゲーションバー）の裏に隠れてしまう。これは非常によくあるトラブルです。
多くのWordPressテーマでは、ページをスクロールしてもヘッダーが画面上部に固定される「固定ヘッダー」を採用しています。アンカーリンクでジャンプした際、ブラウザは対象要素をページの最上部に表示しようとしますが、固定ヘッダーがその上に被さってしまうのです。
CSSのscroll-padding-topで解決する方法
最もシンプルで効果的な解決策は、CSSのscroll-padding-topプロパティを使う方法です。
WordPressの「外観」→「カスタマイズ」→「追加CSS」に以下のコードを追加します。
html {
scroll-padding-top: 80px;
}
ここでの80pxという値は、固定ヘッダーの高さに応じて調整してください。ヘッダーの高さが60pxならscroll-padding-top: 70px;のように、少し余裕を持たせるのがポイントです。
疑似要素を使ったオフセット方法
テーマやプラグインとの相性でscroll-padding-topがうまく機能しない場合は、ジャンプ先の要素に疑似要素を挿入する方法もあります。
[id]::before {
content: "";
display: block;
height: 80px;
margin-top: -80px;
visibility: hidden;
}
この方法は、IDが設定されたすべての要素に対して見えない余白を作り、固定ヘッダー分のオフセットを確保します。
JavaScriptによる動的なスクロール調整
ヘッダーの高さが動的に変わる場合（スクロール時にヘッダーが縮小するなど）は、JavaScriptでの制御が必要になることがあります。
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
const headerHeight = document.querySelector('header').offsetHeight;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
});
});
このスクリプトは、クリック時にヘッダーの実際の高さを取得してスクロール位置を計算するため、可変ヘッダーにも対応できます。
キャッシュが原因で変更が反映されないケース
アンカーリンクの設定を修正したにもかかわらず、まだ飛ばない。そんなときに疑うべきなのがキャッシュです。
ブラウザキャッシュのクリア
ブラウザは表示速度を向上させるために、ページのデータを一時的に保存しています。アンカーリンクの設定を変更しても、古いキャッシュが表示されている限り、変更は反映されません。
最も手軽な確認方法は、シークレットモード（プライベートブラウジング）でページを開くことです。ChromeならCtrl + Shift + N（MacはCmd + Shift + N）で開けます。シークレットモードではキャッシュが使われないため、現在の状態を正確に確認できます。
WordPressプラグインのキャッシュクリア
WP Super CacheやW3 Total Cache、LiteSpeed Cacheなどのキャッシュプラグインを使用している場合は、プラグイン側のキャッシュもクリアする必要があります。
各プラグインの管理画面から「キャッシュをパージ」「すべてのキャッシュをクリア」などのボタンを実行してください。
経験上、キャッシュプラグインのクリアを忘れて何時間も原因を探してしまうケースは非常に多いです。設定変更後は必ずキャッシュクリアを行う習慣をつけましょう。
URLの記述形式が原因のケース
アンカーリンクのURL形式に問題がある場合も、正常に動作しません。
同一ページ内リンクの正しい書き方
同じページ内でジャンプする場合、リンク先は#id名のみで十分です。
正しい記述例
#section-abouthttps://example.com/page/#section-about（別ページから）- IDに「#」は含めない
よくある間違い
section-about（#がない）##section-about（#が2つ）- IDに
id="#section-about"と#を含めてしまう
httpとhttpsの不一致
別ページからアンカーリンクで特定の箇所にジャンプさせる場合、プロトコル（httpとhttps）の不一致が原因でうまく動作しないことがあります。サイト全体がSSL化されている場合は、必ずhttps://で統一してください。
また、wwwの有無も統一が必要です。https://www.example.comとhttps://example.comは、設定によっては別のURLとして扱われます。
プラグインやテーマの競合が原因のケース
ここまでの基本的なチェックで解決しない場合、プラグインやテーマとの競合を疑う必要があります。
プラグイン競合の切り分け方法
プラグインの競合を調べるには、以下の手順で一つずつ確認していきます。
全プラグインを無効化
管理画面からすべてのプラグインを一括で無効化します
アンカーリンクを確認
プラグインなしの状態でアンカーリンクが動作するか確認します
一つずつ有効化
プラグインを一つずつ有効化し、どのプラグインで問題が再現するか特定します
特にスムーススクロール機能を持つプラグイン、目次自動生成プラグイン、ページビルダー系プラグインは、アンカーリンクの動作に影響を与えやすい傾向があります。
テーマの影響を確認する方法
テーマが原因かどうかを確認するには、一時的にWordPressのデフォルトテーマ（Twenty Twenty-Fourなど）に切り替えてみてください。デフォルトテーマでアンカーリンクが正常に動作する場合、使用中のテーマに原因があると判断できます。
テーマのfunctions.phpに独自のJavaScriptが記述されている場合、そのスクリプトがアンカーリンクのデフォルト動作を上書きしている可能性があります。
モバイル端末でだけ飛ばないケース
パソコンでは正常に動作するのに、スマートフォンでは飛ばない。このような状況に遭遇することもあります。
モバイル固有の原因
モバイル端末特有の原因として、以下のものが挙げられます。
固定ヘッダーの高さがデスクトップと異なる点が、最も多い原因です。レスポンシブデザインでは、モバイル表示時にヘッダーの高さが変わることが一般的です。先述のscroll-padding-topをメディアクエリで調整する必要があります。
/* デスクトップ */
html {
scroll-padding-top: 80px;
}
/* モバイル */
@media (max-width: 768px) {
html {
scroll-padding-top: 60px;
}
}
Android Chromeと自動広告の問題
Android版Chromeで、Google AdSenseの自動広告が有効になっている場合、広告の挿入によってページのレイアウトが動的に変化し、アンカーリンクのジャンプ先がズレることがあります。
この問題に対しては、アンカーリンクのジャンプ先付近に広告が挿入されないよう、AdSenseの除外設定を行うか、JavaScriptによる動的なスクロール位置補正で対応する方法があります。
トラブルシューティングの体系的な進め方
アンカーリンクが飛ばない場合、闇雲に原因を探すのではなく、体系的に切り分けを行うことで効率的に解決できます。
トラブルシューティングの優先順位
まずIDの設定とURL形式を確認し、次にシークレットモードでキャッシュの影響を排除します。それでも解決しない場合に、固定ヘッダーの影響やプラグイン競合を調べるという流れが効率的です。
ブラウザの開発者ツール（F12キーで起動）を使えば、対象要素のIDが正しく設定されているか、CSSのposition: fixedが適用されているかなどを直接確認できます。WordPressの基本的な操作に不安がある方は、まず管理画面の使い方を確認しておくと、トラブルシューティングもスムーズに進みます。
ブロックエディタでのアンカーリンク設定手順
基本に立ち返って、WordPressブロックエディタでの正しいアンカーリンク設定手順を確認しておきましょう。
ジャンプ先（到着点）の設定
まず、ジャンプ先となる要素を設定します。重要なのは、リンクを作る前にジャンプ先を先に設定することです。
見出しブロックを選択した状態で、右サイドバーの「ブロック」タブを開きます。「高度な設定」セクションを展開すると「HTMLアンカー」という入力欄が表示されます。ここに任意のID名（例：about-section）を入力します。
見出し以外のブロック（段落、画像、カラムなど）にもHTMLアンカーは設定できます。
リンク元（出発点）の設定
次に、リンクとなるテキストを設定します。リンクにしたいテキストを選択し、ツールバーのリンクアイコンをクリックします。URL入力欄に#about-section（先ほど設定したID名の前に#を付けたもの）を入力し、Enterキーで確定します。
WordPressのカスタマイズ全般に慣れている方であれば、カスタムHTMLブロックで直接<a href="#id名">と記述する方法も使えます。
今後のトラブルを防ぐための予防策
アンカーリンクのトラブルを未然に防ぐために、いくつかの習慣を身につけておくことをおすすめします。
ID命名規則を統一する
サイト全体で一貫した命名規則を採用しましょう。たとえば、section-というプレフィックスを付ける、すべて小文字のケバブケース（kebab-case）で統一するなどのルールを決めておくと、ミスを大幅に減らせます。
公開前の確認フローを作る
記事を公開する前に、以下の確認を行うフローを習慣化することで、アンカーリンクの不具合を事前に発見できます。
テスト環境での検証
CSSやJavaScriptの変更を行う場合は、本番環境で直接編集するのではなく、ステージング環境やローカル環境でテストしてから反映するのが安全です。特にスクロール関連のJavaScriptは、他の機能に影響を与える可能性があるため、十分なテストが必要です。
よくある質問
アンカーリンクにスムーススクロールを追加するにはどうすればいいですか
CSSでhtml { scroll-behavior: smooth; }を追加するだけで、ページ内リンクのジャンプがなめらかなスクロールに変わります。WordPressの「外観」→「カスタマイズ」→「追加CSS」に記述してください。ただし、一部の古いブラウザではサポートされていないため、完全な対応が必要な場合はJavaScriptでの実装をおすすめします。
目次プラグインのアンカーリンクが飛ばない場合はどうすればいいですか
Table of Contents PlusやEasy Table of Contentsなどの目次プラグインが生成するアンカーリンクが動作しない場合、プラグインが自動生成するIDとテーマのスクリプトが競合している可能性があります。プラグインの設定でスムーススクロールのオン・オフを切り替えてみるか、プラグインのID生成方式を変更することで解決することが多いです。
別ページからアンカーリンクで特定箇所にジャンプさせることはできますか
はい、可能です。リンク先のURLに#id名を追加します。たとえば、https://example.com/about-page/#team-sectionのように記述すると、about-pageを開いた際に自動的にteam-sectionの位置までスクロールされます。ただし、ページの読み込み速度や遅延読み込みの画像などによって、ジャンプ位置がズレることがある点にはご注意ください。
アンカーリンクがSEOに与える影響はありますか
アンカーリンクはページ内のユーザーナビゲーションを改善するため、ユーザー体験の向上という観点でSEOにプラスの影響を与えます。また、Googleの検索結果にアンカーリンク先の見出しが「ジャンプリンク」として表示されることもあり、クリック率の向上が期待できます。ただし、アンカーリンクが正常に動作しない場合は逆にユーザー体験を損なうため、必ず動作確認を行ってください。
WordPressのクラシックエディタでもアンカーリンクは設定できますか
クラシックエディタでもアンカーリンクの設定は可能です。ジャンプ先の設定は、テキストモードに切り替えて対象の要素にid="アンカー名"を直接記述します。リンク側は、通常のリンク挿入と同じ手順で、URLに#アンカー名を入力します。ブロックエディタのように「HTMLアンカー」の入力欄はないため、HTMLを直接編集する必要がある点がクラシックエディタとの違いです。
まとめ
WordPressのアンカーリンクが飛ばない原因は、IDの記述ミス、固定ヘッダーによるズレ、キャッシュの影響、URL形式の問題、プラグインやテーマの競合、モバイル固有の問題など、多岐にわたります。
しかし、体系的にチェックしていけば、ほとんどのケースで原因を特定し解決できます。まずはIDの確認から始め、シークレットモードでのテスト、固定ヘッダーの調整、プラグインの切り分けと、順を追って確認していくことが大切です。
最も効果的な予防策は、ID命名規則の統一と公開前の動作確認を習慣化することです。一度ルールを決めてしまえば、今後のトラブルを大幅に減らすことができます。アンカーリンクは読者のページ内ナビゲーションを大きく改善する機能ですので、正しく設定して記事の使いやすさを高めていきましょう。