【HTML】簡単にできるページ内リンクの作成【CSS】

どうもnakattyです。

WordPressでサイトを作っている時に、クリックしたらページ内の特定の場所にスクロールする機能をつけたいと思います。

これはHTMLとCSSで実装できるので、私のようなプログラミングが苦手な人間にも簡単に実装ができます。

こんな奴を作ります↓

ページ内リンクの仕組み

ページ内リンクの仕組みは同じページ内の飛ばしたい場所にidを設定し、
<a>タグを使って設定したidの場所にスクロールさせるといった流れになります。

ページ内リンクの設定方法は以下のような流れで行います。

①、スクロールしたい場所のタグ内にidを設定する。

使用するタグは<h2>でも<div>でも<p>でも何でもOKです。

②、次に<a href=””>のタグ内のリンク先をid名に指定する。

イメージとしては以下のような感じです。

実装する

それでは実際にページ内リンクを実装していこうと思います。
特に難しいことはないので順番にやっていきます。

飛ばしたい場所にidを設定する

まずは飛ばしたい場所のタグにidを設定します。

コードは以下のような感じです。
id名は好きなように入力してください。

これで飛ばしたい場所の設定はOKです。

スクロールボタンを作る

スクロールボタンは<a>タグを使います。
<a>タグ内のhref=””の中は「#id名」という形で入力してください。
「＃」が抜けてしまうとスクロールされません。

以下のような感じでコードを書きます。

これでページ内リンクが機能します。

ページを跨ぐ場合

ページ内リンクですが、ページを跨ぐことも可能です。

ページを跨ぐ場合は、飛ばしたい場所にidを設定するのは通常と同じですが、<a>タグに少し工夫が必要です。

<a>タグ内のhref=””の中を#idではなく、「href=”URL#id名”」としてください。

ここをクリックするとaboutページの「ブログ運営者について」に飛びます。
※<a>内に「target=”_blank”」を入れてるので新しいウインドウで開きます。

まとめ

ページ内リンクについてまとめました。
上手く使いこなせば、サイトの回遊性をアップさせたりできるかもしれません。