トップへ戻るボタンを設置できるプラグイン【Dynamic To Top】

sponsored link

最近は多くのサイトが採用している「トップ」へ戻るボタン。ボタンをクリックすると、スッーとスクロールして自動で最上部まで移動してくれるあれです。

トップへ戻る際にスクロールせずに簡単に戻ることができるので、ユーザビリティに配慮したサイト設計に役立ちます。

縦に間延びしがちなサイトでは特に入れておきたいプラグインです。

特長

  • 設置位置や動作を細かく設定できる
  • デザインのカスタマイズが詳細までできる
  • 設定が視覚的に確認できるのでわかり易い

類似のプラグインは山ほどあるのですが、使い方としては単純なプラグインのため、何を使っても最低限の目的は果たせます。

昔は他のプラグインを使用していたのですが、マルチサイトでうまく動作してくれなかったりして代替を探していたところ、頭一つ抜けた【Dynamic To Top】を発見。

このプラグインの長所は設定を詳細にできるところです。他のプラグインではボタンの位置を選んだりできない物もありますが、これはかゆいところに手が届きます。

どうせボタン一つつけるだけなのだから余計な設定がないシンプルな方が使いやすいという考えもあるのですが、このプラグインはデザインの変化を視覚的に確認しながら設定できるので自分好みにカスタマイズできます。

ボタン一つでもサイトの印象は変りますので、デザインに凝ったサイトを作りたい場合には特にお勧めです。

インストールと使い方

WordPressの管理画面から、「プラグイン」>「新規追加」>「検索」で【Dynamic To Top】を検索してプラグインをインストールします。

概観」に「TO TOP」の項目が追加されていますので、そこから設定が行えます。

詳細設定

動作設定

to_top_behavior

項目 説明
Scroll time トップへ戻るまでの時間(スクロールアップ)設定
Fade-in distance トップからボタンが現れるまでの距離
Easing スクロールの動作
Position ボタンの表示位置
Prevent on mobile チェックするとモバイルブラウザは非表示

大体はデフォルトのままで丁度良いくらいに設定されています。

「Fade-in distance」は、トップからどのくらい移動するとボタンが表示されるかです。最上部にいる時はボタンは必要ないってことですね。

動作は説明するよりも自分で試してみたほうが早そうです。ボタンの表示位置は右下とか真ん中とか、サイトにあった場所を好みで設定します。一番多く見かけるのは右下でしょうか。

デザイン設定

to_top_appearance

項目 説明
Text version チェックを入れるとテキスト入力ができる
Button text 「TOPへ」などテキスト入力をします
Top/bottom padding ボタンの縦幅
Sides padding ボタンの横幅
Font size フォントサイズの設定
Text color テキストの色を設定
Bold Text テキストを太字にする
Text shadow テキストに影を付ける
Background color ボタンの色
Border color ボタンの外枠の色
Border width ボタンの外枠の幅
Border radius ボタンの角丸設定
Inset highlighting ボタンのハイライト
Shadow ボタンに影を付ける

画像矢印のプレビューでボタンの変化を確認しながら調整できます。色や大きさなども画面から操作、選択できますので簡単です。

細かい説明を読むよりは、実際にやりながら試した方が早いかもしれません。

ちなみに、その下にある「Preview over black, grey or white.」からプレビューの背景を黒、グレー、白を選べます。

テキスト関連の「テキスト」「文字サイズ」「文字色」「太字」「文字影」設定はテキスト設定にチェックを入れた時のみ出てきます。

ボタンは「大きさ(縦横幅)」「ボタンの色」「ボタン枠の色」「ボタン枠の幅」「角丸(四角~丸まで可能)」「ハイライト」「影」など詳細まで設定できます。

最近は似たような種類のボタンをよく見かけますが、デザインが得意な人は、このプラグインならかなり個性的なボタンが作れると思います。

sponsored link

コメントを残す

メールアドレスが公開されることはありません。