ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

「ページの先頭に戻るボタン」が超簡単に設置出来るWordPressプラグイン

約 6 分

今回紹介するのはサイトの右下なんかにある、見慣れたボタンなんでなんとなく皆さんご存知だと思いますが、ページの先頭に「サァーーー」って戻ってくれるあのボタンです。

アレがWordPressであれば【 Scroll Back To Top 】っていうプラグイン1つで超簡単に設置できちゃいます。

インストールから設置まで5分かかりません。

導入していない方は、この機会に是非インストールしてみてはいかがでしょうか?

【 Scroll Back To Top 】のインストール

まずは、WordPressのダッシュボードテーマの中にある「プラグイン」⇒「新規追加」 を選びます。

Scroll Back To Top

画面が切り替わったら、右上の「検索ボックス」に「 Scroll Back To Top 」と入力

Scroll Back To Top

↑ ↑ のようなプラグインが出てきます。ここで「今すぐインストール」を押して「有効化」まですませてください。

Scroll Back To Top

Scroll Back To Top

インストールは以上になります。続いて設定していきしましょう。

【 Scroll Back To Top 】の設定

プラグインの有効化をしたあとは、なにもしなくてもデフォルト設定のボタンが表示されます。

Scroll Back To Top

この初期設定のままでも十分使えます。ただ、自分の好きな色や「トップへ戻る」などの文字を表示させたい方はこのままお読み下さい。

設定画面へ

ダッシュボードメニューの「設定」⇒「Scroll Back To Top」をクリックしてください。

Scroll Back To Top

すると、このような画面になったと思います。

Scroll Back To Top

上から順に詳しく説明します。

Status

ここでは、ボタンの表示設定ができます。
特別な理由がない限り、初期の「Pubicity Visible」で問題ありません。

設定出来る内容はコチラです

  • Pubicity Visible⇒ボタンを表示する
  • Preview Mode⇒プレビュー画面でのみ表示する
  • Disabled⇒表示しない

Button Appearance

ここでは、ボタンのサイズや色の調整ができます。

Scroll Back To Top

設定出来る内容はコチラです。

  • width⇒横幅
  • Height⇒高さ
  • Background Color⇒ボタンの色
  • Background Hover Color⇒マウスをのせた時のボタンの色
  • Foreground Color⇒文字の色
  • Foreground Hover Color*⇒マウスを載せた時の文字の色
  • Opacity*⇒透明度
  • Border Radius*⇒ボタンを囲む線の太さ

Button Location

ココでは、ボタンの位置調整ができます。

Scroll Back To Top

設定出来る内容はコチラです。

  • Horizontal Alignment*⇒横位置
  • Vertical Alignment*⇒縦位置
  • Horizontal Distance from Edge*⇒ブラウザーの端からの位置(横)
  • Vertical Distance from Edge*⇒ブラウザーの端からの郷里(縦)

お使いのカラム数によってボタンの位置を変えてください。僕のように2カラム右のレイアウトであれば右下にボタンを配置するのがオススメです。

Button Label

ここではボタンの装飾ができます。

Scroll Back To Top

設定出来る内容はコチラです。

  • Label Type*⇒表示させたい好きなアイコンを選択。
    文字を表示させたい人はcustom textを選択
  • Icon Size⇒アイコンを選んだ方はココでアイコンのサイズを選べます。
    数字が大きくなるほど大きくなります。
  • Custom Label Text⇒custom testを選んだ人はココで表示させたい文字を入力
  • Font Size⇒CustomTextを選んだ人は文字のサイズを指定

Animation Options

ここでは、ボタンの動き(アニメーション)を設定できます。

Scroll Back To Top

設定出来る内容はコチラです。

  • Scroll Duration*⇒上に戻るスピードを変更できます。
    数字が小さいほど早く戻ります。
  • Visibility Duration*ボタンの表示時間「0」は常時表示されます
  • Fade Duration*⇒ボタンが消えるまでの時間(数字が小さくなると早く消えます。
  • Advanced Options⇒CSSを使ってさらにボタンんを装飾したり色々できます。

※Scroll Duration*が初期の状態だと結構ゆっくりなので、ココは変えたほうがいいかもしれません。僕は、こちらのスピードを「100」にしています。

お疲れ様でした。設定は以上になります。

まとめ

結構簡単に設置出来る割には、訪問者さんには喜ばれるボタンだと思います。是非、色々自分で設定してみて最高の上へ戻るボタンを設置して下さい。

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

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

オススメ記事