WordPressでページ内ジャンプを簡単に設定できるプラグイン「Easy Smooth Scroll Links」の使い方

ブログを書いていて記事が長くなってしまったときなどに、同じページ内の特定の場所にクリックするだけでジャンプ出来たら便利ですよね。

難しそうと思って避けていましたが、サイトマップを作成している時にどうしても使いたくて調べているとWordPressのプラグインで出来ると知り早速挑戦してみました！

最終的にはできたのですが、少々つまずきAi MEMOのあいかさんにもやり方を質問してしまうなど迷惑をかけてしまったので自分用の備忘録も兼ねてページ内ジャンプの方法をまとめてみました。

[sanko href=”https://aika-notebook.com/” title=”名古屋在住ゆるふわブロガーあいかさんのブログ” site=”Ai MEMO”]

WordPressでページ内ジャンプをする方法

まずページ内ジャンプとはこんな感じです。こちらをクリックで着地までジャンプする！

着地！

このように指定した場所をクリックするだけで、スクロールすることなく目的にたどり着くことが出来て非常に便利です。

難しい知識がなくても、WordPressならプラグインを使って簡単に設定することが出来ます。

[alert title=”注意”]2017.11.25追記　当ブログはSANGOを使っていますが、このプラグインを有効化していると追尾ウィジェットが追尾されなくなってしまいます。ただしアンカー等設定した後にプラグインを停止させても、ページ内ジャンプは有効です。[/alert]

①Easy Smooth Scroll Linksをインストール

プラグイン→新規追加からEasy Smooth Scroll Linksを検索してインストール→有効化します。
スクロールスピードの設定など詳細な設定もできますが、特に設定をいじらなくても普通に使うことができますので今回はそのまま使っていきます。

②アンカーを設定する

Easy Smooth Scroll Linksを有効化すると記事編集画面にリボンのようなマークが登場します。

下段の１番右下←このマークです。
まずはジャンプしたい場所にこのマークで印をつける作業を行います。先程の例だと

ジャンプさせたい所にカーソルを合わせ、そのままアンカーボタンを押します。アンカーボタンを押すと名称（ID）を設定する画面になりますのでIDを設定していきます。[alert title=”注意”]このIDはジャンプ元の設定でまた使いますので、分かりやすいものにしておくのが良いです。IDはなんでも良いですが半角英数字でつけます。[/alert]

今回は仮にaaaとしておきます。

③ジャンプ元の設定

次に今アンカーを設置した場所に飛ばす、文字や画像にアンカーリンクを設定していきます。[box class=”box29″ title=”アンカーリンクのHTML”]<a href=”#アンカー名“>文字や画像</a>[/box]

ビジュアルモードからテキストモードに切り替えて、アンカーリンクを設置したい文字や画像をアンカーリンクで囲っていきます。今回の例で言うと「こちらをクリックで着地までジャンプする！」という文字にアンカーリンクを設置したいので

でOKです。

画像に設定したい場合は

• 記事に画像を挿入
• 画像をクリックしてビジュアルディターのリンクの挿入/編集ボタンを押す
• #＋設定したアンカーを入力

こんな感じです。画像にアンカーリンクを設定する場合はビジュアルエディターから行ったほうが楽で早いのでオススメです。

Easy Smooth Scroll Linksを使用して作ったサイトマップ

[kanren id=”3039″]

画像をクリックすると各カテゴリに飛びますので、こちらもぜひ参考にしてみてくださいね(・∀・)