簡単にページ内リンクができるプラグイン「Easy Smooth Scroll Links」がスゴイ！

WordPressってデフォルトでは記事書くツールが乏しくないですか？「太字」とか「中央揃え」とかの基本的な機能しかないんですよね。

それだと思いどおりの記事が書けません。

今回紹介するページ内リンクについてもデフォルトでは備わっていない機能です。

ですがブログ記事では必須のアイテムと言えます。

ページ内リンクは記事が長くなる時に目次に使うことができるのでめちゃくちゃ便利です。ユーザーにも優しいですね。

ここでは簡単にページ内リンクを作れるWordPressプラグイン「Easy Smooth Scroll Links」を紹介していきます。

やり方は分かってしまえばすごく簡単なのですが最初はちょっと使い方が分かりづらいです。

ここで詳しくやり方を書いておきますのでぜひ参考にしてください。

目次

1. 「Easy Smooth Scroll Links」をインストール
2. 設定
3. 「Easy Smooth Scroll Links」の使い方
   • 3-1．アンカーリンクを設定する
   • 3-2．テキストを編集する
4. まとめ

１．「Easy Smooth Scroll Links」をインストール

まずは「Easy Smooth Scroll Links」プラグインをインストールしましょう。

プラグインのインストールはWordPressダッシュボードの左のメニューバーから「プラグイン→新規追加」を選んで検索するか、ここからダウンロードしてFTPやプラグイン追加画面でアップロードしてお使いください。

インストールが完了したらプラグインを有効化しましょう。

２．設定

「Easy Smooth Scroll Links」の設定はWordPressダッシュボードのメニューバーから「設定→ESSL Settings」を選んでください。

設定画面はこのようになっています。

設定は特に何もいじらなくても問題ありません。

使い方に慣れてからいろいろと試してみると良いでしょう。

３．「Easy Smooth Scroll Links」の使い方

ではここから記事を書く時にどう使えば良いのかを紹介していきます。

３−１．アンカーリンクを設定する

このプラグインを有効化したら、記事編集画面に出てくるパーツはこれです。アンカーと呼びます。

これでまずはアンカーリンクを設定します。

飛ばしたい先の行頭部分にカーソルを合わせて、このアンカーを押します。

リンク先のID名を設定します。英語が好ましいです。自分がわかるものであれば何でも構いません。

入力したら OKをクリックしましょう。

すると碇のマークが出てきますのでこれでOKです。アンカーリンクが設定されました。

３ー２．テキストを編集する

続いてはテキストを編集していきます。

画像で示している「ここリンクにする」を実際にリンクにしていきます。

まずは記事編集画面を「テキスト」に切り替えましょう。

通常の編集画面では「ビジュアル」になっているので、「テキスト」に切り替えてください。

するとHTML編集ができます。知識がなくてもやることは簡単なので真似してくださいね。

リンクにしたい文章の前後にアンカータグを記述します。

下のような形で入力してください。

<a href=”#アンカーのID名“>リンクにしたい文章</a>　

<a>〜</a>のタグはリンクを作る時のタグになります。覚えておくと良いでしょう。

注意点としてはこの２つ。

これでページ内リンクの完成です。記事編集画面を「ビジュアル」に戻してみると該当部分がリンク文字になっています。

あとは必要に応じて文字色を青色に変えるなどしてください。

プレビューでチェックしてみて、しっかりリンク先に飛ぶことを確認できたらOKです。

まとめ

参考になりましたか？

ページ内リンクはあると嬉しい機能なのでぜひ使いこなして頂ければと思います。

バンバン目次に使ってください。今回の記事でも目次に使ってみました。