ページ内ジャンプ(リンク)の設定方法【htmlでスクロールを飛ばす】

  • 1 min read
ページ内ジャンプの設定方法【記事スクロールの手間をなくす】

何かのサイトを閲覧するときに、記事を長々とスクロールして目的の内容を探すのって面倒ですよね。実は記事スクロールのわずらわしさを、あなたの記事を読むユーザーも感じています。

そこで、この記事ではページ内ジャンプで記事の途中に飛ばす方法(正式名:ページ内リンク)を解説します。

かんたんなHTMLを記述するだけで設定ができて、UX(ユーザーエクスペリエンス:ユーザー体験)が向上するため記事の離脱率が下がる可能性があります。

設定方法は超かんたんなので、記事を読めば一瞬で使いこなせますよ。

▼方法をすぐに知りたい方はボタンをクリック

ページ内ジャンプの仕組み

まず、ページ内ジャンプ(ページ内リンク)の仕組みを簡単に解説します。

ページ内ジャンプはアンカーを使う

ページ内ジャンプの仕組み

ページ内ジャンプ(リンク)
ページ内ジャンプ(リンク)
リンクの記述方法

  • ページのジャンプ元に『#id名』
  • ジャンプ先に『id=”id名”』

このようにHTMLコードを記述すれば、目的のコンテンツまでジャンプすることができます。

ページ内ジャンプの種類は2種あります。

ページ内ジャンプの種類

  • テキストリンク
  • ボタンリンク

テキストリンクが多いですが、場合によってはボタンリンクも使います。

この記事では、わかりやすく冒頭でボタンリンクを使用しました。このあとの項目で、テキストリンクも使用しているので参考にしてみて下さい。

ページ内ジャンプのSEO・ユーザーへの効果

ページ内ジャンプ(ページ内リンク)は、UX(ユーザー体験)が向上することで間接的にSEO効果が得られます。

ページ内ジャンプの効果

  • スクロールの手間がなく、目的のコンテンツにたどり着きやすい
  • 結果として直帰率や離脱率の軽減、平均セッション時間の改善に繋がる
  • ユーザーの滞在時間・サイト回遊率が良くなり、SEO評価が上がる

最近はスマホでのブログ閲覧が多いので、スクロールの手間をなくすだけでユーザーのストレスをかなり軽減できます。

ページ内ジャンプの設定方法

では、ページ内ジャンプの設定方法を解説します。

冒頭のボタンリンクですでに試した方もリると思いますが、ここではテキストリンクでジャンプしてみましょう。

先頭の見出しに戻る方はこちらをクリックしてください。

そしておかえりなさい。

ページ内ジャンプの概要がわかったら、次は実際にページ内リンクを設定する手順です。

ページ内リンクの設定手順
  1. 飛ぶリンク先にidを入力する
  2. 飛ぶためのリンクを作成する

このような2ステップで解説します。

ステップ①:ジャンプ先にidを入力する

ページ内ジャンプ先のアンカーに、HTMLコードで『id=”id名”』を記述する必要があります。

<p id=”test”>アンカーポイント<p>

上の記述は<p>にしていますが<div>でもOK!

※見出しタグでもOKとされることもありますが、おすすめしません(後の項目で詳細を解説)。

ステップ②:ジャンプするためのリンクを作成する

ページ内ジャンプするには、ジャンプ元のアンカーにHTMLで『#id名』の記述が必要です。

<a href “#test”>アンカーリンク</a>

リンクを張るためには『a href』の記述が必要ですが、クラシックエディターであれば簡単に挿入できます。

リンク設置ボタン

ページ内ジャンプを設定するためのリンク場所
ページ内ジャンプを設定するためのリンク場所

リンクしたいテキストを選択して、上記のアイコンをクリックするだけで『a herf』の記述になります。

では、実際にリンクしてみましょう。

ここをクリックする

はい、飛べました!!

これで、ページ内ジャンプで記事の途中に飛ぶことができます。

次にちょっとした応用テクニックで、別記事の途中にジャンプする方法を解説します。

別ページの途中にジャンプする方法

基本的にはページ内ジャンプの設定と同じですが、少しだけ違いがあります。

ステップ①:飛ぶページのジャンプ先にidを入力する

飛びたいページのジャンプ先に、HTMLで『id=”アンカーポイント”』を記述します。

<p id=”test”>アンカーポイント<p>

ここはページ内ジャンプの設定と同じですね。

ステップ②:別記事へジャンプためのリンクを作成する

