ユーザビリティを向上させるために、ページをスクロールしていくと上に戻るボタンがフェードインして現れるという仕組みを取り入れているサイトが増えてきました。
これらはいくつかのスクリプトをテンプレートに埋め込むだけで簡単に実現できるものですが、それでもある程度のリテラシーは必要になってきます。特に、テンプレートのソースをほとんどいじったことの無い人や、コンピューターにそこまで詳しくない人にとっては至難の業かもしれません。
そこで今回は、そのスクロールで上に戻るボタンを簡単に実現することができるプラグインの「Scroll Back to Top」をご紹介したいと思います
「Scroll Back to Top」のダウンロード
下記のURLからプラグインをダウンロードして、wp-content/pluginsディレクトリにアップロード後、有効化してください。
「Scroll Back to Top」の使い方
基本的にはプラグインを有効化した時点で、特に何も設定すること無く戻るボタンをサイトに表示させることができます。
また、好みに合わせていくつか細かい設定の変更も可能です。
管理画面の「設定」から「Scroll Back to Top」を選択し、プラグインの設定画面を呼び出します。
下の画面はプラグインのデフォルト設定の状態です。Statusで「Preview Mode」を選ぶと、表のサイトに表示させずにプレビューでテストをすることができます。
「Button Appearance」では、戻るボタンのサイズや色を変更することができます。「Background Color」はボタン自体の色、「Hover Color」はマウスオン時の色、「Foreground Color」は、ボタンの中の記号や文字の色を指定できます。
<「Button Location」では、ボタンの表示位置を変更することができます。初期状態は右下ですが、中央や左、そして上側にすることも可能です。
「Button Label」では、表示するボタンの種類をやサイズを選べます。ここで「Custom Text」を選んで、任意の文字を表示させることもできます。
いかがでしたか？ この「Scroll Back to Top」では、それぞれの設定も難しいところはあまりありませんので、サイトに合わせた調整も比較的楽に行えると思います。
コメント