HTMLタグでページ内リンク、指定位置に飛ばすやり方

「ページ内リンクの作り方」検索すればドッサリ見つかりますが、どうもスッキリ頭に入らないので(自分なりに理解しやすいやり方)をまとめました。

 

検索して見つけたサルカワさんのページ。
         ⇒ 記事の途中に飛ばすには

ここで説明されているように、次の①→②の順に設定する説明になっています。

① 目的地となる「飛び先」を決めてから
② 飛び出す位置(飛ぶボタン=ジャン2 プボタン=#付きid)をきめる。

これは始めにidをきめて、次ぎにそのidに#を付け加える、という説明になっているからです。
「#付き」から「#を外す」よりも、「●●」に「#を足す」という順番の方がすんなり頭に入るだろう、という配慮だと思います。

おば半はどうしてもこれだと混乱するので、この逆の順にやります。
まず設定するのは、リンク先に飛ぶ(クリックする)文字列ではなく、飛び先、目的地(アンカー)を設定します。
その後にクリックする文字列を決めます。

#idを決めて、次ぎにその#を外したidを設定する。

読むときは、リンク設定した文字列をクリックして → アンカー設定した飛び先に行くのだけど、記事作成の段階の作業は逆の順にやる説明になっているから混乱する。(私だけ!? 笑)
どっちが先でも同じなんだろうけど、クリックすると→飛ぶ という行動の流れが頭にあるから、設定する順番も同じ流れでやった方が混乱しない、と思うのです。

 

1. ジャンプボタン(リンクテキスト)を作る 

*ジャンプボタン! ←サルカワさんの命名です。
わかりやすいですね。
「これ、クリックしたら飛ぶよ、ジャンプするよ~。」っていうボタン。

ジャンプボタン(リンクテキスト)は通常のリンク
 <a href="リンク先URL">テキスト</a>
と同じようにaタグで作りますが、同じURLなので、URLのかわりに#id名にします。
id名は任意の英数文字です。任意の英数字の前に#をつけます。
ここで#をつけるのがポイントです。

<a href="#id名">テキスト</a>

たとえば「この詳細は実例2で説明します。」という文章で、「実例2」へのリンクを作るとします。
文章のなかの下線部分「実例2」をジャンプボタン(リンクテキスト)にします。

<a href="#abc">実例2</a>

abc がid名です。任意の英数文字。これに#をつけます。#abc

 

2. 飛びたい位置(アンカー)にidを設定する

飛びたい!行き先部分にid名をつけます。飛び先(アンカー)つまり「クリックして到達する場所」「着地点」になる部分です。

上の例の続きですと、「実例2」というテキスト部分に着地するように設定します。
<a id="id名">実例2</a> 

id名を abc にして、#abc としていましたから、ここの#を外したabcをいれます。<a id="abc">実例2</a> 

 

#idの部分から → #なしのidの部分にとぶ

これさえ覚えときゃ良いのです。

 

目次から文章中の見出しにリンクを張る

同じページ内でリンクを張るときは「見出し」を並べた目次を作るケースが多いですよね。この時の作業は、目次に並べた「見出し」から、文章のなかの「見出し」部分にリンクを張ります。ジャンプボタン(リンクテキスト)の設定は同じですが、飛び先(アンカーテキスト)の設定が少し違います。

作業は

  1. 目次に並んだ「見出し」にジャンプボタン(リンクテキスト)を#付きid名で設定。
  2. 飛び先(アンカーテキスト)の文章中の「見出し」に#付きid名の#を外したid名を設定します。
    見出しは見出しの属性(h2などのタグ)ではさまれていますよね。この部分にid名を加えます。

目次から文章中の見出し「実例2」に飛ぶ場合ですと、
「実例2」という見出しは<h2></h2>ではさまれています。
<h2 >実例2</h2>

ここにidのabcを足します。
<h2 id="abc">実例2</h2>

 

 

3 違うページの特定の場所に飛ぶ

違うページの途中にジャンプしたいときは、ジャンプボタン(リンクテキスト)を次のように指定します。

① ページのURL#id名 

同じページの場合は#id名 だけでしたが、この場合はページ(=URL)が違うので、id名の前に飛びたいページのURLを加えます。
違うページ(https://kriws.comとします)の「ナスの栄養」という場所に飛びしたい場合
例:<a href="https://kriws.com#abc">ナスの栄養</a> となります。

<a href="URL#id">リンクテキスト</a>

 

この時、別ウィンドウで開くなら、id"の後ろに target="_blank" をくっつけます。<a href="URL#id"target="_blank">文字列</a>

 

② 飛びたいページの飛びたい文字列にidを設定します。
ジャンプしたいページの飛び先になる文字列に#を外したid名をつけます。
例:<a id="id名">ナスの栄養</a> 

<a id="id名">アンカーテキスト</a> 

 

《補足》リンク先がズレるケース

何度か試しましたが、リンク先にピッタリと飛びません。
検索すると、これはCSSのレイアウトの関係のようです。

自分のスキルではここまでなので、何行ズレるかあらかじめ考慮して、その分ズレた位置に飛び先(アンカーテキスト)を設定することで誤魔化しています。(๑•́ ₃ •̀๑)
この記事で混乱していました。読むと混乱するので読まない方が良いかもです。(>_<) 
TinyMCE Advancedでページ内リンクとアンカーの設定方法|Wpプラグイン

おすすめの記事