プラグイン

HOME
WordPress
プラグイン
Scroll Back To Top Buttonはスクロールボタンを表示するプラグイン

2018年8月6日 / 最終更新日時 : 2025年11月27日エス・ティ・セブンプラグイン

Scroll Back To Top Buttonはスクロールボタンを表示するプラグイン

Scroll Back To Top Buttonとは

WordPressプラグイン「Scroll Back To Top Button」は、WordPressで作成されたウェブサイトに、ページトップへ戻るボタンを簡単に設置できるプラグインです。

長文のページや多くのコンテンツがあるサイトでは、ユーザーがページの最下部までスクロールした際に、ワンクリックでページの先頭に戻れる「ページトップへ戻る」ボタンがあると、ユーザーエクスペリエンスが大幅に向上します。

このプラグインを使うと、通常はウェブサイトの右下などに表示されるこのボタンを、プログラミングの知識がなくても手軽に導入・設定できます。

主な特徴としては、以下のような点が挙げられます。

簡単インストールと有効化: プラグインをインストールして有効化するだけで、すぐにボタンが表示されます。
軽量で高速: サイトの読み込み速度に大きな影響を与えずに動作します。
カスタマイズ性:
- ボタンの表示位置: 右下だけでなく、左右中央、上下など自由に配置できます。
- ボタンのデザイン: 形（四角、丸）、色（背景色、アイコン色、ホバー時の色）、サイズなどを変更できます。
- アイコンの種類: いくつかのSVGアイコンから選択したり、独自の画像を使用することもできます。
- スクロールの挙動: ボタンをクリックしたときのスクロールの速さや、ボタンの表示・非表示のタイミング（フェードイン・アウトなど）を設定できます。
デバイス対応: モバイルからデスクトップまで、あらゆるデバイスで表示され、レスポンシブデザインに対応しています。
テンプレートの修正不要: サイトのテンプレートファイルを直接編集する必要がありません。

このように、「Scroll Back To Top Button」プラグインは、ユーザーの利便性を高め、サイトの回遊率向上にも貢献する、非常に便利なツールと言えます。

利用数

WordPressプラグインの「Scroll Back To Top Button」は、正式名称が「Scroll Back To Top Button」または「Scroll Up Master」という名前で、有効インストール数が4,000以上です。

これは、WordPress.orgのプラグインページに記載されている情報に基づいています。

ただし、「Back To Top」機能を提供するプラグインには他にも多数あり、例えば:

「Smooth Back To Top Button」は30,000以上の有効インストール数
「WPFront Scroll Top」は100,000以上の有効インストール数

などがあります。

利用料

WordPressプラグイン「Scroll Back To Top Button」は、通常無料で提供されています。

WordPressの公式プラグインディレクトリで公開されている多くのプラグインと同様に、基本的な機能は無料で利用できます。

ただし、同種のプラグインの中には、Pro（有料）バージョンを提供し、より多くのデザインオプションや拡張機能を利用可能にしているものもあります。あなたが探している特定のプラグイン名で「Scroll Back To Top Button」というものが見つからない場合、「WPFront Scroll Top」など、同様の機能を持つ無料のプラグインが多数存在しますので、そちらを検討することもできます。

利用前に、公式プラグインディレクトリなどで、提供元と料金体系を確認することをおすすめします。

使い方

WordPressプラグイン「Scroll Back To Top Button」の使い方は以下の通りです。

1. プラグインのインストールと有効化

WordPressの管理画面にログインします。
左メニューの「プラグイン」から「新規追加」をクリックします。
検索窓に「Scroll Back To Top Button」と入力し、検索します。
「Scroll Back To Top Button」プラグインを見つけたら、「今すぐインストール」をクリックします。
インストールが完了したら、「有効化」をクリックします。

2. プラグインの設定

プラグインを有効化すると、通常は「設定」メニューに「Scroll Back To Top Button」という項目が追加されます。もし見当たらない場合は、「外観」メニューの中に設定項目が追加されていることもあります。

設定画面では、主に以下の項目を設定できます。

