デザイン

ページ内リンク(記事の中の指定された部分に飛ぶ方法)の作り方について解説!

将軍
将軍
皆さんこんにちは!将軍です!

『ページ内リンク』というものをご存知でしょうか。簡単に説明をしますと、画像やテキストをクリックすることによって、指定した位置に飛ばす(スクロールする)ことを言います。

『Table of Contents Plus』などで生成をした目次も一種のページ内リンクですね。目次に表示されている部分をクリックするとその場所に一気に飛ぶことができます。

https://syougunnoblog.com/table-of-contents-plus/

この『ページ内リンク』の使い方としましては、記事を書いていて、『この部分の説明はこの位置にあるよ!』といったときに使ったり、目次ではないところからその段落へ飛びたいときなどに使います。

実際に『ページ内リンク』を作ってみたものがこちらになります!

ここをクリックしてください。






















やっほー

使う機会は限定的ですが、覚えておくと役に立ちますし、とても便利なものだと思います。ただこの『ページ内リンク』を作るときに少しややこしくて、分かりにくかったので丁寧に説明ができたらなと思います。

『ページ内リンク』を作る流れ


『ページ内リンク』を作る流れについて簡単に説明をしたいと思います。流れについては下記のような感じになります。

  1. 飛びたい先(スクロール先)に名前(ID名)をつける
  2. 名前をつけた部分にジャンプするように画像やテキストで設定する

飛ぶ先に名前(ID名)をつけて、そこに向かうようにテキストや画像で設定するという形になります。少しややこしいですが、旅行なんかで目的地が東京としたときにそこへ向かうイメージでしょうか。その東京という目的地に名前をつけるイメージです。説明を聞くよりは、実際に作ってみた方が早いと思いますので作ってみましょう。


テキストや画像に飛ぶ方法

ここではページ内リンクで、テキストや画像にジャンプさせる方法を見ていきましょう。


画像やテキストに名前をつける

まずはテキストや画像に名前をつけてみましょう。

このように『a name=』で囲ってその画像やテキストに名前をつけてここへジャンプしてくるようにします。今回は『text』という単語にしましたが、なんでも平気なので大丈夫です。例えば、『a1』などでもしっかりとはたらいてくれます。


名前をつけた部分にジャンプさせるリンクを作る

名前をつけ終わりましたら、そこへジャンプするリンクを作っていきます。

このように『a href=』で囲んでクリックさせてジャンプさせるようにリンクとして設定をします。ここで忘れてはいけないのが先頭に『#』をつけることです。これを忘れてしまうとうまく機能しませんの注意が必要です。

手順はこれだけですので、実際に作ってみたものを貼ってみましょう。

ここをクリックしてください。






















やっほー



  • 同じ名前のものを複数個作ってしまうと、変な動作をして狙ったところにいかないので注意してください。複数個『ページ内リンク』を作る場合は、違う名前にしましょう。

タグに飛ぶように『ページ内リンク』を作る

タグ、例えば目次などに飛ぶように『ページ内リンク』を作るには、先ほど説明をした画像やテキストと少々異なりますのでこちらも説明をしたいと思います。


タグにID名をつける

すでにタグにID名がついている場合には新たに設定をする必要がありません。下の説明では目次にID名をつけて、その目次に飛ぶように設定をしたいと思います。

このようにタグの後ろにIDで名前をつけます。こちらもテキストや画像の時と同じように、ID名はなんでも構いません。


ID名をつけた部分にジャンプさせるリンクを作る

ID名をつけ終わりましたら、そこへジャンプするリンクをさらに作っていきます。

『a href=』で囲んでクリックさせてジャンプさせるようにリンクとして設定をします。こちらも忘れてはいけないのが先頭に『#』をつけることですので気をつけて作るようにしましょう。手順は以上になりますので、実際に作ってみたものを貼ってみましょう。



ここをクリック!(目次の『ページ内リンク』を作る流れにジャンプします。)無事に目次にジャンプすることができました。

  • こちらも同じ名前のものを複数個作ってしまうと、変な動作をして狙ったところにいかないので注意してください。複数個『ページ内リンク』を作る場合は、違う名前にしましょう。


まとめ

自分なりに分かりやすいように説明をしたつもりですが、うまく伝えることができていなかったら申し訳ないです。

このリンクをCSSなどであらかじめ作っておいたボタンなどで囲めば、リンクのデザインを変更することも可能です。いろんな知識を活用してどんどん記事を分かりやすいもの、おしゃれなものにしていきましょう。