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

ワードプレスで、「特定のページの“特定の場所”」へリンク（ページ内リンク）を貼るやり方について解説します。

動画

テキスト

【準備】

編集を補助してくれるプラグインAdvanced Editor Tools (previously TinyMCE Advanced)はインストールしておいてください。
（これめちゃめちゃ有名です。）

１．クラシックブロックで適当にページを作る

飛ばしたいところを選択⇒挿入⇒アンカー

２．IDを適当に入れる（半角英数）

するとこのように（該当箇所に）アンカーマークが表示されます。

３．あとはリンクボタンを作る

リンクURLは、
ページURLの後に「#」と書いて「２で決めたやつ」を追加します（ここでは#abc）

４．確認してみよう

↓↓↓

下がりすぎ（下にズレる）場合があるので、微調整の方法も

今回のように、見出しの場合はOKでしたが、アンカーリンクは、「該当の場所より下」が表示されることが多いです。

細かい理屈は色々あるんですが、今回、最も簡単な対処法をご紹介。

何も特別なことじゃありません。

下にズレるなら、ちょっと上にアンカーを付ければいいだけのこと！（←謎の正論！）

ということで、今回は、１つ上の部分（今回の場合「徒歩５分」）にアンカーをすると、ちょうどその下から表示されるのでオススメです。

そうすると↓↓↓

↓↓ちょうど「徒歩５分」の下から表示されたので「会社沿革」がハッキリ表示されていますね

あわせて使いたい「Easy Smooth Scroll Links」

同じページ内へのリンク（いわゆるページ内リンク）の場合、何もしないと「ワープ」してしまいます。

スムーズにスクロールさせたい場合は

Easy Smooth Scroll Links

というプラグインを使うと、スクロール（スライドして）移動してくれるようになります