【WordPress】ページの中の「特定の場所」にリンクする方法~アンカー~

ワードプレスで、「特定のページの“特定の場所”」へリンク(ページ内リンク)を貼るやり方について解説します。
動画
テキスト
【準備】
編集を補助してくれるプラグインAdvanced Editor Tools (previously TinyMCE Advanced)はインストールしておいてください。
(これめちゃめちゃ有名です。)
1.クラシックブロックで適当にページを作る
飛ばしたいところを選択⇒挿入⇒アンカー
2.IDを適当に入れる(半角英数)
するとこのように(該当箇所に)アンカーマークが表示されます。
3.あとはリンクボタンを作る
リンクURLは、
ページURLの後に「#」と書いて「2で決めたやつ」を追加します(ここでは#abc)
4.確認してみよう
↓↓↓
下がりすぎ(下にズレる)場合があるので、微調整の方法も
今回のように、見出しの場合はOKでしたが、アンカーリンクは、「該当の場所より下」が表示されることが多いです。
細かい理屈は色々あるんですが、今回、最も簡単な対処法をご紹介。
何も特別なことじゃありません。
下にズレるなら、ちょっと上にアンカーを付ければいいだけのこと!(←謎の正論!)
ということで、今回は、1つ上の部分(今回の場合「徒歩5分」)にアンカーをすると、ちょうどその下から表示されるのでオススメです。
そうすると↓↓↓
↓↓ちょうど「徒歩5分」の下から表示されたので「会社沿革」がハッキリ表示されていますね
あわせて使いたい「Easy Smooth Scroll Links」
同じページ内へのリンク(いわゆるページ内リンク)の場合、何もしないと「ワープ」してしまいます。
スムーズにスクロールさせたい場合は
Easy Smooth Scroll Links
というプラグインを使うと、スクロール(スライドして)移動してくれるようになります