ページ最上部まで一気に戻るボタン「Dynamic To Top」の導入方法

長いページを読んでいる途中に、ページの最上部まで一気に戻るボタンがあると、便利だと思いませんか?

この記事では、WordPressのプラグイン「Dynamic To Top」を使って、ページ最上部まで戻るボタンを設置する方法について解説します。

Dynamic To Topのインストール・有効化

左側メニュー「プラグイン」⇒「新規追加」より、「プラグインを追加」画面を表示し、検索欄に「Dynamic To Top」と入力します。

「Dynamic To Top」が表示されたら、「今すぐインストール」をクリックします。完了すると「有効化」ボタンが表示されるので、クリックし有効化します。

有効化すると、プラグイン一覧に「Dynamic To Top」が表示されます。

設定

左側メニュー「外観」⇒「To Top」より、オプション設定画面を開きます。

ボタンの色、大きさ、丸み、スクロール速度などが設定できます。

各項目の説明は以下の通りです。

Scroll time ページ最上部まで戻る時間(ミリ秒)
Fade-in distance ボタンが表示されるまでの距離(ピクセル)
Easing ボタンのイージング(動き方)
Linear:同じ速さ
In:最後速くなる
Out:最後遅くなる
In Out:最初と最後が速い
Bounce:跳ね返る動き
Elastic:バネを離した時の往復するような動き
Position ボタンの位置
Top Left, Top Right, Bottom Left, Bottom Right どれか選択
Prevent on mobile モバイルで表示する場合は「yes」をチェック
Appearance ボタンの外観
Text version テキストで表示する場合はチェックし、テキストを入力する
Top/bottom padding ボタン上下のパディング
Sides padding ボタン左右のパディング
Background color ボタンの色
Border color 境界線の色
Border width 境界線の幅
Border radius ボタンの丸み
Inset highlignting 内側にハイライトを表示する場合は「yes」をチェック
Shadow ボタンに影を付ける場合は「yes」をチェック

各項目の設定が終わったら、「Save Changes」ボタンをクリックし、保存します。

これで、ページ最上部まで一気に戻るボタンが表示されます。

サイトを表示して、大きさ、色、そして形と動作を確認してみましょう。

まとめ

以上、WordPressのプラグイン「Dynamic To Top」を使って、ページ最上部まで一気に戻るボタンを導入する方法でした。

Previous postWordPressにお問い合わせフォームを設置する方法~プラグインContact Form 7の導入 Next postSEOを考慮したコンテンツ作成方法