ページ内リンクは、訪問者を必要な情報へすぐに案内できる便利な仕組みです。離脱防止につながる一方で、設定方法を誤ると正しく動作しなかったり、クリックしても位置がずれたりすることも少なくありません。
この記事では、ページ内リンクの基本的な意味から作り方、デザイン、飛ばない・ズレるといった不具合の原因と直し方までをわかりやすく解説します。
ページ内リンクとは
ページ内リンクとは、同じページの中で、クリックすると特定の場所まで自動でスクロールして移動できるリンクのことです。通常のリンクは別のページへ移動したり、同じページでも先頭に戻ったりしますが、ページ内リンクは目的の見出しやセクションへ直接ジャンプできるのが特徴です。
代表的な例が、ブログ記事の冒頭に設置する目次です。読みたい項目をクリックするだけで、該当の箇所まで移動できます。また、情報量の多いページやFAQページ、サービス内容、料金プランをまとめたページなどでも広く活用されています。
とくにスマートフォンは画面が小さくスクロールの負担も大きいため、ページ内リンクの有無が使いやすさを大きく左右します。訪問者が読みたい情報へすぐにたどり着けるようになるため、スクロールの手間を減らし、離脱防止にもつながります。
ページ内リンクのデザイン
ページ内リンクは、見た目のデザインによって訪問者の使いやすさが大きく変わります。代表的な表現方法として、テキスト・ボタン・画像の3つのデザインパターンがあります。ここでは、それぞれの特徴を紹介します。
テキスト
テキストリンクは、もっとも基本的なページ内リンクの形式です。目次などで、訪問者が必要な情報へすぐにアクセスできるように設置されます。
リンクだと気づいてもらうために、文字に下線をつけたり、色を変えたりして通常の文章と区別することが大切です。マウスを乗せたときに色が変わるよう設定すると、クリックできる場所だとさらに伝わりやすくなります。
情報量の多いページでも圧迫感が出にくく、文章の流れを邪魔しないため、ブログ記事からサービス紹介ページまで幅広く使われている形式です。デザインに自信がない場合は、まずテキストリンクから取り入れてみるとよいでしょう。
ボタン
ボタン型のページ内リンクは、訪問者の目に留まりやすく、行動を後押ししたい場面に向いています。たとえば料金ページであれば、ページの上部に「プランごとの料金例を見る」「料金の内訳を見る」といったボタンを設置し、訪問者が知りたい項目へすぐに誘導するといった使い方ができます。
サイズや背景色、角の丸み、影のつけ方などを工夫すると、クリックしやすさや存在感を高められます。訪問者が迷わず次の行動に移れるよう、周囲の文章よりも目立つデザインにすることがポイントです。
ページの最後に「ページ上部へ戻る」ボタンを設置するのも、ボタン型のページ内リンクの代表的な使い方のひとつです。離脱を防ぎ、回遊性を高める効果が期待できます。
画像
画像にページ内リンクを設定すると、視覚的に訴求力のあるナビゲーションをつくれます。たとえば、サービスの紹介画像やバナーをクリックすると、同じページ内の詳細な説明部分へ移動するといった使い方が代表的です。
デザインの自由度が高い一方で、画像はリンクだと気づかれにくいことがあります。パソコンではマウスを乗せたときに画像を暗くするなどの工夫ができますが、スマートフォンではホバー操作ができないため、画像の上に「詳しく見る」といった文字や矢印のアイコンを常に表示しておくと、デバイスを問わずクリックできる場所だと伝わりやすくなります。
ページ内に並べた商品やサービスの画像から、それぞれの詳細な説明部分へ移動させたい場合にも適しており、テキストよりも直感的に内容を伝えられるのがメリットです。
ページ内リンクの作り方
ページ内リンクを設置するには、移動先となる要素のid属性を確認し、指定するリンクのURLにそのidを指定するだけです。難しい知識がなくても、2つの手順で設定できます。
ジャンプ先のidを確認する
まずは、ページ内リンクの着地点にしたい見出しやセクションに、id属性がすでに設定されているかを確認します。確認するには、パソコンのブラウザでページを開き、右クリックで「検証」または「ページのソースを表示」を選択します。
表示されたコードの中に、たとえば<h2 id=”price”>のような記述があれば、その「price」の部分がid名です。コードに不慣れな場合は、Ctrl+Fで「id=」と検索すると見つけやすくなります。
この記述が見当たらない場合は、自社で編集できない部分になるため、制作会社に依頼してid属性を追加してもらいましょう。
リンク先URLの最後にidを記述する
id属性が確認できたら、ページ内リンクとして使うURLの末尾に「#」とid名を続けて記述します。たとえば、確認したidが「price」であれば、「https://example.com/#price」のようなURLになります。
このURLは通常のリンクと同じ扱いができます。リンクを設定したいテキストやボタンを選択し、リンク先のURL欄に「#price」までを含めたURLを入力するだけで設定完了です。WordPressであっても、特別な機能を使う必要はありません。
設定後は、実際にクリックして意図した場所まで移動するかを必ず確認しておきましょう。
ページ内リンクが飛ばない原因と対処法
ページ内リンクを設定したのにクリックしても移動しない場合、原因はいくつかのパターンに絞られます。代表的な3つの原因を確認すれば、ほとんどのケースで解決できます。
HTMLタグを確認する
ページ内リンクが飛ばない原因として最も多いのが、HTMLタグの記述ミスです。「#」を付け忘れていたり、リンク先のid名とスペルが一致していなかったりすると、正しく動作しません。
特によくあるのが、半角と全角が混在しているケースです。エラーメッセージが出るわけではなく、ただクリックしても反応しないだけなので、見落としやすいミスといえます。
リンク元とリンク先のid名が一文字も違わず一致しているか、改めて見直してみましょう。id名をコピー&ペーストして使うようにすると、入力ミスを防げます。
着地点の識別コードが重複している
ページ内リンクは、リンク元とリンク先のid属性が一致することで正しく動作します。しかし、同じページの中に同じid名が複数存在すると、ブラウザがどちらに移動すればよいか判断できず、リンクが正常に機能しないことがあります。
たとえば、よくある質問のように似た構成のセクションを繰り返し作成した際に、テンプレートをそのままコピーしたことで、意図せず同じid=”faq”を複数箇所に設定してしまうケースがよく見られます。
このような場合は、それぞれのid名を別の名前に変更することで解消できます。ページ全体でid名が重複していないか、一通り確認しておくと安心です。
WordPressのテーマ・プラグインが影響している
WordPressでは、テーマやプラグインの仕様によってページ内リンクがうまく動作しないことがあります。
代表的な例が、スムーズスクロール系のプラグインや、表示速度を上げるために画像の読み込みを遅らせる機能です。これらの機能がページ内リンクの動作と競合すると、クリックしても正しい位置まで移動しなかったり、一瞬表示されてすぐ上に戻ってしまったりすることがあります。
思い当たる原因が見つからない場合は、関連しそうなプラグインを一時的に無効化し、動作が直るかを確認してみましょう。自社で判断が難しいときは、制作会社に相談するのが確実です。
ページ内リンクの位置がずれる原因と直し方
ページ内リンクをクリックした際に、見出しの上部がヘッダーに隠れてしまうことがあります。多くの場合、固定表示されたヘッダーが原因です。原因と直し方を理解しておくと、制作会社に的確に伝えられます。
CSSで着地点の位置を補正する方法
ページ内リンクの位置がずれる主な原因は、ページ上部に固定されたヘッダーです。ヘッダーが常に画面に表示され続けるため、クリック先の見出しがちょうどヘッダーの真上に重なり、隠れてしまいます。
この場合、scroll-margin-topというCSSの設定で、見出しの表示位置をヘッダーの高さ分だけずらして調整できます。比較的シンプルな指定で対応できる方法です。
コードの追加が必要になるため、自社での編集が難しい場合は、制作会社に「ヘッダーの高さ分、scroll-margin-topで調整してほしい」と伝えると、スムーズに対応してもらえます。
jQueryでスクロール位置を制御する方法
ヘッダーの高さがページによって異なるなど、CSSだけでは調整しきれないケースでは、jQueryを使ってスクロール位置を制御する方法もあります。ページ内リンクがクリックされた際に、ヘッダーの高さ分だけ自動で位置を調整する仕組みです。
WordPressサイトの多くはすでにjQueryが読み込まれているため、新たにファイルを追加しなくても対応できることが多いです。
こちらもコードでの対応が必要になるため、自社での実装が難しい場合は、制作会社に依頼するとよいでしょう。
ページ内リンクに関するよくある質問
ここでは、ページ内リンクを設定する際に多く寄せられる質問をまとめました。実際に作業を進めるうえで迷いやすいポイントなので、設定前や見直しの確認に役立ててください。
id名は日本語でも大丈夫ですか？
技術的には日本語のid名を使うことも可能ですが、おすすめできません。日本語を含むURLは、ブラウザ上で「%E3%83%9A」のような長い英数字の羅列に変換されて表示されることがあり、見た目がわかりにくくなるためです。また、コピーして共有する際にも扱いにくく、貼り付けの過程で文字化けや入力ミスが起きる原因にもなりやすくなります。
id名には英数字とハイフンやアンダースコアのみを使い、内容が一目で伝わる簡潔な単語にしておくと安心です。たとえば料金プランであれば「price」のような単語が適しています。
別のページの特定の場所にリンクしたい場合はどうすればいいですか？
別のページの特定の場所へリンクしたい場合も、基本的な考え方は同じです。
移動先のページのURLの末尾に「#」とid名を加えることで、別ページの指定した位置までジャンプさせられます。ただし、同じページ内だけでなく別ページへの移動も含めた広い概念は、一般的にアンカーリンクと呼ばれ、押さえておくべき注意点も少し異なります。
詳しくは、アンカーリンクとは？の記事で詳しく解説しています。
まとめ
ページ内リンクは、訪問者を必要な情報へすぐに案内できる便利な仕組みです。テキストやボタン、画像など、サイトの内容に合わせたデザインで設置できます。
作り方はシンプルで、リンク先のidを確認し、URLの末尾に「#」とid名を加えるだけで設定できます。
一方で、HTMLタグの記述ミスや識別コードの重複、WordPressのテーマ・プラグインの影響によって、クリックしても正しく動作しないことがあります。固定ヘッダーによって位置がずれる場合は、CSSやjQueryでの調整が必要です。
正しく設定・調整されたページ内リンクは、訪問者の使いやすさを高め、読みやすいホームページづくりに役立ちます。
