【BLOG】簡単にページ内リンクで指定場所にジャンプさせる方法

2022-10-312023-02-17

ネットで検索していると、目次などをクリックしたら、その場所までジャンプしてくれることがよくあります。

ブログを始めたころは「どうやってやるんだろう？」と不思議に思っていました。

でも、やってみると超簡単でした。今では、当たり前のように活用しています。

いくつかの方法がありますが、最も単純な方法を紹介したいと思います。

この記事の内容

HTMLのページ内リンクで指定場所にジャンプする方法を簡単に紹介しています。

難しい言葉など使わずに、わかりやすく書いています。

ジャンプが使えるとカッコいいし、読む人にとってもありがたいから、ぜひ覚えたいブヒ🐽

ページ内リンクとは

ページ内リンクとはクリックすると、そのページの指定された場所までジャンプできるリンクのことです。

例えばここをクリックしてみてください⇒click！

ちょっとだけ上に動いて「☆この記事の内容」に飛んだはずです。

これがページ内リンクです。やり方さえ覚えれば、どこへでも飛んでいけます。

ページ内リンクを使用することによって、サイトを訪問したユーザーが、自分が知りたい項目にすぐにたどり着けます。

＜トップに戻る＞などのボタンを設置することもできるので、長い記事のときには有効的です。

また、ユーザーの利便性が向上し、SEO効果を上げることが期待できます。

さっきの「click！」を例に解説します。

最初に「HTMLで編集」に切り替えます。

切り替えたら、「click！」の前に半角で　<a href="#gogo">　と入力します。

「gogo」に部分は「jump」や「point」など、何でも好きな文字列で構いません。

次に「click！」の後ろに半角で　</a>　と入力します。

つまり、こうなります。

次に飛ばしたい場所をつくっていきます。

さっきの「click！」から飛ばした場所は「☆この記事の内容」でした。

ここに飛ばすためには、１つ前のブロックに手を加えます。つまりここでは

「いくつかの方法がありますが、最も単純な方法を紹介したいと思います。」

というブロックが1つ前のブロックになります。

最初に「HTMLで編集」に切り替えます。

切り替えたら<p>いくつかの～思います。</p>という表示になります。

この最初の<p>の部分に手を加えます。

まず、pの右側に半角でスペースを空けます。

次に、 id= と入力します。

そして“gogo"と入力します。

つまり、こうなります。

これで、ページ内リンク完成です。

入力が終わったら、実際に飛ばしてみましょう。

飛べたらOKですが、もしうまくいかない場合は入力内容を再確認してください。

	よくあるミス
１	半角スペースが全角スペースになっている。
２	“　"や # を入力していない。
３	つづりを間違っている。（例）jumpとjanpなど
４	HTML編集で、無関係部分に触れてしまった。（例）<p>の p や < を誤って削除など

もう一度、ここをクリックしてみてください⇒click！

このように、複数の場所（出発点）から同じ場所（着地点）に飛ばすこともできます。