表示位置 (Position):
- Bottom Right (右下): デフォルトで最も一般的な位置です。
- Bottom Left (左下):
- Top Right (右上):
- Top Left (左上):
- Custom (カスタム): CSSを使って細かく位置を調整したい場合に使います。
表示条件 (Display Conditions):
- Always (常に表示): スクロールに関わらず常に表示されます。
- After certain scroll (特定のスクロール量で表示): ページをある程度スクロールした後にボタンが表示されるように設定できます。例えば、200pxスクロールしたら表示、など。
- Hide on specific pages/posts (特定のページ/投稿で非表示): 特定のページや投稿でボタンを表示したくない場合に設定します。
ボタンのデザイン (Button Design):
- Icon (アイコン): どのようなアイコンを表示するかを選択します。（矢印、家、フロッピーディスクなど）
- Background Color (背景色): ボタンの背景色を設定します。
- Icon Color (アイコン色): アイコンの色を設定します。
- Hover Background Color (ホバー時の背景色): マウスカーソルをボタンに合わせたときの背景色を設定します。
- Hover Icon Color (ホバー時のアイコン色): マウスカーソルをボタンに合わせたときのアイコン色を設定します。
- Size (サイズ): ボタンの大きさを設定します。
- Border Radius (角丸): ボタンの角の丸みを設定します。
- Padding (余白): ボタン内のアイコンと境界線の間の余白を設定します。
- Show Shadow (影を表示): ボタンに影を付けるかどうか。
アニメーション (Animation):
- Scroll Speed (スクロール速度): ボタンをクリックしたときに、ページがトップに戻る速度を設定します。
- Fade In/Out (フェードイン/アウト): ボタンが表示・非表示になる際のアニメーションを設定します。
その他 (Miscellaneous):
- Custom CSS (カスタムCSS): より詳細なデザイン調整を行いたい場合に、独自のCSSコードを記述できます。
- Disable on mobile (モバイルで無効にする): モバイルデバイスでボタンを非表示にしたい場合にチェックを入れます。

3. 設定の保存

各設定項目を変更したら、必ず一番下にある「変更を保存」または「Save Changes」ボタンをクリックして、設定を保存してください。

4. 動作確認

設定を保存したら、実際にウェブサイトにアクセスし、ページをスクロールして「Scroll Back To Top Button」が意図通りに表示され、機能するかどうかを確認してください。

一般的な使い方とヒント

表示位置: 一般的には「右下」に設定することが多いです。ユーザーが自然に目に留まる位置であり、他のコンテンツと干渉しにくいからです。
表示条件: 「After certain scroll」で、ある程度のスクロール量（例：200px～400px）を設定すると、ページ上部にいる際には邪魔にならず、スクロールしてコンテンツを読み進めた際に必要に応じて表示されるため、ユーザーエクスペリエンスが向上します。
デザイン: ウェブサイト全体のデザインに合わせて、ボタンの色や形を調整しましょう。サイトのテーマカラーに合わせるのがおすすめです。
モバイル対応: レスポンシブデザインのサイトでは、モバイルデバイスでの表示も確認し、必要に応じて「Disable on mobile」を検討してください。小さな画面でボタンが邪魔になる場合があります。

これらの手順とヒントを参考に、「Scroll Back To Top Button」プラグインを効果的に活用してください。

注意点

「Scroll Back To Top Button」は、ウェブサイトをスクロールした際にページのトップに戻るボタンを設置できる便利なプラグインです。多くのサイトで利用されており、ユーザーエクスペリエンスの向上に役立ちます。

しかし、利用する上でいくつかの注意点があります。

1. プラグインの選定と更新状況

「Scroll Back To Top Button」という名前のプラグインは複数存在します。例えば、WordPress公式ディレクトリには「Scroll Back To Top Button」という名前で有効インストール数が4,000+のプラグインや、「WPFront Scroll Top」（有効インストール数200,000+）、「Smooth Back To Top Button」（有効インストール数30,000+）など、似た機能を持つプラグインが多数あります。

開発の活発さ: 長期間更新されていないプラグインは、WordPress本体や他のプラグインとの互換性の問題、セキュリティ脆弱性が含まれる可能性があります。レビューや最終更新日を確認し、活発に開発・メンテナンスされているプラグインを選ぶようにしましょう。
レビューと評価: 他のユーザーのレビューや評価も参考に、問題がないか確認しましょう。

