ブログ記事の中で内リンクは使っていますか。
ここをクリックするとあそこの文章へ移動するみたいなものです。
目次の個別のようなものになりますよ。
この内リンクからアンカーへの移動ですが
みなさんのブログではどのような感じで移動しますか。
クリックするとパッと変わりませんか。
一瞬なので早いのですが
スクロールで滑らかに移動するととても気持ちがいいものですよ。
そこで内リンクの移動をスムーズにできる
プラグイン「Easy Smooth Scroll Links」の紹介です。
スクロール速度も決めれるので使いやすいですよ。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。
Easy Smooth Scroll Linksとは
WordPressで作成したブログの
内リンクからアンカーまでの移動を滑らかにするプラグインです。
難しい設定もなくスクロール速度、
オフセット(アンカーと画面フレームとの距離)を
選ぶだけなのですぐに設定が終わります。
機能自体は自動なので使いやすいです。
プラグインEasy Smooth Scroll Linksのインストール
それでは進めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。
プラグインを追加のページが表示されたら
キーワード検索欄に「Easy Smooth Scroll Links」と入力しましょう。
検索結果は、自動で反映されます。
Easy Smooth Scroll Linksを見付けたら
「今すぐインストール」をクリックします。
*稀に下の方や右側、または違うページにある場合があります。
インストールが終わると「有効化」をクリックしましょう。
有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。
これでEasy Smooth Scroll Linksのインストールは終わりです。
Easy Smooth Scroll Linksの初期設定
ここでは内リンクからスムーズに移動するための
初期設定を行っていきます。
ダッシュボードから
「設定」→「Easy Smooth Scroll Links」をクリックしましょう。
Easy Smooth Scroll Links Settingページが開きます。
ここで設定をしていきますが
実際に触るところは少しなのですぐに終わりますよ。
Scroll Speed:スクロールの速度になります。
ここではデフォルトの「900」にしています。
Offset:オフセット(アンカーと画面フレームとの距離)になります。
ここもデフォルトの「20」にしています。
Scrolling Animation Effects: スクロールのパターンを選びます。
ここでは「easeInBounce」にしています。
デフォルトはeaseInQuintです。
続いての設定ですが
基本的にここの2か所は設定は要りませんので
紹介だけにしておきます。
Exclude Anchors Beginning With: 開始部分の一致でアンカーを除外します。
何もしなくて普通に使用できます。
Exclude Anchors Exactly Match: 完全一致でアンカー除外します。
何もしなくて普通に使用できます。
Enable Scrolling from One Page to Another ?: ページから別のページにスクロール有効にします。
他のプラグインとの相性の問題でチェック入れません。
最後に「Save Settings」をクリックしましょう。
これで初期設定が終わったので
自動的に内リンクからアンカーまでのスクロールが
滑らかになっていますよ。
特に機能が増えるプラグインではありませんが
使った印象はとてもよくなります。
リンクで動くモーションが静止画像だと表現できないので
使用画像は割愛させていただきます。
これでEasy Smooth Scroll Linksの紹介は終わりです。
少し関連記事と違いますが
内リンクではなくページの下部から上部へ戻るボタンの設置があります。
このプラグインと同じでスムーズにタイトルへ移動しますよ。
興味のある方はここより参考にしてみてください。
まとめ
内リンクからアンカーまで滑らかに移動させるプラグインでした。
このアクションはあるとないとで感じが変わりますよね。
やはりカクっと動くよりヌルヌルがいいですよ。
ただこのプラグインをインストールする前の確認ですが
自分が使っているてテーマに標準装備されている場合があります。
その場合は意味がないので必要ありませんよ。
ブログ運営・アフィリエイトを応援しています。
ブログ内の記事でブログ作成~アフィリエイトまでの
全工程の説明が画像付きで含まれていますので参考にしてみてください。