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

WPFront Scroll Topの設定と使い方

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

WPFront Scroll Top

WPFront Scroll Top

※最初から同じ機能が実装されているテーマでは必要ありません。

設定

WPFront Scroll Topを追加&有効化し、管理画面の「WPFront(Scroll Top)」から各種設定を行います。

使い方

特に難しい設定はありません。「Enabled」にチェックを入れるだけで機能します。管理画面でボタンを表示させたくない場合は「Hide on WP-ADMIN」にチェックを入れて下さい。

他の設定はカスタマイズ様になりますので、お好みで設定して下さい。

Enabled プラグインを有効化
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のCustom URLにチェックを入れて画像URLを入力します。

最後に

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

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