WordPressに「トップへ戻る」ボタンを追加する方法（Kadenceテーマ） Β

Googleランキングを考えるうえで、最も基本的な要素の一つは、サイトやブログが快適なユーザー体験を提供できているかどうかです。今回は、その体験を高めるシンプルで効果的な機能である「トップへ戻る」ボタンを追加する方法を見ていきます。

なぜ「トップへ戻る」ボタンを追加するのか？

長い記事を最後まで読んだあと、記事の前半をもう一度確認したくなったことはありませんか。そのとき、マウスホイールを急いで上へ回し続けることになります。特に長いコンテンツでは、かなり面倒で非効率です。

そこで役立つのが、このブログの右下にも表示される上向き矢印のようなトップへ戻るボタンです。読者がワンクリックでページ上部に戻れるため、ユーザー体験を大きく改善できます。

WordPressのKadenceテーマでは、カスタマイズ機能を使って「トップへ戻る」ボタンをとても簡単に追加できます。

まず、次の場所へ移動します。
外観 > カスタマイズ > 一般 > Scroll To Top

次の画面で、ページ上部にある「Enable Scroll To Top」オプションをオンにするだけで完了です。

トップへ戻るボタンは、初期設定ではPCとタブレットで表示されます。セクション下部には、下のようなVisibility設定があります。

モバイル環境でも表示したい場合は、一番右のスマートフォンアイコンをクリックして有効化します。

多くの場合は初期設定のままで十分ですが、ボタンの動きや見た目を細かく調整したい場合は、下のオプションを使えます。

上の画像をクリックすると、より詳しく確認できます。各項目を順番に見ていきましょう。

トップへ戻るアイコンボタンの形を4種類から選べます。
トップへ戻るボタンのサイズをPC、タブレット、モバイルごとに変えられます。
- 画像の2番目のボックスを見てください。左から順番にPC、タブレット、モバイルをクリックし、それぞれ最適なサイズを設定します。
- トップへ戻るボタンの画面上の位置を調整できます。
トップへ戻るボタンの画面位置を調整できます。
- Side Offsetでは、右端または左端からどれだけ離すかを決めます。
- Bottom Offsetでは、画面下部からどれだけ離すかを決めます。

AdSenseアンカー広告を使っている場合は、トップへ戻るボタンの配置に特に注意してください。位置が重なると、サイトのUXと広告パフォーマンスの両方に悪影響が出る可能性があります。

参考までに、現在WPlaybookで使っている設定は次のとおりです。

今回は、Kadence WordPressテーマで「トップへ戻る」ボタンを追加し、カスタマイズする方法を見てきました。
WordPressサイトをカスタマイズする他の方法が気になる方は、さらに多くのヒントとチュートリアルをまとめたWordPressカスタマイズ集も確認してみてください。