2. ユーザーエクスペリエンス（UX）への配慮

「トップに戻るボタン」は便利ですが、設置方法によってはユーザーの邪魔になることもあります。

目立つ場所に設置する: ユーザーが簡単に見つけられるように、通常は画面の右下や左下など、自然に目を向ける場所に配置するのが効果的です。
適切なサイズとデザイン: モバイルデバイスでの使用も考慮し、指で簡単にタップできるサイズに設定することが重要です。また、サイトのデザインに合わせた色や形を選ぶことで、サイト全体の統一感を保ち、ユーザーに違和感を与えません。
アニメーションの調整: スクロール時のアニメーションが過度だと、ユーザーに煩わしさを感じさせてしまうことがあります。スムーズで自然なアニメーションに設定しましょう。
表示条件の検討: 長いページでのみ表示させる、スクロール量に応じて表示させるなど、必要に応じて表示条件を設定することも検討しましょう。お問い合わせボタンや電話番号など、最重要項目にかぶらないように注意が必要です。

3. パフォーマンスへの影響

プラグインは、少なからずサイトの読み込み速度に影響を与える可能性があります。

軽量性: 可能であれば、軽量でサイトのパフォーマンスに与える影響が少ないプラグインを選ぶことが望ましいです。
競合: 他のJavaScriptを多用するプラグインやテーマとの競合が発生し、表示が崩れたり、機能しなくなったりする場合があります。導入後は、必ずサイト全体で動作確認を行いましょう。

4. 設定とカスタマイズ

多くの「Scroll Back To Top」プラグインは、管理画面からボタンの表示/非表示、サイズ、色、表示位置、表示するアイコン（矢印、テキストなど）などを細かく設定できます。

プレビューモードの活用: 設定変更を公開前に確認できるプレビューモードがあるプラグインでは、積極的に利用して表示を確認しましょう。
Custom CSS: プラグインの設定では対応できないデザイン調整を行いたい場合は、カスタムCSSを追加できるか、または自分でCSSを記述して調整する必要があるかを確認しましょう。

まとめ

WordPressプラグイン「Scroll Back To Top Button」は、適切に利用すればサイトのユーザビリティを向上させる有効なツールです。しかし、上記の注意点を踏まえ、自身のサイトに最適なプラグインを選び、ユーザー目線でデザインや設定を行うことが重要です。

これは、ページをスクロールして一番下まで行った際に、右下に表示されるボタンで、クリックするとページの最上部まで戻ることができます。

このボタンはデフォルトで表示されるため、特別な設定をしなくても利用できます。もしデザインをカスタマイズしたい場合は、「追加CSS」機能を使って色や形などを変更することも可能です。

「トップへ戻る」ボタンの非表示・カスタマイズ方法

もしこのボタンを非表示にしたり、デザインを変えたい場合は、以下の手順でCSSを編集します。

WordPressの管理画面から 「外観」 > 「カスタマイズ」 を開く
「追加CSS」 を選択
以下のCSSコードを貼り付けて、変更を適用する

非表示にする場合

CSS

.bottomFooter__topBtn{
  display:none! important;
}
Code language: CSS (css)

デザインをカスタマイズする場合

色や形などを変更するコードを貼り付けます。具体的なコードは、インターネットで検索すると様々なデザインの例が見つかります。

例：ボタンの背景色と文字色を変更する場合

CSS

.bottomFooter__topBtn{
  background-color: #00a568; /* 背景色 */
  color: #ffffff; /* 文字・アイコン色 */
}
Code language: CSS (css)

ご希望に合わせて調整してみてください。

口コミ・評価

検索結果から見ると、このプラグインは以下のような点で評価されているようです。

簡単さ・便利さ:
- HTMLやJavaScriptなどに詳しくない人にとっては、ページトップへ戻るボタンを設置するのに非常に便利なプラグインであるとされています。
- 設定も難しくないため、サイトに合わせた調整も比較的楽に行えるようです。

