すんこのアトリエとうぐいす工房

ゼロから始めるパソコン生活

【はてなブログ】ページ内リンクでページ内の特定の場所にジャンプさせる方法

ページ内リンクでページ内の特定の場所にジャンプさせる方法

~の場合はここは飛ばして次の項目から読めばいいよ!
みたいなジャンプ機能をつけてみた。

目次機能があるから、この項目にジャンプ!なら
その目次のアドレスをリンクとして貼ればいんじゃね?と思ったけどできませんでした…

※実例を元に説明するので、見出しの順番が変になってます。

ページ内の特定の場所にジャンプする方法

リンク元のアンカー名は英字から始まる任意の英数字。
例えば、jump01はいいですが、01jumpはダメです。
リンク先に設定するリンク元のアンカー名に#は不要です。

複数使用する場合は同じにならないように。
その横の任意の文字はリンクとして表示される文字なのでなんでも大丈夫です。

例えば、asdfgでも大丈夫ですが
管理しやすいようにわかりやすい単語にするのがいいと思います。

リンク先も文字を入力するとリンク先に文字が表示されます。
ここに何も入力しないとリンク先には何も表示されないので、
何も入力せずこそっとジャンプするようにした方がいいです。

<p id="リンク元のアンカー名"></p>
こんな感じですね。

画像をクリックしたらジャンプするようにしたい場合は画像のアドレスを入力します。
<img src="画像のアドレス">で指定します。

リンク元の場合は
<a href="#任意のアンカー名"><img src="画像のアドレス"></a>
こんな感じです。

画像のアドレスはどこで分かるの?

ブラウザで画像を開くと画面上の方に表示されます。
~.jpgとか~.png、~.gifとかアドレスの最後が画像の拡張子になっているところですね。

とは言え、自分のデバイスに保存してある画像を
そのままブラウザで開いた時のアドレスではダメです。
任意のサーバーにアップロードしなければいけません。

ローカルファイルのアドレス
↑こんな感じのアドレスはダメ。

アップロードした画像のアドレス
↑こんな感じのアドレスなら大丈夫。

サイトに表示されている画像はその画像を別タブで開いたり、
画像のアドレスをコピーとかすればアドレスを取得できますが、
使用する際は著作権等気をつけてくださいね。

はてなブログの場合ははてなフォトライフと言うサービスがあるので
特に何もすることなくアップロードできます。

一番簡単な方法はその記事に画像を貼り付ける方法です。
画像を貼り付けて、右側のアイキャッチ画像選択で
その画像を選択すると下にその画像のアドレスが表示されます。
それをコピペするだけです。

アイキャッチ画像から画像のアドレスを取得

できたら貼り付けた画像を消すのを忘れずに。
そうしないと同じ画像が二つ並んじゃいますからね。

直接はてなフォトライフでアドレスを所得する方法もあります。
はてなフォトライフにアクセスし、使用したい画像を選択。
表示された画像を右クリックして画像アドレスをコピーでも取得できます。

実際にやってみる

アンカー名をjump01、任意の文字をここをクリックするとジャンプでやってみます。

<a href="#jump01">ここをクリックするとジャンプ</a>と設定してみました。

ここをクリックするとジャンプします。
ジャンプ先にここに戻るページ内リンクを貼ってあるので、
容赦なくクリックしてみてください(笑)


戻ってこれましたか?

このようにページ内の指定した場所にジャンプさせることができます。

次は画像をクリックするとページ内の特定の場所にジャンプする方法です。

アンカー名は同じのを使えないのでpicture、画像のアドレスでやってみます。

<a href="#picture"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/xxxx/xxxxxx/xxxxx.png"></a>と設定してみました。

下の画像をクリックするとジャンプします。


戻って来られましたか?

このようにリンク元とリンク先を設定することで
ページ内の特定の場所から特定の場所へジャンプさせることができます。

ちなみに目次を設定している場合、リンク元のアンカー名を任意の目次名にすることで
任意の見出しにジャンプさせることができます。
この場合はリンク先は見出しになるので設定は不要です。

<a href="#ページ内の特定の場所にジャンプしてきたよ">ここをクリック</a>
設定してみました。

ここをクリックすると
見出しのページ内の特定の場所にジャンプしてきたよにジャンプします。

まとめ

指定した場所にジャンプできるページ内リンク。

読み飛ばされちゃったりするかもだけど、絶対にここは読んで欲しい!とか、
訪問してくれた人には関係ないところは飛ばせるので
最後まで読んでもらえるとかあるかもしれませんね。

でも、頻繁に使うとあっち行ったりこっち行ったりでうざいので気をつけてくださいね。
今回は説明のためにたくさん使ったけど、こんな記事普通に読みにくいよね(笑)

ページ内の特定の場所にジャンプしてきたよ

このようにリンクをクリックすると指定した場所にジャンプします。

ここには<p id="jump01"></p>を設定しています。
アンカー名に同じjump01、任意の文字は省略ですね。

それではここをクリックして元に戻りましょう。


このようにリンク先に画像を設定することもできますよ。
まぁ、画像を貼り付けてるようにしか見えませんけどね。

ここには<p id="picture"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sunko-chan/20201229/20201229151606.png"></p>を設定しています。

では、ここをクリックして元に戻りましょう。

まとめに行きたい場合はここをクリック


別の記事からジャンプしてきたよ

ここは
【はてなブログ】ページ内リンクを応用して別ページの特定の場所にリンクする方法から来た人用です。
直接この記事に来た人はスルーしてください。

それでは元のページに戻りましょう。