ワードプレスページ内リンク【スムーズスクロール】プラグインーEasy Smooth Scroll Linksのご紹介

ワードプレスページ内リンク【スムーズスクロール】プラグインーEasy Smooth Scroll Linksのご紹介

よくページ内のリンクをクリックするとスルスルッとスクロールするホームページがあると思います。

リンクをクリックして、パッと切り替わるより、スクロールした方がそのページ内のリンクだということがわかりやすく親切ですよね。

テーマによっては、もともとスクロールしてくれるものもありますが、基本WordPressの標準ではこの機能はありません。

今回ご紹介する、WordPressのプラグイン「Easy Smooth Scroll Links」をインストールすることによって、簡単にスクロール機能を使うことができます。

Easy Smooth Scroll Links のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、検索で「Easy Smooth Scroll Links」と検索しましょう。

検索後、「Easy Smooth Scroll Links」 の今すぐインストールをクリック、有効化をクリックしてください。

Easy Smooth Scroll Linksの設定

ダッシュボード左側「設定」>「Easy Smooth Scroll Links」をクリックしてください。

設定画面になりますので、

Scroll Speed ・・・ スクロールスピード(規定値900)小さい方が速い

Offset    ・・・ オフセット、スクロール完了した時の表示場所の調整(規定値20)

Scrolling Animation Effects ・・・ スクロールアニメーションの選択(規定EaseInQuint)

を設定して「Save Setting」で保存してください。

オフセットは、例えばヘッダーを上部に固定していて、アンカーリンクした先の見出しが隠れてしまうときなどに役に立ちます。ここの数値を150とか200に変えると固定ヘッダーでも丁度良いところで止まってくれます!

スクロールアニメーションの選択肢は沢山ありますが、これはイージング関数と呼ばれているもので、動きはじめがゆっくりで終わりが速いとか、動きに変化を付けられます。

こちらにイージング関数に関して詳しい情報がありましたのでご参考にしてください。

https://easings.net/ja(イージング関数チートシート)

規定値のEaseInQuintだと、最後にびゅっと速くなるので、好みの問題ですが、個人的にはeaseInOutSineあたりが良いのではないかと思います。間違っても、選択肢の最初にあるeaseInBounceはやめた方が良いかと思います…。

まとめ

ページ内リンクからアンカーまでスムーズにスクロールしてくれるプラグイン「Easy Smooth Scroll Links」のご紹介でした。

これがあると無いとでは、ユーザーに与える印象も変わってくると思うので、ページ内リンクを多用しているホームページで、テーマにこの機能が付いていない場合には、こちらのプラグイン「Easy Smooth Scroll Links」は大変おススメです。

こちらのリンクでお確かめ下さい→ ページ上部に戻る

関連記事 Related Articles