「ページ内リンクの作り方」検索すればドッサリ見つかりますが、どうもスッキリ頭に入らないので(自分なりに理解しやすいやり方)をまとめました。
検索して見つけたサルカワさんのページ。
⇒ 記事の途中に飛ばすには
ここで説明されているように、次の①→②の順に設定する説明になっています。
② 飛び出す位置(飛ぶボタン=ジャン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の部分にとぶ
これさえ覚えときゃ良いのです。
目次から文章中の見出しにリンクを張る
同じページ内でリンクを張るときは「見出し」を並べた目次を作るケースが多いですよね。この時の作業は、目次に並べた「見出し」から、文章のなかの「見出し」部分にリンクを張ります。ジャンプボタン(リンクテキスト)の設定は同じですが、飛び先(アンカーテキスト)の設定が少し違います。
作業は
- 目次に並んだ「見出し」にジャンプボタン(リンクテキスト)を#付きid名で設定。
- 飛び先(アンカーテキスト)の文章中の「見出し」に#付き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プラグイン