MENU

『トップへ戻る』スクロールボタンを設置する【Simple Scroll to Top Button】

2020 5/26
『トップへ戻る』スクロールボタンを設置する【Simple Scroll to Top Button】

ページをスクロールすると表示される『トップへ戻る』ボタン。最近では実装するのが当たり前になっているようですね。

ページをどれだけ下にスクロールしても、いつでも好きなタイミングでページのトップに戻ることができるのですから、確かに便利なボタンです。

情報量の多いサイトには必須ともいえるでしょう。

Simple Scroll to Top Button】は、トップへ戻るスクロールボタンを設置することのできるプラグイン。

ボタンの形状やサイズなどのデザインを変更することができます。

こんな場合におススメ
  • ページスクロールで『トップへ戻る』ボタンを表示したい
プラグインを使ってできること
  • ページスクロールで表示される『トップへ戻る』ボタンを設置する
  • ボタンの形状、サイズなどのデザインを変更することができる
目次

インストール

Simple Scroll to Top Button インストール
Simple Scroll to Top Button インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Simple Scroll to Top Buttonで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

トップへ戻るボタンの表示方法

プラグインを有効化すると、自動的にトップに戻るスクロールボタンがページの下部に表示されるようになります。

【Simple Scroll to Top Button】の設定

STEP
Scroll to Topを開く

プラグインを有効化すると、管理画面 > 設定 内に『Scroll to Top』が表示されるので、そこから設定を行います。

Simple Scroll to Top Button 設定
STEP
項目の設定

Button

Simple Scroll to Top Button 設定
Simple Scroll to Top Button 設定
Symbolスクロールボタンのシンボルを選択
Background shapeスクロールボタンの形を選択
Symbol colorシンボルの色を選択
Background colorスクロールボタンの色を選択
Button sizeスクロールボタンのサイズを指定

Effects・Autoload

Simple Scroll to Top Button 設定
Transparencyスクロールボタンを透過させるかの選択
Scroll durationスクロール速度の指定
(数値が大きいほどゆっくりスクロールされる)
Display button onスクロールボタンを表示するページを選択
Every frontend page:すべてのページで表示
Home Page Only:ホームページ(トップページ)のみ表示
STEP
保存
項目を設定したらSave changesをクリックし、設定を保存します。

動作確認環境

  • バージョン 4.37
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Simple Scroll to Top Button】は、トップへ戻るスクロールボタンを設置することのできるプラグイン。
  • 簡単にボタンの形状やサイズなどのデザインを変更することができます。
目次
閉じる