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」など、同様の機能を持つ無料のプラグインが多数存在しますので、そちらを検討することもできます。
利用前に、公式プラグインディレクトリなどで、提供元と料金体系を確認することをおすすめします。
Scroll Back To Top Buttonの使い方
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の注意点
「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;
}
デザインをカスタマイズする場合
色や形などを変更するコードを貼り付けます。具体的なコードは、インターネットで検索すると様々なデザインの例が見つかります。
例：ボタンの背景色と文字色を変更する場合
CSS
.bottomFooter__topBtn{
background-color: #00a568; /* 背景色 */
color: #ffffff; /* 文字・アイコン色 */
}
ご希望に合わせて調整してみてください。
口コミ・評価
検索結果から見ると、このプラグインは以下のような点で評価されているようです。
- 簡単さ・便利さ:
- HTMLやJavaScriptなどに詳しくない人にとっては、ページトップへ戻るボタンを設置するのに非常に便利なプラグインであるとされています。
- 設定も難しくないため、サイトに合わせた調整も比較的楽に行えるようです。
まとめると、「HTMLやコードの知識がなくても簡単にページトップへ戻るボタンを設置できる、便利なプラグイン」という評価が多いようです。
ただし、テーマをカスタマイズできる方や独自でテーマを作成している方にとっては、わざわざプラグインを使わなくても実装できる機能だという意見もあります。
プラグインが最小でも魅力的なウェブサイトが作成できる
WordPressの有料テーマは、プラグインに関して有利になる点がいくつかあります。
主に、多機能性や開発者による配慮により、プラグインの数を減らしたり、特定の機能での競合や相性を気にしなくて済むという利点があります。
■有料テーマがプラグインで有利な点
1. 独自機能の搭載によるプラグイン削減
多くの有料テーマは、以下のようなブログ運営やサイト制作に必要な機能をテーマ自体に標準搭載しています。
- SEO対策機能（構造化データ対応、メタタグ設定など）
- 高速化機能（キャッシュ機能、CSS/JS最適化など）
- 装飾機能（ボックス、ボタン、アコーディオンなどの独自ブロックやショートコード）
- 広告管理機能
- SNS連携機能
これらの機能がテーマに含まれているため、個別のプラグインをインストールする必要がなくなります。結果として、サイトの表示速度向上や管理の簡素化につながります。
2. 独自プラグインとの連携・互換性の保証
一部の有料テーマは、テーマ専用の公式プラグインを提供している場合があります。これは、テーマの機能をさらに拡張しつつ、テーマとの互換性が保証されているため、機能の競合や不具合のリスクを最小限に抑えられます。
3. プラグインとの競合が起こりにくい設計
有料テーマは、一般的に主要な人気プラグイン（例：SEOプラグイン、セキュリティプラグイン、フォームプラグインなど）との互換性を考慮して設計・開発されています。そのため、無料テーマと比較して、テーマ側の機能とプラグイン側の機能が干渉し合って不具合が発生するリスクが低い傾向にあります。
4. サポート体制の充実
有料テーマの多くは購入者向けのサポート（フォーラムやメールサポートなど）が充実しています。プラグインを導入した際に不具合が発生した場合でも、開発元に相談できるため、問題解決がスムーズに進むことが多いです。
注意点もあります
- 機能の重複: テーマに標準搭載されている機能と同等の機能を持つプラグインをインストールすると、機能が競合してサイトが不安定になったり、表示が崩れたりする可能性があります。有料テーマを使用する際は、テーマの標準機能とプラグインの機能が重複しないか確認が必要です。
- テーマ依存の機能: テーマに含まれる機能は、テーマを切り替えると使えなくなることがあります。特に独自ブロックやショートコードで作成した部分は、テーマ変更時にレイアウトが崩れやすいので注意が必要です。
| テーマ名 | 主な特徴・強み | 適したサイト |
| ザ・トール (THE THOR) | 国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援 | アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト |
| エマノン (Emanon) | Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium） | コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト |
| ストークSE (STORK SE) | 「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い | 商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ |
| リキッドプレス (LIQUID PRESS) | 用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能 | メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト |
補足情報
- ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
- エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
- ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
- リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。
