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

動画

テキスト

【準備】

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

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

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

2.IDを適当に入れる(半角英数)

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

3.あとはリンクボタンを作る

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

4.確認してみよう

↓↓↓

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

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

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

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

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

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

そうすると↓↓↓

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

 

スムーズスクロールを追加しよう(追加CSSに追記)

リンク設定だけだと、ワープしたみたいに瞬間移動で飛んでしまいます。

「スー」っと移動してくれると見え方も綺麗です。以前はプラグインがありましたが、追加CSSに以下を追記するだけでOKです。

html {
  scroll-behavior: smooth;
}

以下は古い情報(プラグインが更新止まってる)

↓↓↓

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

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

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

Easy Smooth Scroll Links

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

    コメントを残す