広告 はてなブログ関連

はてなブログで記事中の任意の場所にスクロールを飛ばすリンクを作る方法!

簡単に作ることができるので、是非試してみてください!


今回の手順で作れるリンク!

長い記事になると記事中の任意の場所に飛ばすことができるリンクを作りたいときもありますよね!

今回はそんな方のために、簡単に任意の場所まで飛ばせるようなリンクの作り方を紹介します!

この記事の文字数が少ないので、一番上と一番下に移動するリンクを作成してみました!

ここをクリックすると一番上に戻ります。

ここをクリックすると一番下に行きます。

こんな感じで記事中の好きな場所に移動することができるリンクの作り方を紹介します!

今回は文字にリンクを貼っていますが、画像をタッチすると移動するようにもできますよ!

指定ヵ所にジャンプするリンクの作成手順!

リンクの作り方は簡単です!

※自分でHTMLを編集する必要があるため、パソコンが好ましいです。

記事を書き終わったら、HTML編集モードに切り替えます。

①飛ばしたい場所にidを指定

リンクを押した際に飛ばしたい場所に

<p id=○○>ここに文章とか書いてある<p>

のように記載します!

このidは記事中でユニーク、つまり一意になるようにしてください!(重複ダメ!)

また、上の例では<p>タグにidを付けていますが、hタグやdivタグなどにもidを設定することができます。

続いて、飛ばす元となる部分を

<a href="#○○"></a>

のように記載します!

この<a href><a>で囲んだ部分がリンク状態になります!(もちろん、○○の部分はidで指定したのと同じ文字を指定します。)

これで簡単に意図した場所に飛ばすことができます!

これで同じページ内に飛ばす場合は終わりです!!

今回の無いようを応用すると他の記事も任意の場所に飛ばすことができるようになります!

例えば、下の記事のリンクでジャンプするとペンギンについて書いてある位置から読み始めることができると思います!

ここをクリックすると葛西臨海水族園の紹介記事のペンギンの所から開始します。

他のページに飛ばす場合は、

<a href="URLが書いてある#○○">

リンク先のページにあらかじめ設定しておいたidを指定すると指定した場所を初期表示してくれます!

これで今回の記事はおしまいです!!

意外とあまり使う機会はないかもしれませんが、気が向いたら使ってみてはいかがでしょうか?


 

最後までお読みいただきありがとうございます。

-はてなブログ関連