WPFront Scroll Topの設定と使い方:画面上部へスクロールするボタンの設置

WPFront Scroll Topの設定と使い方

WPFront Scroll Topは、画面最上部までスクロールするボタンを設置できるプラグインです。

スクロールボタンは必ずしも必要という訳でもありませんが、あると便利な機能です。

設定と使い方

設定の変更は、管理画面の設定「Scroll Top」から行って下さい。

基本設定

プラグインを有効化して、「Enabled」にチェックを入れるだけで機能します。

他は特に変更する必要はありませんが、「JavaScript Async」にチェックを入れると、JavaScriptを非同期で読み込むのでページの表示速度が上がります(正常に動作しない時はチェックを外す)。また、「Hide on WP-ADMIN」にチェックを入れると、管理画面でボタンを非表示にできます。

WPFront Scroll Top Settings

WPFront Scroll Top Settings

赤字の項目にチェックを入れ、他はお好みでカスタマイズして下さい。

Enabled プラグインを有効化
JavaScript Async JavaScriptを非同期で読み込む
Scroll Offset どれだけ下にスクロールしたらボタンが表示されるか
Button Size ボタンの横幅と縦幅(デフォルトは0x0)
Button Opacity カーソルを乗せる前のボタンの透明度
Button Fade Duration 画面最上部に戻った際にボタンが消えるまでの時間
Scroll Duration ボタンをクリックして画面最上部に戻るまでの時間
Auto Hide ①で設定した時間でボタンが消える
Auto Hide After※① ボタンが消えるまでの時間
Hide on Small Devices ②で設定したデバイス以下の場合はボタンが表示されない
Small Device Max Width※② ボタンを非表示にするデバイスの横幅
Hide on Small Window ③で設定したウィンドウ以下の場合はボタンが表示されない
Small Window Max Width※③ ボタンを非表示にするウィンドウの横幅
Hide on WP-ADMIN 管理画面のボタンを非表示
Hide on iframes インラインフレーム上でボタンを非表示
Button Style※④ ボタンのスタイルを選択
Button Action 移動(遷移)する場所を選択
Location※⑤ ボタンが表示される位置
Margin X ⑤で指定した位置の横余白
Margin Y ⑤で指定した位置の縦余白
Display on Pages ボタンを表示させるページ(Includeは指定・Excludeは除外)
Image Button ④でImageを選択した場合の画像選択と代替テキストの設定
Text Button ④でTextを選択した場合の設定
Font Awesome Button ④でFont Awesomeを選択した場合の設定

オリジナルのボタン画像に変更

画像はIconfinder等の無料素材サイトからダウンロードして下さい。

管理画面の「メディア」に画像をアップロードしたら、「Custom URL」にチェックを入れ、「Media Library」から画像を選択します(画像URLが自動で入力される)。

任意の画像を使う

任意の画像を使う

空白でも構いませんが、気になる方は「Image ALT(Alt属性)」に「TOPへ」等を入力して下さい。

最後に

配置の指定から画像の変更まで、細かい調整も可能なので、サイトに画面上部へスクロールするボタンを設置したい時に使うと便利なプラグインです。

ただ、最初から同じ機能が実装されているテーマ(有料テーマに多い)では不要です。

スポンサーリンク
スポンサーリンク