daizuのつぶやき。

daizuが日々思っていることをつぶやいています。

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

f:id:daizumayuge:20211004104331j:plain
ブログを作っていく中で、「この記事の中のある部分までジャンプさせたい!」…と思ったことはありませんか?

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

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


ページ内リンクの貼り方


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

リンク元に、

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

リンク先に、

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

を設置するだけ!

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

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


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


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


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

STEP1:HTML編集で「リンク元の言葉」をコードで囲む

f:id:daizumayuge:20211004104018j:plain

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


STEP2:リンク先にコードを貼り付ける

f:id:daizumayuge:20211004104038j:plain

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



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

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


まとめ

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

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

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



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

PVアクセスランキング にほんブログ村