【HTML】ブログ内でリンクから特定の場所までジャンプする方法

こんにちは、もめ(@momecamp0121)です。

今回は、ブログ内にこんな風なリンクを作り、特定の場所までリンクする方法をまとめています。

目次までワープできるボタン

はい、自分用です。(笑)たまにしか使わないから毎回忘れちゃうんですよね。困ったものだ。やり方は下の記事を参考にしました。

HTMLでページ内リンク(ジャンプ)をスクロールする方法
HTMLでページ内リンク(ジャンプ)を適切に設定し、スムーズにスクロールさせながら、ユーザービリティを高めることが大切です。 今回は、...
もめ
もめ

ブログの感想や質問お待ちしております!→https://linktr.ee/momesolo(匿名の場合はマシュマロからどうぞ。)

HTMLの挿入だけでできちゃう。

①ジャンプ元ボタン

まずは、「押すと、指定の場所まで飛ぶことができるリンク」を設置する。

<a href="#1">ワープできるよ</a>

このコードのhref属性内の””の間は#をつければ自由に変えても大丈夫。数字でもいいし、aやbのアルファベットでもok。これをもとに後でジャンプ先を指定します。

「ワープできるよ」のように文字列はワープできることを示すのがわかりやすいでしょうね。

このタグを使うとこのようになります。↓

ワープできるよ

試しに押してみると…

②ジャンプ先ボタン

今度は、ジャンプ先を指定します。ジャンプさせたい任意の場所にHTMLタグを差し込みます。差し込むHTMLがこれ↓

<a id="1"></a>

id=” “の””の部分には先ほどのコードの#の後の文字列を入れる。数字だったりアルファベットだったり。同じ数字やアルファベットのところに飛べるという算段です。

aタグの中には何も入れません。そのため実際にページを表示したときには、飛ぶ先は何も見えません。

以上!

めっちゃ簡単。でもすぐ忘れる。

ちなみに、ジャンプするときは、ジャンプ先に設定したタグの位置を表示画面の一番上にしてジャンプします。だから、例えば別の見出しまで飛ぶときは、見出しタグや見出しブロックの上にこのジャンプ先のHTMLを挿入すると、ちょうどいい位置にジャンプしてくれます。(下の写真の位置。)

ジャンプ。元の場所に戻る

ジャンプを使うことによって読みやすさをアップしようね。

ブログは読む人によってはここはいらないかもな。。。という見出しが記事によってはあります。そんな時に使えますね。

わかりにくかったらこの記事を読むといいと思いまっす。(てきとう)

HTMLでページ内リンク(ジャンプ)をスクロールする方法
HTMLでページ内リンク(ジャンプ)を適切に設定し、スムーズにスクロールさせながら、ユーザービリティを高めることが大切です。 今回は、...
この記事を書いた人
もめ

More

ゆるキャン△に影響を受け,2019年2月にキャンプを始めた大学生。徒歩ソロキャンプを中心に初心者なりに試行錯誤中。ソロキャンプやひとり旅など1人で過ごすのが好き。temite公認アンバサダー。
次なる目標はバイクに乗ってキャンプツーリング。

Follow me !!
Other ブログその他
Follow me !!
"ソロ"を楽しむ
タイトルとURLをコピーしました