より記事を読みやすく!「ページトップへ戻る」ボタンを設置しました

photo credit: SoulRider.222 via photopin cc
photo credit: SoulRider.222 via photopin cc

いつもこのブログを訪れてくださっている皆さま、ありがとうございます。より記事を読んでもらいやすくなるよう、前々から導入したいと考えていた「ページトップへ戻る」ボタンをこのたび設置しました。ボタンを押すとヌルヌルと画面の1番上までスクロールします。記事のお供に、ぜひ使ってみてください!導入のために使ったプラグインについても紹介します。

目次

  1. ボタンはこちら
  2. Dynamic “To Top” Plugin で簡単に設置
  3. 設定方法
  4. アンインストールする際はちょっと注意

ボタンはこちら

画面の右下、「PAGE TOP ↑」と書かれた黒いボタンが今回設置したものです。画面を少し下にスクロールすると、スクロールが終わったタイミングで表示されます。

まだ記事を読み始めたばかりの時にクリック(またはタップ)すると、ゆっくりと上までスクロールします。ある程度記事を読み進めてからの場合は割と速くスクロールします。つまり、ページトップまでの距離によってスクロール速度が変わります。私は「可変ヌルヌル」と呼んでいますw

記事の冒頭には基本的に目次のリンクを付けてあり、クリックやタップで目的の場所まで移動できるようになっています。すぐに戻ってくることができますので、ぜひボタンと目次とで行ったり来たりしてみてください!

Dynamic “To Top” Plugin で簡単に設置

導入に当たっては、簡単にボタンを設置できる WordPress のプラグイン Dynamic “To Top” Plugin を使いました。

プラグイン公式ページ:

WordPress の管理画面で「プラグイン」→「新規追加」から検索すると出てきます。インストールし、有効化します。

このプラグインはヤズさん (@402yaz) に教えていただきました。いつもありがとうございます!

設定方法

設定は「外観」→「To Top」から行います。1番上の「Behavior」が挙動に関する項目です。

「Scroll time」のスライダーは左にするとスクロール速度が速く、右にすると遅くなります。自分は少し速めの「600 Milliseconds」にしました。

「Fade-in distance」はどれぐらい移動するとボタンが表示されるかの設定。私はちょっと短めの「200 Pixels」にしています。

「Position」はボタンを表示させる位置です。

続いて、「Appearance」で見た目の変更ができます。デフォルトの丸いボタンもなかなかカッコいいのですが、文字を入れるタイプにしました。それには「Text version」で「Yes」にチェックを入れます。

「Top/bottom padding」と「Sides padding」はそれぞれ、上下と左右の余白の大きさです。

表示方法はちょっとカスタマイズしました。「Font size」をやや小さめの「0.8 Em/s」にし、「Bold Text」(太字)と「Text shadow」(テキストの影)をオフにしました。

「Background color」で色を黒から少しグレー寄りの「#444」に、「Border width」(枠線の太さ)は「0px」にしてボーダーをなくしました。

「Border radius」は角丸の設定です。スライダーを左にするほどボタンの形が四角に、右にするほど円に近づきます。

最後の「Inset highlighting」と「Shadow」はそれぞれ、ボタンの色に少し光沢を付けたり、ボタン自体に影を付けたりします。

アンインストールする際はちょっと注意

記事執筆時点のバージョン(3.4.2)ではバグがあり、プラグインをアンインストールしようとするとエラーが発生します。

管理画面の「プラグイン」→「プラグイン編集」で dynamic-to-top/uninstall.php を開くと、最終行の先頭から "d" が抜け落ちているので、これを補って delete_transient に修正するとうまくいきます。

「ページトップへ戻る」ボタンは、jQuery という JavaScript のライブラリを使って自分で実装することもできるみたいです。いつか挑戦したいなー、と思っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です