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

WPFront Scroll Topの設定と使い方

プラグイン「WPFront Scroll Top」を追加すると、画面最上部までスクロールさせるボタンを設置することができます。細かいカスタマイズが可能で、サンプル画像も複数用意されています。

設定

WPFront Scroll Topを追加&有効化し、ダッシュボードの設定「Scroll Top」から各種設定を行います。

WPFront Scroll Topの設定

WPFront Scroll Topの設定

使い方

有効化「Enabled」にチェックを入れるだけで機能します。

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

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

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※④ 画像orテキストの選択
Image ALT ④でImageを選択した場合の画像の説明(Alt属性)
Text ④でTextを選択した場合のテキスト文字
Text Color ④でTextを選択した場合の文字の色
Background Color ④でTextを選択した場合の背景の色
Custom CSS CSSでカスタマイズする際に入力
Location※⑤ ボタンが表示される位置
Margin X ⑤で指定した位置の横余白
Margin Y ⑤で指定した位置の縦余白
Display on Pages ボタンを表示させるページ(Includeは指定・Excludeは除外)
Image ④でImageを選択した場合の画像
Image ALT 画像の代替テキスト

最後に「Image Button」から使いたいボタンを選択し、「変更を保存」をクリックで完了です。

オリジナルのボタンを使う方法

ダッシュボードのメディアに使いたい画像をアップロードします。

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

メディアをアップロード

メディアをアップロード

Custom URL」にチェックを入れ、「Media Library」ボタンをクリックして画像を選択します。

「Custom URL」にチェックを入れてアップロードした画像を選択

「Custom URL」にチェックを入れてアップロードした画像を選択

URLが自動で入力されるので、「変更を保存」をクリックで完了です。

最後に

WPFront Scroll Topを使えば、自分の使いたい画像を設定することができますし、細かいカスタマイズも可能です。自分のイメージしたボタンを設置することができます。

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