Webの記録

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

投稿日:

この記事は約 3 分で読めます。

よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。

そこで今回は、Wordpressのプラグイン「Dynamic To Top」を使ってみることにしました。

特徴

  • ソースコードをいじる事なく、簡単に設置が出来る
  • 色、カタチ、設置位置、動きなどを自由に設定画面でカスタマイズが出来る
  • 投稿・固定・個別ページでの表示が可能。(home.phpでは表示が出ませんでした)

設置方法

プラグインサイトより、「Dynamic To Top」をインストールし、有効化にする。

ダッシュボードの左側のメニュー「外観」から、「To Top」を選択すると、設定画面が出てきます。


 

設定画面でお好みに設定します。最後に「Save Changes」で保存。設定完了です!

設定画面の説明
  1. Scroll time:スクロールアップのタイムの設定
  2. Fade-in distance:トップからボタンが表示されるまでの距離。pxで設定
  3. Easing:ボタンをクリックした時の動き方
  4. Position:ボタンの位置
  5. Prevent on mobile:モバイルサイトで無効にする時は「Yes」にチェック。<br/>
    ※「Preview over black, grey or white.」:プレビュー用のボタンの背景を黒・グレー・白になる
  6. Text version:ボタンにテキストを入れたい場合は「Yes」にチェック
  7. Button text:表示させたいテキストを入力
  8. Top/bottom padding:ボタンの縦幅の調整
  9. Sides padding:ボタンの横幅の調整
  10. Font size:フォントサイズ
  11. Text color:テキストの色
  12. Bold Text:テキストを太字にする時は「Yes」にチェック
  13. Text shadow:テキストに影を付ける時は「Yes」にチェック
  14. Text shadow color:テキストの影の色
  15. Background color:ボタンの色
  16. Border color:ボタンのボーダー色
  17. Border width:ボタンのボーダー幅
  18. Border radius:ボタンの角丸設定
  19. Inset highlighting:ボタンのハイライト
  20. Shadow:ボタンの影

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

Evernote Site Memoryボタンを付けてみた♪

この記事は約 1 分で読めます。日頃、いろいろな情報をEvernoteにまとめています。 使い始めるとホントに便利で、無くてはならない存在になっています。 ・・・で、Evernoteで便利な方法はない …

no image

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …

no image

WordPressプラグイン「NIVO slider light」でリッチなスライドショー簡単設置

この記事は約 1 分で読めます。 以前「jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪」で、「jquery.nivo.slider.js」というjQueryライ …

no image

レスポンシブに便利!様々な端末サイズでの見え方を確認できる「Viewport Resizer」

この記事は約 1 分で読めます。 レスポンシブサイトを制作途中、いろんな端末サイズでちょっと見え方を確認をします。 最終的にはやっぱり実機での確認なんですが・・・コーディング途中ではやっぱり手軽に確認 …