Travelogue(トラベローグ)

Travelogue

ページの上に戻るボタンを表示するプラグイン「Dynamic To Top」設定画面でデザイン変更が簡単!

Dynamic To Topは閲覧中のページの一番上まで戻るボタンを表示するプラグインです。
同じような種類のプラグインでは、以前にも当ブログでWP To TopとjQuery Smooth Scrollのふたつのプラグインを紹介しましたが、この3つの中では今回のDynamic To Topが一番いろいろと設定を変更できて高機能です。

ボタンをページを少しスクロールした段階で右下(または左下)に浮かび上がります。この位置は設定画面で変更可能です。
上へ戻るときのスクロール速度、ボタンのデザイン(形状や色など)も細かく設定変更ができます。
設定画面が分かりやすく作られているのがいいですね。数値を入力するのではなくメーターのようなバーのつまみをスライドさせて値を決めるとプレビュー画面でリアルタイムに確認できます。

Dynamic To Topのインストール

インストールは管理画面で直接可能ですので、ログインしたら左メニュー「プラグイン>新規追加」でDynamic To Topと検索。該当のプラグインをインストールと有効化します。
プラグインのインストールに慣れていない人は以下のエントリーを参考にしてください。

Dynamic To Topの設定

有効化すると、管理画面左メニュー「外観>To Top」から設定変更が可能になります。

Dynamic To Topの設定

設定項目をいくつかピックアップして解説します。

  • Scroll time
    上に戻るスクロールの速度設定。メーターのつまみを左に動かす(数値が小さくなる)と速度は速くなります。デフォルトでは1100になってますがこれだとちょっと遅いかも?
  • Fade-in distance
    ボタンが浮かび上がるタイミングの設定。初期値は300pxになっているので、上から300px下にスクロールしたときにボタンがふわっと浮かび上がるようになっています。
  • Position
    ボタンの表示位置の設定。右下や左下を選べますが、右下に表示させているサイトが多いのでそれにならったほうが分かりやすいですね。
  • Text version
    矢印だけのボタンにするか、「To Top」という文字のボタンにするかの設定です。
  • Button text
    文字のボタンにする場合、ここで文言を変更可能です。

Top/bottom padding以下の設定項目では、ボタンのデザインをいろいろ変更できます。プレビュー画面に反映されるのでいろいろ試してみてください。
例えばBorder radiusというのは角丸の設定のことで、初期値の30pxだとほぼまんまるですが、メーターのつまみを左に動かす(値が小さくなる)と角丸の四角っぽい形に変化していき、一番左(値は0)にすると普通の角ばった四角になります。
設定が完了したら一番下の「Save Changes」ボタンを押すのを忘れずに。

動作確認したバージョン:WordPress3.8、Dynamic To Top3.4.2

Dynamic To Topのアンインストール(2014年10月11日追記)

Dynamic To Topをアンインストールしようとすると、なぜか管理画面から削除できませんでした。

  1. 管理画面>プラグイン>インストール済みプラグイン
  2. Dynamic To Topの「削除」をクリック
  3. 次の画面で「はい、これらのファイルとデータを削除します」ボタンをクリック

すると、以下のエラー。

Fatal error: Call to undefined function elete_transient() in /●●●●●●●●●/wp-content/plugins/dynamic-to-top/uninstall.php on line 16

上のエラーメッセージの通り、uninstall.phpの16行目を見てみると以下のように書いてあります。

elete_transient( 'dynamic_to_top_transient_css' );

スペルミスのようなので単純に「d」を先頭に追加。

delete_transient( 'dynamic_to_top_transient_css' );

これで再度管理画面からのアンインストールを試してみたところ、問題なく削除ができるようになりました。

Pagetop