AFFINGER5

★ 【AFFINGER5】[トップへ戻る] ボタンを作る!スクロールしながらページのトップに戻る方法!





AFFINGER5 ではページの右下に「トップへ戻る」ボタン(丸いアイコン)が標準実装されていますが、それとは別にページ下に「トップへ戻る」ボタンを配置して、押下時にスクロールしながらページ最上部へ戻る機能の実装方法を紹介します。


AFFINGER5 は、サイト作成、SEO 対策などの機能が豊富であり、カスタマイズ方法が簡単であることから、初心者から上級者までをカバーして、かっこいい(かわいい)サイト作成ができ、サイト作成にも絶大な威力は発揮する WordPress の代表的なテーマです。


AFFINGER5 ご購入はこちら


[トップへ戻る] ボタンの実装イメージ


[トップへ戻る] ボタン


本記事で紹介する [トップへ戻る] ボタンです。



ページ下部にボタンを配置し、クリックでページが上にスクロールして、ページの上部に戻ります。


ポイント

文量が多い記事などの場合に、記事を読み直したい、見直したいユーザなどの操作利便性(ユーザビリティ)を向上します。

また、記事を読み終えたユーザが [トップへ戻る] ボタンを意識することでクリックにつなげて、サイト上部のヘッダーカードに導線を繋げ、ユーザのサイトからの離脱を防ぐ効果に期待します(Bounce Rate の改善効果を期待します)。


AFFINGER5 の標準の [トップへ戻る] アイコン


AFFINGER5 は標準でページの右下に [トップへ戻る] アイコンを実装しています。



ページを少し下にスクロールすると右下に丸いアイコンを表示して、クリックすると、(比較的ゆっくり)ページの上部に戻ります。

記事を読んでいる途中に先頭に戻りたいときに便利ですが、ちょっと目立ちにくい(気が付かない)。


[トップに戻る] ボタンの両方を併用するのが、両方のメリットを活かし、デメリットを保管していてよい方法だと思います。


★ 【AFFINGER5】「トップに戻る」(TOPに戻る)ボタンの色を変える方法!

AFFINGER5 では初期設定で「トップに戻るボタン」がページの右下に表示されています。この「トップに戻るボタン」の色の変え方、形の変え方など、カスタマイズ方法を紹介します。

続きを見る


[トップに戻る] ボタンの実装方法


今回は、AFFINGER5 の機能を最大限に活かして、すべてのページの下部にボタンを設置する方法として紹介します。

※ [STINGERタグ管理プラグイン] を利用します。


step
1
ボタンの画像を用意する


[トップに戻る] ボタンの画像を用意します。自分で作るか、フリーや有料のサイトから用意します。


(クリックすると実際に動作します)


※ 上記の画像の流用はお控えくださいますようお願いします(著作権は当サイトが所有しています)


step
2
フッター用の STINGER タブを用意する



WordPress の管理画面から [STINGERタグ] を新規作成して、任意の名前を付けてください。(ページフッターがわかる名前にするとよいです)


★ 【AFFINGER5】便利すぎる![STINGER タグ管理] でコードを集約管理!一括変換で効率良すぎ!

よく使うコード(記事の最後の定型文)や、よく貼り付ける広告をタグ化しておくことで、コードを一か所で管理できます。変更するときに一か所変えるだけで全部に反映する 「STINGER タグ管理機能」を紹介します。もはやこの機能のためにアフィンガーを買ったと言っても過言では無い凄い機能です。ぜひご覧ください。

続きを見る


step
3
画像とコードを入力する



STINGER タグの本文にテキスト形式で次のコードを埋め込みます。


イメージを表示するコード例です

<figure class="wp-block-image size-large">
    <p id="my_pagetop">
        <a href="#">
            <img class="xxxxxx" src="(トップへ戻るのイメージのURL)" alt="" />
        </a>
    </p>
</figure>


[(トップへ戻るのイメージのURL)] は、イメージのURLに置き換えてください。

※ WordPress の編集方法(通常の方法)でイメージを貼りつけても良いですが、<p id="my_pagetop"> ~ </p> でリンクと画像をくくることが必要です。


■ クリックでスクロールさせるコード例です

<script>
$('#my_pagetop').click(
    function () {
        $('body,html').animate({scrollTop: 0}, 'normal');
        return false;
    }
);
</script>


■ 保存します


コードを入力して STINGER タグを保存します。

この際、「閲覧できません ( Forbidden access )」と表示されて保存できない場合があります。その場合は、以下の記事を参照してください。


【WordPress】「閲覧できません ( Forbidden access )」と表示されて保存できない場合の対処方法

WordPress で(主にコンテンツにスクリプトを書いて)保存した場合に、「閲覧できません」と表示されて保存ができない場合の原因と対処方法を簡単に説明します。

続きを見る


step
4
各記事の最後に作成した STINGERタグを設置する


各投稿記事の最後に作成した STINGERタグを貼り付けます。

STINGERタグにしておくことで、コードを一括して管理することができるため、変更したい場合(画像を変えたい、スクロールのスピードを変えたいなど)、タグの内容を変更することで前ページに変更を反映することができます。


完成です!


まとめ


AFFINGER5 を有効活用して、[トップに戻る] ボタンを実装する方法です。



  • AFFINGER5 の標準の [トップに戻る] と、本記事の [トップに戻る] の併用が有用です
  • [トップに戻る] ボタンは離脱率(直帰率、Bounce Rate )の改善を期待できます
  • [トップに戻る] ボタンは STINGER タグと組み合わせることで前ページを一括して管理できて便利です


[トップに戻る] ボタンは有用ですので、ぜひ、実装してみてください。







Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