目次やページ先頭へ戻るリンクに使われる、ページ内リンクの設置の仕方



こんにちは、外出自粛が続いていますがいかがお過ごしですか。
こんな時こそ、自分が今まで時間がなくてなかなかできなかったことを取り組んでみるのもいいですね。
僕は、Pythonというプログラミング言語を勉強してます。
最終的にはAIを使えるようになりたいなと思っています。
自粛の時期に時間ができている人は、自社のブログの更新をするのもいいですよ。
今できることをやっていきましょう。

さて、今回は超初歩的なものですが、
検索されているキーワードを調べていたら需要がありそうだった内部リンクの設定方法について紹介します。

ページ内リンクというのは、リンクをクリックしたらページ内の該当箇所にジャンプさせるためのリンクです。
このサイトの右下、ページトップへ戻る矢印のボタンもページ内リンクで、クリックすることで一番上にジャンプさせています。
img ホームページのひとつの特徴として、ある場所からある場所へマウスのクリック１つでジャンプしていけるというリンクの概念があります。
リンクには２種類あって、ページ内リンクと外部ページへのリンク。
リンクをクリックすると別のページにジャンプするというのが一般的ですね。
ですが、同じページの別の位置にジャンプさせるリンクもあります。
ページ内リンクの設定方法はホームページを作る上での基本的な部分ですので、そんなに難しくありません。
ページ内リンクをうまく使えると、ホームページの導線がより良くなっていきますね。

ページ内リンクの設定方法

やり方はとっても簡単。
  • ジャンプ先に目印のタグを設置する
  • リンクタグに設定した目印へのリンクを貼る

ジャンプ先に目印をつける

まずはジャンプ先に目印をつけておきましょう。
設定の仕方は簡単で、ジャンプしたい先のタグにID属性をつけるだけです。
具体的にはこんな感じです。
<div id='target_id（任意のID）'>ここにジャンプしてくる</div>
今つけた名前を覚えておきましょう。

ジャンプさせるアンカータグの設置

次に、先ほどつけたIDの場所にジャンプさせるリンクをつくります。
まず、リンクを表すタグは一般的なリンクのタグと一緒で<a>です。
リンク先で貼るhref属性のURL部分を、ページ内リンクとしてのフォーマットに従って書きます。
そのフォーマットは簡単で先頭に”#”をつけるだけ。
先ほど設定したジャンプ先のIDに前に#をつけましょう。

<a href='#target_id'>ページ内リンク</a>

このように、とっても簡単です。
合わせて書くとこんな感じです。

<a href='#target_id'>ページ内リンク</a>
<!--
何かいろいろと書いてある
-->
<div id='target_id'>ここにジャンプしてくる</div>
<!--
何かいろいろと書いてある
-->

長いコンテンツの先頭に、目次リンクとしてよく使われていますね。
各見出しに対して目次を作ってページ内リンクを設定しておけば、好きなところから読むことができます。
内部リンクをうまく使って読みやすいホームページにしていきましょう。


[RelService] [Service]
ホームページの制作・運用のご相談はお気軽に
無料相談について メールでのご相談・お問い合わせ