アンカー｜別ページの特定場所へGO

ポチポチ記事を書いてるうちは良かったけど、同じ事を書くにはいささか面倒に思われてきた。別ページの特定個所にジャンプする「アンカー」というタグが有ったのを思いだした。表作成のために入れたプラグイン「TinyMCE Advanced」に、「アンカー」作成の機能もあった。これは楽で良い。一応はノートに書いたが、70歳近くになるとノート自体を置き忘れてしまう。なので、これも記録しておこう。

普通のHTMLのタグ書きでは

基本的には普通のHP作成で、同じページ内へのジャンプと同じです。
以下が基本です。分かりやすくて勉強になります。

1時間で作るホームページ「ページ内ジャンプ」

では、

「伊香保温泉｜日本初の計画的温泉場」このページ内の伊香保温泉「白銀の湯」について、の部分から。
【https://ookawa.info/2019/01/06/ikaho/】

こちらの「温泉の定義」の中の「白銀の湯」の部分に飛ばしたいとする。
【https://ookawa.info/2018/11/01/what-onsen/】

ジャンプ先の位置に「テキスト」で書き込む。
<a id=”i-1″></a>
【i-1】は半角英数字ならば、何でも良い。同じページ内で、同じ物は使えない。

<a href=”#i-1″>温泉の定義</a>
これは同じページに飛ぶ場合。

<a href=”https://ookawa.info/2018/11/01/what-onsen#i-1″ >温泉の定義</a>
または
<a href=”https://ookawa.info/2018/11/01/what-onsen#i-1″ target=”_blank” rel=”noopener”>温泉の定義</a>

上記が別ページに飛ぶ場合。同じページに飛ぶ場合と同じで、【#i-1】の前に飛び先のURLを入れる。

これって、かなり書くのが面倒。
で･･･「TinyMCE Advanced」プラグインを使う事にする。

TinyMCE Advancedでアンカーを使う

アンカーを着けたい部分、文章の最初の部分とかのジャンプ先を選び、「TinyMCE Advanced」のリボンマークをクリックで、アンカーIDを記入するウインドウが開きます。自分の場合は「挿入」プルダウンメニューの中にあります。

IDは何でも良いので、適当に。例えば「iｰ1」とか。すると
<a id=”i-1″></a>
が追加されています。

ジャンプする元は、ページリンク「リンクの挿入/編集」で、「#iｰ1」を書き足すと出来ます。

最初に上手く移動できずに悩みました。「#」の前に「/」があり、これが有るとリンク先のページが開くばかりで、特定の場所に行きませんでした。ページリンク「リンクの挿入/編集」では、「/」が自動で書かれていました。

<a href=”https://ookawa.info/2018/11/01/what-onsen#i-1″ target=”_blank” rel=”noopener”>

これでOK。