スクロールが非常に長くて、上まで戻るのが大変！ブログトップはもちろん、文字数の多い記事や、カテゴリー、タグページなどでもそうなりがちですよね。読者に優しいブログにするために、ワンクリックでページトップに戻れるボタンをつけましょう。
この記事では、ページトップに戻れるボタンをつけられるプラグインについて詳しく解説しています。
完成品
WPFront Scroll Topをインストールしよう
WordPress には戻るボタンをつけられる、いろいろなプラグインが存在していますが、特におすすめなのが、WPFront Scroll Top というプラグインです。
70 種類以上のボタンが使える
デフォルトで 70 種類以上のボタンが使え、オリジナルの画像をボタンとして使用することも可能です。設定が細かく行えますので、カスタマイズ性もとても高くなっています。
ダッシュボード > プラグイン > 新規追加 で WPFront Scroll Top を検索して、インストール ＆ 有効化してください。
プラグインのインストール方法がわからない方は以下のページを参考にしてください。
WPFront Scroll Topの使い方
1. 設定ページに移動する
インストールが終わったら、ダッシュボード > WPFront を押して、プラグインの設定ページに移動しましょう。
2. ボタンを表示する設定を行う
ボタンを表示するのに最低限必要な設定は以下になります。
| 設定 | 解説 |
|---|---|
| Enabled | チェックしてください。プラグインを利用するという意味です。 |
| JavaScript Async | チェックしてください。JavaScript というプログラム言語でボタン機能を実現していますが、これを非同期で読み込む設定です。チェックしておくとブログの表示が速くなります。ボタンが正常に表示されなかった場合はチェックを外してください。 |
| Image Button | 表示したいボタンを選んでください。好きなボタンを選んでください。後から変更することもできますので、とりあえずでも構いません。 |
上記、3つの設定を行うだけでボタンを表示することができます。設定が終わりましたら、一番下までスクロールして 変更を保存 ボタンを押してください。
3. ボタンを確認する
ブログを確認してください。少しスクロールを行うと、右下にボタンが表示されると思います。押すとページトップに移動します。
とても簡単に表示できましたね！選べるボタンもたくさんあるので、いろいろ試しながらブログのデザインにあったボタンを探してみてください。
オリジナルのボタンを使用する方法
試してみたけど、ボタンのデザインが気に入らなかった。もっと他のボタン画像はないの？ボタンを自作したい！そういった方のためにボタン画像をアップロードして使う方法を解説します。
まず素材サイトなどでボタン画像をダウンロードしてください。
今回は例として、やじるし素材天国からこちらの画像を利用させてもらいました。
1. ボタン画像をアップロードする
ダッシュボード > メディア > 新規追加 を選択して、画像のページに移動してください。ここにファイルをドロップと書かれた場所に、ボタン画像をドラッグ＆ドロップするか、ファイルを選択からボタン画像を選んでください。
処理中…と書かれたまま、動作が止まってしまうことがありますが、ほとんどの場合、正常にアップロードは終わっていますので、次に進みましょう。
2. メディアライブラリに移動する
ダッシュボード > メディア > ライブラリ を選択して、さきほどアップロードしたボタン画像を選択しましょう。
3. ボタン画像のURLを取得する
添付ファイルの詳細という画面が表示されますので、右側にある URL というフォームに書かれている URL をコピーしてください。フォームを選択してキーボードの Ctrl + A を押すと選択できます。次に Ctrl + C でコピー完了です。
4. 設定ページに戻り、URLを貼り付ける
ダッシュボード > WPFront を選択し、設定ページに戻ったら下の方にスクロールを行い、Custom URL と書かれたフォームに、さきほどコピーした URL を貼り付けてください。そしてラジオボタンをチェックしてから（画像のように青●をつける）変更を保存 ボタンを押してください。
5. ボタンをチェックする
巨大な指が表示されました！邪魔過ぎる大きさです。素材サイトなどの画像を利用させてもらう場合は、あらかじめ画像編集ソフトなどで大きさを調整しておくとこういうことにはなりません。
画像のサイズは画像編集ソフトで調整することもできますが、設定ページで、Button Size のフォームに数値を入力することでも調整が可能です。
横 ○○ px × 縦 ○○ px です。片側だけ数値を入力しても、自動的に縦横比を調整してくれます。
※ スマートフォンやタブレットなどのモバイル機器で、画像を綺麗に表示したい場合は、表示したい大きさの倍のサイズの画像をアップロードして、Button Size で半分の値を入力すると綺麗に表示されます。
WPFront Scroll Topの設定解説
WPFront Scroll Top には設定できる項目がたくさんあります。
| Display | 解説 |
|---|---|
| Enabled | チェックするとボタンが表示されます。一時的に無効にしたい場合にチェックを外してください。 |
| JavaScript Async | このプラグインは JavaScript というプログラム言語で機能を実現していますが、チェックすると非同期で JavaScript を読み込んでブログの表示を速めます。ボタンが正常に表示されなかった場合はチェックを外してください。 |
| Scroll Offset | ボタンは少しスクロールされてから表示されます。この表示されるまでの距離を設定します。大きい数値を設定すると、ある程度スクロールされてから表示されるようになります。 |
| Button Size | 表示するボタンのサイズです。横、縦の幅をそれぞれ px で設定します。片側だけ入力しても自動的に縦横比が計算されて、適切なサイズで表示されます。 |
| Button Opacity | ボタンの透明度を設定します。数値を小さくすると透明に近づき、大きくすると透明度が下がります。 |
| Button Fade Duration | スクロールが上に到達したときにボタンが消えますが、消えるまでの時間を設定します。大きな数値を設定すると、ゆっくりと消えるようになります。 |
| Scroll Duration | ボタンを押した時に、どのくらいの速度で上に移動するかの設定です。大きな数値を入力すると、ゆっくり上に戻ります。 |
| Auto Hide | チェックすると、スクロールしないでしばらく時間が経つとボタンが自動的に消えます。 |
| Auto Hide After | 上の消えるまでの時間を設定します。例えば 2 を設定すると、スクロールせずに 2 秒経つと自動でボタンが消えます。 |
| Hide on Small Devices | アクセスしたデバイスの横幅が小さい場合は、ボタンを表示しません。スマートフォンなどの横幅の小さいデバイスでボタンを表示すると、記事が読みにくくなったりする場合は、チェックしておくとボタンが表示されなくなります。 |
| Small Device Max Width | 上の設定とセットです。ここで設定した横幅未満のデバイスではボタンを表示しません。 |
| Hide on Small Window | Hide on Small Devices のブラウザ版です。チェックすると、ブラウザの横幅が小さいときにボタンを表示しません。 |
| Small Window Max Width | 上の設定とセットです。ここで設定した横幅未満のブラウザではボタンを表示しません。 |
| Hide on WP-ADMIN | ダッシュボードなどの管理者ページでは、ボタンを表示しません。邪魔に感じた場合はチェックしておくといいでしょう。 |
| Hide on iframes | チェックしておくと、ポップアップの中など、インラインフレームではボタンを表示しません。 |
| Move Admin Menu | チェックすると、設定ページが ダッシュボード > 設定 > Scroll Top に移動します。チェックを外すと ダッシュボード > WPFront に戻ります。 |
| Button Style | ボタンを Image: 画像、Text: 文字、Font Awesom: アイコンフォントの 3 つから選択することができます。 |
| Location | 解説 |
|---|---|
| Location | ボタンを表示する場所を設定します。 Bottom Right: 右下 Bottom Left: 左下 Top Right: 右上 Top Left: 左上 |
| Margin X | ボタンを表示する位置を指定します。Location の設定で、○○ Right を選んだときはブラウザの右からの距離。○○ Left を選んだときはブラウザの左からの距離になります。 |
| Margin Y | ボタンを表示する位置を指定します。Location の設定で、Bottom ○○ を選んだときはブラウザの下からの距離。Top ○○ を選んだときはブラウザの上からの距離になります。 |
| Filter | 解説 |
|---|---|
| Display on Pages | ボタンを表示するページを設定できます。 All pages: すべてのページに表示します。 Include ~: 指定した記事 ID に表示します。 Exclude ~: 指定した記事 ID を除外して表示します。 |
| Image Button | 解説 |
|---|---|
| Custom URL | オリジナルの画像を使う時に、画像の URL を入力します。 |
| Image ALT | 画像の読み込みに失敗したときや、音声読み上げブラウザを利用した際に画像の代わりに読み込まれるテキストになります。ページトップに戻る や Back to top などと入力しておくといいでしょう。 |
最後に
ページトップへ戻るボタンを用意しておくと、とても便利ですし、ブログの回遊率アップにも繋がると思います。
記事を充実させるだけでなく、インターフェースや使い勝手についても意識していくと、ブログの評価がぐっと高まるのではないでしょうか。
