ページ内リンク：好きなところへ”ジャ～ンプ”

〇別のページに”ジャ～ンプ”方法はこちら

ブログをやっていて
「同じページ内の【ある場所】から【別の場所】に直接ジャンプしたいな」
などと感じたことがあると思います。
例えば下の【ジャ～～～ンプ】をクリックすると
【飛んできたよ～～～】まで移動します。

【ジャ～～～ンプ】

このようにページ内で移動をしたいわけです。
では、どうすればいいか･･･

①移動する出発点と移動先に記述をする。
②移動先位置がずれる場合（思った位置に移動しない）の対処

①移動する出発点と移動先に記述をする。

例えば
上の【ジャ～～～ンプ】が出発点
下の【飛んできたよ～～～】が移動先です。

最初に【飛んできたよ～～～】のところに
「ここへ来てね」という指示を書きます。

現在（2020年7月）のWordPressのブロックに文字を書くと上のようになります。
右上の「3点」をクリックし、
「HTMLとして編集」をクリックします。

すると、表示が下のようになるのでそこに文字を追加します。

<ｐ><div id=”〇〇〇”>【飛んできたよ～～～】</div></p>

赤文字を追加するのですが、「〇〇〇」は自分がわかるもの、
例えば「jump」とか半角文字で書きます。
（注）上記の赤文字をコピペするとうまく動かないかもしれません。その時は半角で書き直してください。
追加する場所は、指定する文字の前後　です。
すると、下のような感じになります。
「プレ」となっている所をクリックすると
普通のブロックの表示になります。
このままHTML表示でも問題はありません。
ページのプレビューをクリックして確認するといいでしょう。

次に出発点【ジャ～～～ンプ】にリンクを設定します。

ブロックの上側の「鎖のようなところ（リンク）」をクリックして、
【#jump】と書き、
赤枠部の「internal」をクリックします。
【#jump】は移動先に設定した文字です。
これでページ内リンクが完成です。
ページをプレビューして確認してください。
作成ページでは確認できません。

もし、「動かない！！！」場合
①移動先に指定した文字「〇〇〇」と出発点のリンク文字が同じかどうか確認。
移動先の文字の綴りが合っているかどうか確認。

「まだ動かない！！！」場合
②-1 移動先に記述した文字位置
（例：【飛んできたよ～～～】の直前・直後に記述されているか確認。
②-2 移動先に記述した文字を再度半角で書き直してみる。
（コピペした場合、意外と「”」が全角だったりします。なぜそうなるかは不明）
それ以外は一度メールをください。
自分の経験上、上記を見直すと動きました。

②移動先位置がずれる場合（思った位置に移動しない）の対処

対処方法はいくつかあります。
〇プラグインを利用する。
〇 jQueryなどを追加する。
〇テーマによっては「設定」で変更できる。など

今回は一番一般的で簡単にできるプラグインを利用します。
2020年にWordPressが大型バージョンアップをやってから、投稿作成が「ブロック」という区切りで行われるようになりました。
これはこれでとても便利なのですが、HTMLの記述などがうまくいかないときがあります。
作成ページの右上の「3点」のところにも「コードエディター」がありますが、そこを触ってもスムーズに反応してくれないことがあります。
（私の勉強不足も多いにあるのですが…）

そうなってくると頼みの綱は「プラグイン」となってしまう訳ですが…
プラグイン否定派の方にはお勧めできません。

今回使用するのは
Easy Smooth Scroll Links-Smooth Scrolling Anchor
というプラグインです。