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

WPFront Scroll Topの設定と使い方

プラグインWPFront Scroll Topの設定と使い方をまとめておきます。

このプラグインを使うと、画面最上部までスクロールするボタンを設置することができます。

目次

設定と使い方

プラグインを有効化すると、管理画面の設定に「Scroll Top」が追加されます。

使い方

管理画面の設定「Scroll Top」を開いて、「Enabled」にチェックを入れるだけで機能します。

WPFront Scroll Topの使い方

スクロールできます
詳細
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を選択した場合の設定

設定は全て任意ですが、「JavaScript Async」にチェックを入れると、JavaScriptを非同期で読み込むのでページの表示速度が上がります(正常に動作しない時はチェックを外す)。

また、「Hide on WP-ADMIN」にチェックを入れると、管理画面でボタンを非表示にできます。

フィルター

初期設定では、全てのページにスクロールボタンが表示されます。

特定のページでのみ表示させたい及び特定のページで非表示にしたい時はここで設定できます。

WPFront Scroll Topフィルター

画像の変更

用意されている画像以外にも、オリジナル画像をアップロードして使うことができます。

WPFront Scroll Top画像の変更

画像に特に意味はないので、Image ALT(Alt属性)は空欄のままで構いません。

トップへの矢印アイコンを探している方は、Iconfinder等の無料素材サイトからダウンロードして下さい。

最後に

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

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

スポンサーリンク

スポンサーリンク

スポンサーリンク

この記事を書いた人

まったりブログ運営者です。

現在ブログテーマをハミングバードからSWELLに変更中です。修正が完了するまでレイアウトが崩れるかもしれません。

関連記事

コメント

コメントする

目次
閉じる