ブログを作っていく中で、「この記事の中のある部分までジャンプさせたい！」…と思ったことはありませんか？
外部リンクや内部リンク（自分のブログ内）は、
こういったアイコンをクリックして、飛びたいURLを入力すれば飛べますが、この記事のページ内に飛びたい場合があります。
その方法を解説していきたいと思います。
ページ内リンクの貼り方
ページ内リンクは以下のコードを使えば簡単に設置することができます。
リンク元に、
<a href="#id名"> リンク元の言葉</a>リンク先に
<a id="id名"></a>を設置するだけ！
「id名」の部分を自分でわかりやすい名前をつけて、「リンク元の言葉」をコードで囲みます。
この時、コードエディターに変えて設置してください。
実際にページ内リンクを設置してみたいと思います。
ページ内リンクを貼り付けてみる
「ここ」をクリックして「まとめ」の見出しまで飛ばしたい場合。
↑↑ 実際にクリックしてみてください。「まとめ」まで飛びます。
STEP1：コードエディターに変えて「ここ」をコードで囲む
ダッシュボードの右上にある「・三つ」をクリックし「コードエディター」を選びます。
コードエディターになったら、リンク元の言葉を「<a href=”#id名”></a>」で囲みます。その時、「#id名」も任意の言葉に変えます。今回は「#まとめ」にしました。
STEP2：リンク先にコードを貼り付ける
リンク先に「id名」を「まとめ」に変えて、「<a id=”id名”></a>」を貼り付けます。
見出しの「まとめ」の直前に貼り付けました。
「ビジュアルエディター」に戻します。
「ビジュアルエディター」に戻すと「見出しのまとめ」の前に上記の警告が出ますが、ブロックのリカバリーはしてもしなくても大丈夫です。
ブロックのリカバリーをすると、
上記のようにコードが変更されますが、普通にリンクは飛びます。
ただ、リカバリーをしないほうが、リンクが飛ぶ場所が的確な場所に飛ぶと思います。
「ブロックのリカバリー」をした時
「ブロックのリカバリー」をしなかった時
まとめ
簡単でしょ？コードを適切に貼り付けるだけで、ページ内リンクを貼ることができました。
今回の記事は、かなり短い記事なので、ページ内リンクにあんまり意味がありませんが、長い記事を書くときは、長すぎてある特定の場所まで飛ばしたい時に効果的です。
ぜひ、ページ内リンクを活用しましょう！
▼クリック！応援お願いします！▼
