ページ途中にリンクを貼る「簡単な方法」(html編集なし)

自分のサイトの同じページ内や他のページの「指定した場所」にジャンプ(リンク)させるには、htmlの編集が必要ですが、苦手な方は、html編集が不要な簡単リンク法も十分使えます!

「一般的なリンク設定法」‐ html編集あり(id+タグ)

自分のサイトの同じページ内や他のページ内(ページ途中)の「指定した場所」にジャンプ(リンク)させるには、通常は以下のようなhtmlの編集が必要になります。

※ざっくりとまとめると…
①リンク先(飛びたい場所)に「id名を指定」(”任意の半角英数文字”)する。
 例)<div id=”link01”></div>
②リンク元(リンクボタン)に「#id名」をリンクURLとして入力し、リンク先へジャンプ(リンク)させます。
 例)対象とする場所のURL欄に「#link01」と入力

この設定をすれば、任意の場所にどこでもリンクさせることができます。
ただ、htmlの編集が必要になり、初心者にはやや難しい作業になります。

「簡単なリンク設定法」‐ html編集なし(見出しの活用)

上記の仕組みを利用して、htmlの編集をせずに、簡単にリンクさせるのが「見出し」を使う方法です。
記事をを書く際に、見出しだけ設定すれば、ページ内リンクはもちろん、他のサイトやTwitterなどに、ページ途中へのリンクを簡単に貼ることができます。
その仕組みを、以下の例で説明します。

外部ページにリンクさせる場合

例えば、以下のまとめサイトへにリンクさせる場合、そのページのURLをコピーして貼り付けます。

https://first-step-rev.com/sound-of-80s-‐-80年代洋楽名曲セレクション%e3%80%80/

こんな感じで、ページトップが表示されます。

外部ページの途中にリンクさせる場合

このまとめサイト「80年代洋楽名曲セレクション13曲」 の途中にリンクさせたい、
例えば、Twitterで10曲目「Never / Heart」を紹介したい場合、
目次のその曲をクリックし、表示されたURLをコピーして貼り付けると、

https://first-step-rev.com/sound-of-80s-‐-80年代洋楽名曲セレクション%e3%80%80/#toc10

URLの末尾に #toc10 が付与され、以下のようにページ途中の10曲目が表示されます。

これは、見出し設定すれば、見出しの場所に「1 一般的な設定」の #id名 にあたるタグが自動付与されるためです。

実際、ページ内で飛ばしたい場所は、見出しが付くような場所が多いため、htmlの編集が苦手な方には、手っ取り早くて便利だと思います。

コメント

タイトルとURLをコピーしました