プラグイン名 jcwp scroll to top
トップへ戻るのプラグインと言えばわかりますね。その中でもかなり優秀なトップへ戻るのプラグインです。
インストール手順
プラグイン > 新規追加 > jcwp scroll to top > プラグインを検索 > いますぐインストール > プラグインを有効化
設定
設定 > jcwp scroll to top
- Enable
トップへ戻るボタンの表示・非表示 - Animation Duration
戻る速度 - Show when scroll at
ボタンが現れるスクロール量 - Show Element ID
スタイルシート(CSS)で編集するときに使うid属性 - Element Z-index
このままでOK - Easing type
戻るときのアクション - Position
ボタンの位置 - Text to display
ボタンに表示される文字 - Backgroud Color
ボタンの背景色 - Font Color
ボタンに表示されるテキストの色 - Font Size
ボタンに表示されるテキストのサイズ - Font family
ボタンに表示されるテキストのフォント - Text Padding
ボタンに表示されるテキストから淵までの間隔 - Container Width
ボタンの幅 - Container Border Colour
ボタン外側のラインの色 - Container Border Radius
ボタンの角の丸み - Callback Function
トップへ戻った後、呼び出したい関数 - Disable on
> Mobile Phones
チェックを入れるとトップへ戻るボタンをスマートフォン端末で非表示
> Tablets
チェックを入れるとトップへ戻るボタンをタブレット端末で非表示 - Link to authors website
チェックを入れるとプラグイン制作者のリンクが貼られます。
スタイルシートを触らなくても、WordPress上ですべて設定できるので便利ですが、更に細かくデザインしたい場合は、編集したい箇所に何か適当に「/」でも入力しておいて、自サイトのスタイルシートに#jcScrollTopを追加し、それを自由に編集すればいいかと思います。
例)背景を黒の透過PNG画像にし、ボーダーを消してみました。
Background ColorとContainer Border Colourに「/」を記入し、メインのスタイルシートで制御します。
背景素材 黒の透過PNG back50.png
スタイルシートに↓を追加
1 2 3 4 5 6 7 8 9 10 11 |
#jcScrollTop { background-image: url(../../../images/back50.png); border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #jcScrollTop:hover { background-color: #666; } |
コメントを残す