ほとんどのサイトが取り入れているスムーススクロール。
実装するプラグインも沢山ありますが、今回紹介するプラグインは、なんとデザインの変更まで管理画面で出来ちゃいます！
新規にCSSを追加したり、画像を置き換えたりしなくても大丈夫！
とっても便利なプラグインです。
プレビューを見ながら、サイトに合ったテイストのボタンに変更できます！
目次
Dynamic “To Top” Pluginのインストール
- プラグイン名
- Dynamic “To Top” Plugin
- プラグインサイト
- [browser-shot width=”600″ url=”http://wordpress.org/plugins/dynamic-to-top/”]
プラグイン＞新規追加＞Dynamic To Top 等で検索
有効化しましょう。
外観＞To Top が追加されていますので、こちらからデザイン変更が可能です。
デフォルトでも、割とオシャレな感じなので、黒系のサイトならこれでも十分ですね。
スクロールアクション等の設定
Behaviorの項目から、スクロールの速さやイージング、表示させるposition、モバイルでも表示するかどうか等を変更できます。
こちらは色々数値を変えて試してみると良いかもしれませんね。
デザインの変更
Appearance の項目から、かなり自由にデザインの変更を行うことができます。
矢印じゃなくてテキストで「TOP」などとしたい場合は「Text version」のYesにチェックを入れるとテキストの入力欄が出てきます。
さらにテキストをチェックすると、フォントサイズ、boldの選択、text color、text shadowの項目が出現して、テキストの装飾も細かく行うことができます。
さらにさらに、テキスト、背景色、border color等はカラーピッカーまで使えるという優れものです。
日本語化はされていませんが、CSSの理解が深い人や英語がちょっとできる人は問題なく使えるでしょうね。
・矢印の色は選べない
・グラデーションが使えない
・ボタン自体のシャドウは色が変更できない
という部分もありますが、いやいや、これだけ設定できたら十分でしょう。便利すぎます！
Behavior もAppearance も、変更したらsave change をお忘れなく！
力作も一瞬で水の泡ですよ！！
さらに独自のカスタマイズ！
矢印の色やfont-familyが気に入らない場合は、独自でCSSを上書きしましょう。
テーマ編集でも、子テーマでも、拡張CSSでも、何でもかまいません。
フォントの変更がしたい場合：
#dynamic-to-top {
font-family: sans-serif;
}
デフォルトのfont-familyはsans-serifになっているので、こちらを変更してあげましょう。
矢印の画像を置き換えたい場合：
#dynamic-to-top span {
display: block;
overflow: hidden;
width: 14px;
height: 12px;
background: url(https://website-homepage.com/wp/wp-content/plugins/dynamic-to-top/css/images/up.png )no-repeat center center;
}
こちらは画像のサイズにもよるので、適宜変更が必要そうです。
CSSだけ編集すれば、プレビューでの確認はできないでしょう。
プラグインフォルダの画像自体を置き換える方法もありますが・・・
見た所プレビュー画面でも、実際のコードでも同じＵＲＬの画像が使われているようですが、画像を置き換えた場合はプラグインのプレビューにも影響しそうなので、自己責任でお願いします！
こういう、プラグインのデザインを少し変更したい時なんかにオススメなのが、拡張CSSのプラグインなんですよね。
テーマのカスタマイズをがっつり書き込む＞＞子テーマ
プラグインのデザインを少し変更する＞＞拡張CSS
というようなルールを決めて管理すればいいと思いますよ。
拡張CSSに関する記事はこちら！