ページ内の特定の場所にジャンプすることはできましたが、
じゃあ、別のページの特定の場所にジャンプはできないのか?
と調べていたらできるみたいですね。
別ページのこの部分だけが関係してるって場合に使えるかもしれません。
ページ内リンクより使い方は難しそうですが…
別ページの特定の場所にリンクする方法
基本は
の記事のやり方と同じです。
<a href="リンク先のURL#アンカー名">任意の文字または画像のアドレス</a>
リンク先
<p id="アンカー名">任意の文字または画像のアドレス</p>
リンク元とリンク先のアンカー名を同じにして、
表示部分を入力です。
この場合もリンク先の表示部分は省略した方がいいかな。
アンカー名を見出しにすれば、ページ内リンクの時と同様に
そのページの見出しにジャンプします。
もちろんページ内リンクの時と同じように、
画像をクリックして別ページの特定の場所にジャンプさせることもできますよ。
<a href="リンク先のURL#アンカー名"><img src="画像のアドレス"></a>
こんな感じですね。
画像アドレスの取得の仕方は
【はてなブログ】ページ内リンクでページ内の特定の場所にジャンプさせる方法で
説明しています。
違うのはリンク元のアンカー名の前にリンク先のURLを入力するところです。
別ページにリンクするのだから当たり前っていえば当たり前ですけど。
実際にやってみよう
では、実際にやってみます。
別ページの特定の場所にジャンプをクリックすると
ページ内リンクでページ内の特定の場所にジャンプさせる方法の記事、
別の記事からジャンプしてきたよに移動します。
ちゃんと戻ってこれるのでクリックしても大丈夫ですよ。
それかブラウザバックで戻ってもいいです。
戻ってこれましたか?
このように別ページでも特定の場所にジャンプすることができます。
<a href="/entry/in-page-links#sunko">別ページの特定の場所にジャンプ</a>と入力しました。
同じドメインの場合はドメインまで省略できます。
リンク先の
https://www.atelier-sunko.info/entry/in-page-links
と
リンク元の
https://www.atelier-sunko.info/entry/link-to-another-page
は
同じドメインなので、
https://www.atelier-sunko.info
は
省略して
/entry/in-page-links
だけで大丈夫ってことですね。
https://gotanda-sunko.hatenablog.com/entry/illustac-new12
のように
ドメインが違う場合は全部入力しないとダメです。
<a href="https://gotanda-sunko.hatenablog.com/entry/illustac-new12
#gotanda">五反田すんこの制作日誌にジャンプ</a>
こんな感じです。
まとめ
・リンク元のアンカー名の前にリンク先のURLを入力
・リンク先が同じドメインの場合はドメインまで省略可能
・もちろん画像をクリックしてジャンプさせることも可能
別ページの特定の場所にリンク。
使い方は難しいですが普通のリンクとは違って
特定の場所を表示できるので、記事の最後に関連記事の
読んでほしいところに使うといいかもしれませんね。