ページ内リンクの付け方とスルっとスクロールさせるプラグイン|Easy Smooth Scroll Links

目次


私も良く参考にさせて頂いている

Webクリエイターボックス」というブログで

目次とタイトルをページ内リンクでスクロールさせているの見て

とても分かりやすくパク、真似をさせて頂こうと思いプラグインを探しました。

この部分です↓

目次

目次

クリックすると各タイトルにスルっと移動します。

これを実装するのに必要なプラグインとページ内リンクの付け方を書いていきます。

ちなみに同じような動きになりますが

Webクリエイターボックスでこのプラグインを使用しているかは知りません。

  1. ページ内リンクの書き方
  2. プラグイン(Easy Smooth Scroll Links)のインストール方法

ページ内リンクの書き方

ページ内でリンクをし、そこに移動させるには

まずリンクの移動先にid属性を任意の名前で記述します。

次は移動先にリンクするテキスト(画像でもOK)に先程のid属性の中身exampleに

#をつけたのをリンク先としたa要素(アンカータグ)で囲みます。

これでページ内のリンクが出来るはずです。

プラグイン(Easy Smooth Scroll Links)のインストール方法

ページ内リンクだけをするとリンク先に一気に移動するので

どこに移動したか分からなくなる場合があるため使い勝手の面でも

一気に移動せずスルっと移動した方が良いと思います。

WordPressのプラグインのインストール方法はいつもと同じですが

一応解説しておきます。

まずはプラグインから「新規追加」へ

Easy Smooth Scroll Links

Easy Smooth Scroll Links

そして新規追加のページで検索窓に「Easy Smooth Scroll Links」と入力し検索をかけます。

Easy Smooth Scroll Links2

Easy Smooth Scroll Links2

検索結果に出てきたEasy Smooth Scroll Linksをインストールします。

Easy Smooth Scroll Links3

Easy Smooth Scroll Links3

最後にプラグインから「インストール済みのプラグイン」で有効化します。

有効化をしたらその後「Settings」でScroll SpeedとScrolling Animation Effectsを設定します。

Scrolling Animation Effects はデフォルトでもOKですし、

色々あるのでお気に入りがあるか試してみてください。

Scroll Speedはデフォが早いので私は700に落としました。

Easy Smooth Scroll Links4

Easy Smooth Scroll Links4

以上でページ内リンクとスルっとした移動の設定の解説は終了です!


Pocket