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

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

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

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

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

ブロックエディタならコード入力なしにページ内リンクを設定することができます。
ブロックエディタでの設定方法はこちらの記事をご覧ください。

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

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

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

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

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

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

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

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

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

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

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

そしておかえりなさい。

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

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

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

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

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

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

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

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

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

リンク設置ボタン

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

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

ここをクリックする

はい、飛べました！！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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