はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

【ブログカスタマイズ】はてなブログでページ内ジャンプする方法

参加してます!ポチッとお願いします

記事名と
URLをコピー

こんにちは、情報系大学生のハル(Blog_IT_haru)です。

今回は、記事の中を飛ぶ方法についてまとめます。

f:id:Blog_IT:20220205112843p:plain

やり方

まずは、お使いの環境できちんと動作するか確認します。

↓の参考にしたサイトをクリックしてみてください。

ここから参考にしたサイトに飛びます。

無事に飛べましたでしょうか?

やり方は簡単です。

今回の場合、HTML編集の部分に、↓のように記述しています。

<p>ここから<a href="#参考にしたサイト">参考にしたサイト</a>に飛びます。</p>

そして、飛びたい部分には、以下のように記述しています。

<h3><a id="#参考にしたサイト"></a>#参考にしたサイト</h3>

ポイントは、aタグを使用することと、id名に#を忘れずにつけることです。

蛍光ペンの箇所は、id名ですので、わかりやすく変更すれば、自由に変えることができます。

<a></a>で挟まれている部分も、自由に変えることができます。

今回は、h3にしていましたが、pでも同様のことが可能ですので、ぜひやってみてくださいね。

参考にしたサイト

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

まとめ

いかがでしたか?

今回は、はてなブログで、見出しのところに飛ばす方法を書きました。

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

下の方とサイドバーにある、サポートもお待ちしています!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。