記事内リンクのスムーズなスクロール移動!WordPressプラグイン「Smooth Scroll Links」の使い方

スポンサーリンク

説明型の長い記事を書く時は、ページ内リンクによってユーザーが欲しい情報にすぐにたどりけるようにすることが、効果的なSEOですね。

image

そのページ内リンクをスムーズなスクロールにするWordPressのプラグイン「Smooth Scroll Links」の紹介です。これなら、同一ページであることがユーザーにすぐに分かり便利でね。

基礎:ページ内リンクはどうやって?

応用:リンク移動をスムーズ(スクロール)にするWordPressのプラグイン「Smooth Scroll Links」の使い方は?

ページ内リンクはどうやって?

まずサンプルのページ「FMCセールスパック」(イーモバイル)で通信費の大幅節約、モバイル通信と固定ブロードバンドが4980円/月 の記事では、以下の目次の一つをクリックすると、該当する同一記事内の説明にスムースに、流れるように、スクロール(移動)しますね。

image

初めにhtmlの基礎の復習です。ページ内リンクのコードの記述は以下の通りですね。

<a href="#xyz">ページ内リンク</a>
<h3 id="xyz">リンクの移動先</h3>
 *ここで<h3>は他のタグ<p><h2><h4><div>でもOK

上記のサンプルページでは、以下のようにコードが表示されています。


<a href="#1">「FMCセールスパック」とは?</a>
<h3 id="1">「FMCセールスパック」とは?</h3>

 

(注意:ちなみに、ブログ形式のサイトでは、個別記事を<!–more–>で区切ると、ブログのトップページに記事のリンク元、個別ページにリンク先になり、ページ内リンクではなくなることもあります。その場合、リンク元には、"#xyz"の代わりに、"http://URL#xyz"と記述すれば、トップページからのリンクでも個別記事内のリンク先にジャンプできます。しかしこの場合、以下に説明するプラグイン「Smooth Scroll Links」は利用できなくなります。)

しかし上記のやり方だけでは、リンクをクリックしても、一瞬のうちにリンク先にジャンプして、どこに飛んでいるのか分からないですね。縦に長い説明型のページ(記事)ならなおさらです。時には、ユーザーが別のページにジャンプさせられたと錯覚してしまう恐れがあります。

ページ内リンクの移動をスムーズ(スクロール)にする方法

そこで、もしページ内のリンク移動がスムーズで、あたかもスクロールしているかのようになめらかに移動するならどうでしょうか。ページ内の移動であることは確実に分かり、ページ(記事)全体を読んでもらえる可能性が高くなります。

そこで登場するのがWordPressプラグインの「Smooth Scroll Links」です。これをインストールして有効化、オプション設定すれば、簡単にページ内リンクのスムーズ化が可能です。

「Smooth Scroll Links」のインストール

では早速この便利なWordPressプラグインを導入しみます。

いつものように、自動インストール可能です。WordPressの管理画面のサイドバーの[プラグイン]から[新規追加]をクリックしてプラグインを検索します。キーワードに[Smooth Scroll Links]を記入して、検索開始。

そうすると、検索にヒットした[Smooth Scroll Links]の[いますぐインストール]をクリックします。[OK]を押してインストールに同意します。 その後プラグインを有効化します。

image

「Smooth Scroll Links」のオプション設定

インストールして有効化するだけでは、ページ内リンクのスクロールにはなりません。設定が必要です。

サイドバーの[設定]タグから、[Smooth Scroll Links]をクリックします。[Enable Smooth Scroll effect]にチェックを入れておきます。

([Add "Back to top" link at Footer"]は、ページ最下部に同一ページのトップに戻るナビゲーションを有効にするかどうかの設定です。その場合記事の最後に<a herf="#heder">Topへ戻る</a>と入れるだけです。)

image

最後に設定の保存をクリックして設定を有効化します。

これで、長い記事でも、ユーザーが読みたいところを読めるスムーズなナビゲートができるようになりました。 「Smooth Scroll Links」を始めWordPressのプラグインは本当に便利ですね。

スポンサーリンク

フォローする

関連記事