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

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

【はてなブログ】ページ内リンクを応用して別ページの特定の場所にリンクする方法

ページ内リンクを応用して別ページの特定の場所にリンクする方法

ページ内の特定の場所にジャンプすることはできましたが、
じゃあ、別のページの特定の場所にジャンプはできないのか?
と調べていたらできるみたいですね。

別ページのこの部分だけが関係してるって場合に使えるかもしれません。
ページ内リンクより使い方は難しそうですが…

別ページの特定の場所にリンクする方法

基本は

www.atelier-sunko.info

の記事のやり方と同じです。

リンク元とリンク先のアンカー名を同じにして、
表示部分を入力です。
この場合もリンク先の表示部分は省略した方がいいかな。

アンカー名を見出しにすれば、ページ内リンクの時と同様に
そのページの見出しにジャンプします。
もちろんページ内リンクの時と同じように、
画像をクリックして別ページの特定の場所にジャンプさせることもできますよ。

<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>
こんな感じです。


まとめ

別ページの特定の場所にリンク。

使い方は難しいですが普通のリンクとは違って
特定の場所を表示できるので、記事の最後に関連記事の
読んでほしいところに使うといいかもしれませんね。