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

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

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

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

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

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

【ブログの感想・もめへの質問募集中!!】

僕の記事をご覧いただきありがとうございます!ブログの感想や質問はTwitter(@momecamp0121)や下のコメント欄、マシュマロ(匿名)などで受け付けています!

感想や質問、ご意見などなど。もらうととても嬉しいのでバンバンください。僕の承認欲求を満たして欲しい。よろしくお願いします!!

 

スポンサーリンク

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

①ジャンプ元ボタン

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

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

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

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

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

ワープできるよ

試しに押してみると…

②ジャンプ先ボタン

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

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

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

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

以上!

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

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

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

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

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

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

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

More

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

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