smooth scrollを簡単導入!しかもデザインまで簡単に変更できるプラグイン!Dynamic “To Top” Plugin

ほとんどのサイトが取り入れているスムーススクロール。

実装するプラグインも沢山ありますが、今回紹介するプラグインは、なんとデザインの変更まで管理画面で出来ちゃいます!

icons-top

新規にCSSを追加したり、画像を置き換えたりしなくても大丈夫!
とっても便利なプラグインです。

DynamicToTop01

プレビューを見ながら、サイトに合ったテイストのボタンに変更できます!

DynamicToTop08

Dynamic “To Top” Pluginのインストール

プラグイン名
Dynamic “To Top” Plugin
プラグインサイト
http://wordpress.org/plugins/dynamic-to-top/

プラグイン>新規追加>Dynamic To Top 等で検索

有効化しましょう。

外観>To Top が追加されていますので、こちらからデザイン変更が可能です。

デフォルトでも、DynamicToTop01割とオシャレな感じなので、黒系のサイトならこれでも十分ですね。

スクロールアクション等の設定

Behaviorの項目から、スクロールの速さやイージング、表示させるposition、モバイルでも表示するかどうか等を変更できます。

DynamicToTop02

こちらは色々数値を変えて試してみると良いかもしれませんね。

デザインの変更

Appearance の項目から、かなり自由にデザインの変更を行うことができます。

DynamicToTop03

矢印じゃなくてテキストで「TOP」などとしたい場合は「Text version」のYesにチェックを入れるとテキストの入力欄が出てきます。

DynamicToTop05

さらにテキストをチェックすると、フォントサイズ、boldの選択、text color、text shadowの項目が出現して、テキストの装飾も細かく行うことができます。

DynamicToTop06

さらにさらに、テキスト、背景色、border color等はカラーピッカーまで使えるという優れものです。

DynamicToTop04

日本語化はされていませんが、CSSの理解が深い人や英語がちょっとできる人は問題なく使えるでしょうね。

・矢印の色は選べない
・グラデーションが使えない
・ボタン自体のシャドウは色が変更できない

という部分もありますが、いやいや、これだけ設定できたら十分でしょう。便利すぎます!

Behavior もAppearance も、変更したらsave change をお忘れなく!
力作も一瞬で水の泡ですよ!!

DynamicToTop07

さらに独自のカスタマイズ!

矢印の色や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だけ編集すれば、プレビューでの確認はできないでしょう。
プラグインフォルダの画像自体を置き換える方法もありますが・・・
見た所プレビュー画面でも、実際のコードでも同じURLの画像が使われているようですが、画像を置き換えた場合はプラグインのプレビューにも影響しそうなので、自己責任でお願いします!

こういう、プラグインのデザインを少し変更したい時なんかにオススメなのが、拡張CSSのプラグインなんですよね。

テーマのカスタマイズをがっつり書き込む>>子テーマ
プラグインのデザインを少し変更する>>拡張CSS

というようなルールを決めて管理すればいいと思いますよ。
拡張CSSに関する記事はこちら!

プラグインでCSS追加

スポンサーリンク

コメントを残す

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

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • 具体的なエラー画面などがある場合は画像を添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)