今日の人気記事

  1. 1ページに表示する最大投稿数を変更 - posts_per_page

ページのトップへゆっくりとスクロールする(戻る)プラグインjcwp scroll to top

当ページのリンクには広告が含まれています。

スポンサーリンク

ページのトップへゆっくりとスクロールする(戻る)ボタンを簡単に設置できるWordpressプラグイン「jcwp scroll to top」を紹介します。

WPプラグイン「jcwp scroll to top」

インストールと有効化

WordPressのメニュー
→「プラグイン」
→「新規追加」
→「jcwp scroll to top」を検索
→「いますぐインストール」
→「有効化」します。

設置

プラグインを有効化すると自動的にページのトップへ戻るボタンが右下に設置されます。

ページを下へスクロールするとニョロリとアニメーション付きで「Scroll to Top」というボタンが表示されます。ボタンをクリックするとゆっくりとページのトップへ戻り、ボタンは、非表示になります。

jcwp-sroll-to-top-0
ボタンはこんなのです。

設定

WordPressのメニューから「設定」→「JCWP Scroll to Top」をクリックします。

jcwp-sroll-to-top

  • Enable
    「Yes」を選択するとトップへ戻るボタンが表示され、「No」を選択するとトップへ戻るボタンが非表示になります。
  • Animation Duration
    トップへ戻る速度の設定です。数字を小さくすると速くなり、数字を大きくすると遅くなります。初期設定の値は、1000です。数字を変えて最適速度を探してみましょう。
  • Show when scroll at
    ボタン表示の設定です。初期設定では、トップから20px下へスクロールするとボタンが表示するように設定されています。
  • Show Element ID
    ボタンのIDです。初期設定は「jcScrollTop」です。ボタンのCSSでカスタマイズしたい場合は、ここで指定したid属性を選択するように設定しましょう。
  • Element Z-index
    ボタンのz-indexです。初期設定は「999999」です。z-indexは、要素の重なりを制御します。数が大きいほど上に重ねられ、数が小さい(負の値もOK)ほど下に重ねられます。
  • Easing type
    トップへ戻る速度の緩急の設定です。初期設定は「easeInOutQuad」です。他にも様々な設定が用意されています。中にはトップへ戻ると反動でバウンドするものなどいろいろありますので、お好みの設定を探してみてください。
  • Position
    ボタンのポジションの設定です。初期設定は「Right」になっていますので、サイトに合わせて設定しましょう。
  • Text to display
    ボタンに表示されているテキストの設定です。初期設定は「Scroll to top」になっています。
  • Backgroud Color
    ボタンの背景色の設定です。初期設定は「#c00」になっていますで、サイトのテーマに合わせて変更してみてください。
  • Font Color
    ボタンのテキストの色の設定です。初期設定は「#FFF」です。
  • Font Size
    ボタンのテキストサイズの設定です。初期設定は「15px」です。
  • Font family
    ボタンのテキストのフォント設定です。初期設定は「Calibri」です。
  • Text Padding
    ボタンのテキストのPadding設定です。初期設定は「5px」です。
  • Container Width
    ボタンの幅の設定です。初期設定は「120px」です。
  • Container Border Colour
    ボタンの線色です。初期設定は「#960404」です。
  • Container Border Radius
    ボタンの角の丸みの設定です。初期設定は「10px 10px 0px 0px」です。
  • Callback Function
    ボタンをクリックしてトップへ戻った後、呼び出したい関数があれば、ここに記述します。
  • Disable on
    「Mobile Phones」:チェックを入れるとスマートフォンで、トップへ戻るボタンを非表示にします。
    「Tablets」:チェックを入れるとタブレット端末で、トップへ戻るボタンを非表示にします。
  • Link to authors website
    チェックを入れると「jcwp scroll to top」プラグイン制作者のサイトへリンクが貼られます。

以上、WordPressプラグイン「jcwp scroll to top」の紹介でした。

jQueryプラグインを利用するのもいいかもしれません。

関連記事(一部広告含む)