ユーザビリティ向上 Dynamic To Topプラグイン記事更新日2012年11月24日

今回ご紹介するプラグインは、「Dynamic To Top Settings」です。

長いページの下の方へ進んだときに、ページトップへ簡単に戻れるようにするアンカー機能を追加します。
サイトのユーザビリティの観点でも、必須の機能です。

pagetopキャプチャ01

このプラグインを使用すれば、簡単に「ページトップ」ぼたんを実装できます。
また、表示する場所、ボタンの色、サイズ、戻る時の動き方まで 細かく設定可能で、ページイメージに合わせてビジュアルにこだわりたい方も納得です。

設定方法は、

(1)下記URLからプラグインを入手

http://wordpress.org/extend/plugins/dynamic-to-top/

(2)プラグインに追加すると「外観」に「To Top」タブが追加されます。

(3)お好みの「トップへ戻る」ボタンを作成します。
▼Behavior設定

1)Scroll time:スクロールアップする時間設定。
2)Fade-in distance:どれくらい下にスクロールするとボタンが現れるか。ピクセル数で設定。
3)Easing:ボタンをクリックした時のページの戻り方の設定。
4)Position:ボタンをどこに表示させるか。
5)Prevent on mobile:モバイルサイトで表示させたくないときは【Yes】。

▼Appearance設定

6)Text version:「トップに戻る」などテキストを表示させたいときは【Yes】にチェック。
7)Button text:「トップに戻る」など表示させたいテキストを入力する。
8)Top/bottom padding:ボタンの縦幅の設定。
9)Sides padding:ボタンの横幅の設定。
10)Font size:フォントサイズの設定。
11)Text color:テキストの色の設定。
12)Bold Text:テキストを太字にする設定。太字は【Yes】にチェック。
13)Text shadow:テキストに影を付ける設定。影をつける時は【Yes】にチェック。
14)Text shadow color:影の色の設定。
15)Background color:ボタンの色の設定。
16)Border color:ボタンのボーダー色の設定。
17)Border width:ボタンのボーダー幅の設定。
18)Border radius:ボタンの角丸の設定。
19)Inset highlighting:ボタンのハイライト設定。

完成したら、「Save Changes」で保存します。

自分好みにカスタマイズして、楽しんでみてください。