サイト作成をしている中で、ページ内のある部分にクリックして飛ばしたいときってありますよね。
あるリンクをクリックすれば、ページのある部分にジャンプしてくれる機能を使いたい方に、今回はアンカーリンク設定方法をお伝えします。
アンカーリンク設定方法
ページ内でクリックしてジャンプするにはアンカーリンクを設定する必要があります。
※この時ワードプレスでしたらエディタを「テキスト」モードにして行ってください。
①飛ばしたい先にidを付与する
まず飛ばしたい先にidを追加します。
例えばこのように記載します。
飛ばす先のリンク設定
<div id=”jump”>とばしたい先の文章</div>
②飛ばすリンクにidを設定する
飛ばす元のリンク設定
<a href=”#jump”>こちら</a>をクリックでジャンプ
aタグの中はリンクにしたい文字だけを入れ、残りはその外に記述してください。
記入例
飛ばす元のリンク設定(例)
<a href=”#sample”>サンプルへジャンプ</a>
飛ぶ先のリンク設定(例)
<div id=”sample”>サンプル</div>
上のリンクをクリックでここまでジャンプします。
まとめ
サイト作成時に文章が長くなってしまったときや、要点に飛びたい方のためにリンクを設定すればサイトの閲覧性も向上するのでおすすめです。