まとめると、「HTMLやコードの知識がなくても簡単にページトップへ戻るボタンを設置できる、便利なプラグイン」という評価が多いようです。

ただし、テーマをカスタマイズできる方や独自でテーマを作成している方にとっては、わざわざプラグインを使わなくても実装できる機能だという意見もあります。

プラグインを意識したレンタルサーバーの選び方

多くのプラグインを使う予定であれば、最初からWordPressに特化・最適化されているレンタルサーバーを選ぶのが最も確実で快適です。

WordPress適性ランキング表

順位	サーバー名	特徴・強み	弱み・注意点	WordPress適性
1位	ConoHa WING（コノハ）	高速表示・国内最速級、WordPress簡単セットアップ、独自ドメイン永久無料、初心者〜上級者まで幅広く対応	料金はやや高め	◎ 非常に適している
2位	KAGOYA（カゴヤ）	WordPress専用サーバー「KUSANAGI」搭載で超高速、法人利用率高く安定性抜群、セキュリティ強化	個人利用にはややオーバースペック、料金は中〜高	◎ 高速・安定志向に最適
3位	さくらレンタルサーバー	老舗で信頼性高い、料金安め、安定稼働、サポート充実	表示速度はConoHaやKAGOYAに劣る	○ 安定志向に適している
4位	LOLIPOP（ロリポップ）	初心者向け、料金安い、WordPress簡単インストール、利用者が多く情報豊富	高負荷サイトには不向き、速度は中程度	△ 個人ブログや小規模サイト向け
5位	リトルサーバー	月額150円〜と圧倒的低価格、WordPress全プラン対応、無料SSL・自動バックアップあり	容量・転送量が小規模向け、サポートはメール中心で即応性に不安	△ 趣味ブログや学習用に最適

解説

ConoHa WINGは「速さ・使いやすさ・機能」のバランスが最も良く、WordPress利用者に人気。
KAGOYAは法人やビジネスサイトに強く、KUSANAGIによる超高速化が魅力。速度重視なら最適。
さくらレンタルサーバは老舗で安心感があり、安定性重視の人におすすめ。
LOLIPOPは初心者向けで安価だが、速度や高負荷対応は弱め。
リトルサーバーは「とにかく安くWordPressを始めたい人」向け。小規模サイトや学習用に良いが、商用や大規模には不向き。

WordPressテーマ目的別比較表

WordPressテーマを選ぶにはデザインだけでなく、汎用性、アップデートの継続性、サポート体制、そして表示速度やSEO対策の強さといった要素を総合的に考慮することが重要です。目的にあった長く安心して使えるテーマを選ぶようにしたいものです。そこで、目的別に整理したWordPressテーマ比較表を以下にまとめました。各テーマの特徴や利用目的を簡潔に比較できるようにしています。

テーマ名	主な目的・特徴	適した用途
RE:DIVER（リダイバー）	高速表示・SEO最適化に強い。アフィリエイトや収益化を意識した設計。	アフィリエイトブログ、収益化重視の個人ブログ
GOLD BLOG（ゴールドブログ）	ブログ運営に特化。シンプルで使いやすく、初心者でも扱いやすい。	個人ブログ、情報発信サイト
THE THOR（ザ・トール）	SEO・デザイン・収益化機能を網羅したオールインワンテーマ。広告管理やランキング機能も搭載。	アフィリエイト、企業サイト、収益化ブログ
Emanon（エマノン）	ビジネス向けデザイン。企業サイトやサービス紹介に適したテーマ。	コーポレートサイト、サービス紹介ページ
LIQUID PRESS（リキッドプレス）	WordPress公式登録の国産テーマ。企業サイトからブログまで幅広く対応。初心者でも安心。	企業サイト、オウンドメディア、ブログ、LP
STORK SE（ストークSE）	モバイルファースト設計。1カラムデザインでコンテンツを際立たせる。直感的操作が可能。	ブログ、アフィリエイト、ブランディングサイト
GOLD MEDIA（ゴールドメディア）	メディア運営に特化。SEO内部構造が強力で、収益化や効率的な運営を支援。	WEBメディア、アフィリエイトサイト、企業サイト