トップに戻るボタンを追加しました。

スポンサーリンク

どうも、リョウ(@ryskyshd)です。

先日、ブログのテーマを変更しました。

WordPressのテーマを変更しました。

2015.05.16

トップに戻るボタンが最初から付いているテーマもありますが、今回のテーマには付いていなかったのでプラグインを使ってチャッと設置してみましたので簡単にご紹介します。

Scroll Back to Top

今回入れたプラグインは「Scroll Back to Top」というプラグインです。

WordPressの公式プラグインディレクトリにありますので多少は安心かと。

似たようなプラグインはたくさんあると思いますが

wordpress トップへ戻る プラグイン」で検索すると色々と紹介されていますが、簡単に設置できてそれでいてカスタマイズ性の高いプラグインを探してみました。
まぁそもそもプラグインを使うので設置はどれも簡単なんですが。

他にもjQueryを使うやつもありましたが何か面倒そうなので避けました。

変更した箇所

デフォルトの状態でも十分使えるのですが、せっかくカスタマイズできるのでちょっとだけ弄ってみました。
Scroll Back to Top Settings

ボタンの大きさ、色

ボタンの大きさは50px四方、色は背景色になじむように変更しました。
マウスオンでフワッと色も変わっていい感じ。

Border Radius

50pxに指定すると綺麗な円形になりました。

ラベル

ラベルもカスタム。
上を示す矢印だけにしたかったのですが、既存のアイコンは何となく気に入らなかったのでフォントで「↑」にすると好みの感じになりました。
フォントサイズも少し大きめの20pxに指定。
この辺は完全に好みの問題ですね。

Scroll Duration

ボタンを押して上に戻る時のスピードですね。
1200msぐらいがいい感じでした。

最後に

いかがでしたでしょうか。
今回は急を要する(自分的に)作業でしたのでプラグインを入れましたが、本来はプラグインなしで実装したいんです。
今のところこのプラグインが気に入っているので分かりませんが、いずれ時間を作ってチャレンジしてみたいですね。

スポンサーリンク

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。