【はてなブログ】記事の中をジャンプで飛びたい！ページ内リンクを貼る方法【カスタマイズ】

ブログを作っていく中で、「この記事の中のある部分までジャンプさせたい！」…と思ったことはありませんか？

外部リンクや内部リンク（自分のブログ内）は、URLを入力すれば設置できますが、この記事のページ内に飛びたい場合があります。

その方法を解説していきたいと思います。

ページ内リンクの貼り方

ページ内リンクは以下のコードを使えば簡単に設置することができます。

リンク元に、

<a href="#id名"> リンク元の言葉</a>

リンク先に、

<a id="id名"></a>

を設置するだけ！

「id名」の部分を自分でわかりやすい名前をつけて、「リンク元の言葉」をコードで囲みます。

この時、コードエディターに変えて設置してください。

実際にページ内リンクを設置してみたいと思います。

ページ内リンクを貼り付けてみる

「ここ」をクリックして「まとめ」の見出しまで飛ばしたい場合。
　 ↑↑　実際にクリックしてみてください。「まとめ」まで飛びます。

STEP１：HTML編集で「リンク元の言葉」をコードで囲む

 「HTML編集」のタブをクリックし、リンク元の言葉を「」のコードで囲みます。「id名」を自分でわかりやすい名前に変更します。今回、私は「まとめ」に飛ばしたかったので、「id名」は「まとめ」に変更しました。

STEP２：リンク先にコードを貼り付ける

 「まとめの見出し」の直前に、リンク先のコードを設置しました。「id名」はリンク元と同じ名前に変更します。

STEP３：プレビューで見て、リンクまでちゃんと飛ぶか確認する

あとは、プレビューを見て、リンクがちゃんと機能しているか確認してください。

まとめ

どうでしたか？簡単に設置できたと思います。

長い記事などを書くと、
そのページ内に飛ばしたい時も出てくるかと思います。

ぜひ、あなたのブログに活用してください！

▼クリック！応援お願いします！▼