知識がなくても画面トップに「戻るボタン」が作れる『Scroll Back to Top』

更新日:

 
Scroll Back to Top,戻る,プラグイン
Scroll Back to Top,戻る,プラグイン

ウェブサイトで、下にスクロールするとトップに戻るためのボタンが出てくることがあります。コンテンツが多いサイトだと、クリックするだけでページのトップに戻れるので便利。コードで書こうと思ったらJavascriptなどの知識が必要になりますが、そんな知識がなくても簡単にボタンを設置できるのが、この「Scroll Back to Top」というWordpressプラグインです。このプラグインを使えば、簡単にページの上まで戻ってくれるボタンを設置することができます。

Scroll Back to Top:使い方

Scroll Back to Topを使うためには、まずプラグインをワードプレスのウェブサイトにインストールする必要があります。

Scroll Back to Top:プラグインをインストール

管理画面の左サイドバーより、「プラグイン」→「新規追加」をクリックします。プラグインを追加する画面になるので、右上の検索ボックスに「Scroll Back to Top」と入力し、検索します。「Scroll Back to Top」が出てきたら、右上の「今すぐインストール」をクリックします。

プラグインをインストール

Scroll Back to Top:プラグインを有効化

インストールが完了するとボタンが「有効化」に変わるので、「有効化」ボタンをクリックします。これで、ウェブサイトでScroll Back to Topを使用することができます。

プラグインを有効化

Scroll Back to Top:設定

プラグインをインストールしたら、デザインなどの詳細設定を行います。管理画面の左サイドバーの「設定」→「Scroll Back to Top」をクリックします。

プラグインの設定

プラグインの設定画面に移るので、ここで詳細設定をしていきます。主要項目をそれぞれ説明します。

1.Visibility:表示設定

ここではボタンの表示の設定をします。値を変更できますが、デフォルトの設定で問題ありません。

表示設定

  • Status・・表示の状態
  • Minimum Browser Resolution・・ブラウザの最小解像度
  • Maximum Browser Resolution・・ブラウザの最大解像度

2.Button Appearance:カラー設定

ここではボタンの色などの設定ができます。

デザイン設定

  • Width・・ボタンの横幅
  • Height・・ボタンの縦幅
  • Background Color・・ボタンの背景色
  • Background Hover Color・・マウスカーソルを合わせた時の背景色
  • Foreground Color・・矢印の色
  • Foreground Hover Color・・マウスカーソルを合わせた時の矢印の色
  • Opacity・・透明度
  • Border Radius・・角の丸み

3.Button Location:表示位置設定

ここではボタンの表示位置を設定できます。ピクセルの値を変えることで、ページの好きな位置に表示させることができます。

位置設定

  • Horizontal Alignment・・左右、中央寄せの選択
  • Vertical Alignment・・上下の選択
  • Horizontal Distance from Edge・・画面の端から横に何px動かすか
  • Vertical Distance from Edge・・画面の端から上下に何px動かすか

4.Button Label:デザイン設定

ここではボタンの矢印の表示について変更することができます。様々なデザインの矢印がありますが、右端の「Custom Text」を選択すると、自分で自由に設定することができます。

カスタムテキスト

5.Animation Options:アニメーション設定

ここではトップに戻るボタンをクリックした時の、挙動の設定ができます。

挙動の設定

  • Scroll Duration・・スクロールの速さ
  • Visibility Duration・・ボタンが消えるまでの速さ
  • Fade Duration・・ボタンが出てくる時のフェードの速さ

6.Advanced Options:高度な設定

ここでは、より高度な設定を行うことができます。コードの知識がない人は何も触らないようにしましょう。

高度な設定

Extra CSSのボックスにCSSコードを記入することで、ボタンのデザインなどを自由に変更することができます。

Scroll Back to Top:設定の保存

ボタンの設定をしたら、最後に変更を保存する必要があります。設定画面の最下部、「変更を保存」をクリックして保存しましょう。

変更の保存

Scroll Back to Top:まとめ

Scroll Back to Topの使い方を紹介しました。コードの知識が全くない人でも、簡単にページトップに戻ってくれるボタンを設置することができます。簡単にページトップに戻れることで、サイトの回遊率もアップします。ぜひ自分のウェブサイトに取り入れてみましょう。

投稿者:

-デザイン, プラグイン
-, ,

Copyright© FreesoftConcierge , 2019 All Rights Reserved.