ページをまたいで別ページの途中にジャンプする場合は、以下のようなHTMLの記述になります。

<a href=”https://chiyo-blog.com#test”>ここをクリックする</a>

『飛びたいページのURL#id名』にすると指定したページ内へ行き、idタグのついた位置まで一気にジャンプすることができます。

ページ内ジャンプがうまくいかない原因

ページ内ジャンプがうまく飛ばない原因は、以下の3つが考えられます。

うまくいかない原因
  1. 属性値が間違っている
  2. プラウザがidに非対応のまま
  3. ページ内リンクが重複している

属性値が間違っている

属性値は『id』や『a href』のことで、この記述に間違いがあるとうまくページ内ジャンプできません。

  • ジャンプ元のHTMLが『href=”#id名”』または『href=”ページURL#id名”』になっているか
  • ジャンプ先のHTMLが『id=”id名”』になっているか

記述ミスがないかをしっかりと確認しましょう。

プラウザがidに非対応のまま

現在ページ内ジャンプの記述は『id』ですが、以前は『name』でした。

『name』の場合の記述は以下のとおり

  • リンク元:<a href=”#name名”>○○</a>
  • リンク先:<p name=”name名”>△△</p>

今はプラウザが『id』に非対応とは考えづらいですが、もしうまくいかなければ『name』を記述してみましょう。

ページ内リンクが重複している

ページ内ジャンプが重複している場合には、うまくジャンプすることができません。

例えば一番注意が必要なのは、以下のような『見出しタグ』です。

  • <h2>見出し2</h2>
  • <h3>見出し3</h3>

見出しタグは、ほとんどの場合で目次からリンクされています。

見出しタグにページ内ジャンプしようとしても、目次からのリンクが優先されるためうまくジャンプできません。

もしも見出しタグにページ内ジャンプしたい場合は、以下のような記述にします。

見出しタグにページ内ジャンプしたい場合

見出しタグにページ内ジャンプするHTML記述
見出しタグにページ内ジャンプするHTML記述

見出しタグの直上に、<p id=”アンカーポイント”>スペース</p>を設定します。

ページ内ジャンプの設定方法まとめ

ページ内ジャンプを設定して、記事スクロールの手間を減らす方法をまとめます。

ページ内ジャンプの方法

  • リンク元:<a href=”#id名”>アンカーテキスト</a>
  • リンク先:<p id=”id名”>アンカーポイント</p>

別ページにジャンプする方法

  • リンク元:<a href=”ページURL#id名”>○○</a>
  • リンク先:<p id=”id名”>△△</p>

ページ内ジャンプを設定することでUX(ユーザー体験)が良くなり、結果としてSEO評価も上がります。

かんたんなHTMLですぐに設定できるので、ぜひ活用してSEOにもユーザーにも優しいサイトを作りましょう。

UX(ユーザ体験)をさらに向上するプラグインの紹介

ページ内ジャンプはもちろんのこと、ページの読み込み速度はU/X(ユーザー体験)を大きく高めます。

SEO評価にも直結するポイントなので、サイトスピードを神速にするプラグインを少し紹介します。

WP Rocket(ワードプレスロケット)

WP Rocket - WordPress Caching Plugin

WP Rocketは、CSSやJavascriptを最適化する有料プラグインです。

有料というとネックになるかもしれませんが、1サイトにつき月額換算500円以下で、アマゾンプライムよりも料金は安い。

WP Rocketを導入している僕の所有サイトの1つのLighthouseスコアは以下のとおりです。

Core Web Vitals(コアウェブバイタル)のスコア
Core Web Vitals(コアウェブバイタル)のスコア

WP Rocketだけで上のようなスコアになっているとはいえませんが、大きく寄与していることは間違いありません。

Core Web Vitals(コアウェブバイタル)を改善することで、SEOにおける検索順位やCVR(コンバージョン率)にも影響します。

難しい設定もないため、コードが操作できない初心者でも瞬時に効果を体感できますよ。

コードスキル必要なし!
\ サイトスピードを瞬時に高速化 /

>>WP Rocketのレビューはこちら

nv-author-image

4つの特化ブログを運営しながら、月収6桁を稼ぐブロガー。現在は開業してサロンサポーター&ブログ個別指導など実践しています。 WordPressに関すること(デザイン・カスタマイズ・テーマ・サーバーなど)が得意。なかでもサイトスピード改善サービスは個人/企業から高評価を得ています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です