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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress 「IE6 No More」プラグインでアラートを表示させてみた。

この記事は約 1 分で読めます。 IE6ブラウザで見た時だけ、バージョンアップを案内する表示をさせたいと思います。 幾つかWordpressのプラグインで見つけたのですが、表示が上手くいかないものもあ …

no image

WordPressプラグイン「Audio Player」でMP3音源を簡単に再生してみた

この記事は約 1 分で読めます。 WordPressでMP3オーディオプレーヤーを表示させてくれるプラグイン「Audio Player」を試してみました。 「Audio Player」は、Flashで …

no image

WordPress ナゾのスマイルマーク

この記事は約 1 分で読めます。 あんまり気にしてなかったんだけれど、フッターの下にとても小さなナゾのスマイルマークがありました。 今回、オリジナルテーマを作成していて・・・何となくフッターの下にのぞ …

no image

WordPress 「wp_head」を入れて上部に隙間ができた時

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作っていて、「wp_head();」を入れた途端・・・ブラウザ上部に28pxの隙間が出来る現象が起きました。 ブラウザによっては …

no image

Worepress 前後の記事へリンクをつけたい時。

この記事は約 1 分で読めます。 記事の下に「古い記事へ」「新しい記事へ」という前後の記事へのリンクを表示しています。 単純に投稿順で前後の記事へリンクをさせるのか、または開いている記事と同じカテゴリ …