Easy Smooth Scroll Linksの使い方と設定

ページ内ジャンプやスムーズスクロール等にスクロールアニメーション効果を追加できる WordPress 用プラグインの紹介です。
それは「Easy Smooth Scroll Links」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Easy Smooth Scroll Links

Easy Smooth Scroll Links - WordPress.org

Easy Smooth Scroll Links は、ページ内ジャンプやスムーズスクロール等にスクロールアニメーション効果を追加できます。
Easy Smooth Scroll Links の主な機能は、以下の通りです。

  • スクロール速度とオフセット値を設定可
  • スクロールアニメーション効果を 30 種類から選択可
  • 特定のアンカーをスクロールから除外可
  • 全ての主要ブラウザで動作可
  • ビジュアルエディターに専用ボタン追加

記事を作成もしくは更新時点でのバージョン:2.2

Gutenberg エディターでの動作

Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。

Gutenbergでのショートコードの挿入手順

このプラグインは、ショートコードを使用します。
挿入手順については、下記の記事にて詳しく解説していますので、御覧ください。

Gutenberg でのショートコードの挿入手順 – WordPress活用術

インストール手順

Easy Smooth Scroll Links をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Easy Smooth Scroll Links – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Easy Smooth Scroll Links」と入力します。

WordPressプラグイン「Easy Smooth Scroll Links」の導入から日本語化・使い方と設定項目を解説している画像

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Easy Smooth Scroll Links を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「Easy Smooth Scroll Links」の導入から日本語化・使い方と設定項目を解説している画像

管理画面の「設定」メニューの中に追加されています。

使い方

アンカー名の代わりに id 属性を使用します。

href には、ページ内リンクの場合には #アンカー名を指定します。
別ページへのジャンプの際には、URL の最後に#アンカー名を指定します。

Easy Smooth Scroll Links の詳しい使い方は、以下の URL を参照してください。

Easy Smooth Scroll Links の使い方 – 作者公式サイト

設定

WordPressプラグイン「Easy Smooth Scroll Links」の導入から日本語化・使い方と設定項目を解説している画像

  • Scroll Speed
    スクロール速度を設定します。
    初期値:900 ミリ秒
  • Offset
    オフセット値を設定します。
    初期値:20
  • Scrolling Animation Effects
    アニメーション効果を選択します。

WordPressプラグイン「Easy Smooth Scroll Links」の導入から日本語化・使い方と設定項目を解説している画像

  • Exclude Anchors Beginning With
    ここで指定した名称を先頭に含むアンカーを対象から除外します。(デフォルトは#tab #quicktab #pane)。
  • Exclude Anchors Exactly Match
    ここで指定した名称と完全に一致するアンカーを対象から除外します。

WordPressプラグイン「Easy Smooth Scroll Links」の導入から日本語化・使い方と設定項目を解説している画像

  • Enable Scrolling from One Page to Another
    あるページから別のページへのスクロールを有効にするかどうか。

URL

Easy Smooth Scroll Links – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています