ページ内内部リンクプラグインSmooth Scroll Links使い方

アフィリエイターの情報商材系のブログではあまり見ませんが、アルファブロガーなどコンテンツの多いブログには記事の最初に目次がついていることが多いですよね?

長い記事を書く場合は目次があった方が良いので、コンテンツ量が豊富でありながらページ内リンクをしていない人は、ぜひ今回の記事で「Smooth Scroll Links」を導入してみてください。


ページ内リンクの使い方


さて、それではプラグインを導入する前にまずはページ内リンクが正しく機能するようにして行きましょう。とりあえず目次の部分をクリックしたらその項目の部分に一気に飛ばすようにしたいので、HTMLコードを挿入していく必要があります。


<a href="#1">20代がアフィリエイトで独立するまでの道のり</a>

<h4 id="1">20代がアフィリエイトで独立するまでの道のり</h4>



このタグを入れるとリンクが表示され、それをクリックするとページの上か下にあるh4タグの部分まで移動していきます。つまり、長いページなどではユーザーが見たい記事を探すのに大変便利なのです。

ちなみに今回はh4タグに移動させていますが、これは別にh4でもh3でも構わないので、上記の例から少しだけいじってみてください。

例として記事の一番下に飛ばすリンクをおいておきます。テスト



ページ内移動をスムーズに行わせる方法


さて、これでページ内を移動する内部リンクの使い方は分かったわけですが、正直今のままだとユーザービリティーがあまり良くないんですよね。

実は僕の場合はSmooth Scroll Linksというプラグインを入れているのでクリック後スムーズにリンク移動出来るのですが、これが無いと新しいページを開くような感じで移動するので、ユーザーからすると「違うページに飛ばされてしまった」という錯覚を起こします。

急に違うページに飛ばされてしまうと戻ろうとするのが当たり前なので、そのまま「戻る」を押されてページからアウトされてしまったら勿体なさ過ぎます。また、Smooth Scroll Linksが入っていないと、移動した際に移動部分の見出しの下から表示されるので、どこに飛ばされたのか非常に分かりづらいんですよね。


そこでSmooth Scroll Linksを導入しましょう。プラグインをインストールして、有効化します。





あとはダッシュボードの「設定」から「Smooth Scroll Links [SSL」をクリックして設定画面に移動しましょう。最後は「Enable Smooth Scroll effect:」という項目にチェックを入れて終了です。







テスト


テストリンクをクリックするとスムーズにページ内移動してきましたね?では、今まで読んでいた部分に戻って引き続きページ内リンクの方法を見て行きましょう。





コメントを残す