A "トップに戻る"ボタンは、どんな長いページにも追加できる優れた機能です。ユーザーに素早くトップに戻る方法を提供し、ナビゲーションをよりアクセスしやすく、ユーザーフレンドリーにします。このガイドでは、Elementorで "Scroll to Top "ボタンを作成する方法を説明します、 プラグイン不要そして、それをウェブサイト全体に適用することで、ルック＆フィールの一貫性を保つことができます。
Elementorでグローバルボタンテンプレートを設定します。
新しいテンプレートの作成から始めます：
- WordPressのダッシュボードで、"テンプレート"> "新規追加."
- 選択 “Single Page” from the dropdown menu as the template type. Name it something like “トップへスクロールボタン“.
- クリック "テンプレートの作成"でElementorエディタを開きます。
- 図書館を出る: Click the “X” at the top-right corner to close the template library.
ボタンの追加とカスタマイズ
- をドラッグします。ボタン"ウィジェットをサイドバーからテンプレートに追加します。
- ボタンのテキストを「Scroll to Top」に変更するか、上向きの矢印アイコンを使用してください。
- アイコンギャラリーに移動し、上矢印を選択します。 アイコン.
- 別のボタンを選択 タイプ を削除します。 テキスト.
- をご覧ください。スタイル"タブをクリックし、サイトのスタイルに合うように背景色、フォント、ボーダー半径を設定します。丸いボタンで、対照的な色を使うと見やすくなります。
ボタンスタイルの変更
- 角丸の使用
- をご覧ください。 スタイル タブをクリックします。
- を設定します。 ボーダー半径 を10%に追加して、完全な丸いボタンを作成します。
- を変更します。 パディング 値を使用して、要素内部の間隔を調整します。これは、コンテンツと element’s borders.
- シャドウ効果の追加
- での ボックスシャドウ 設定（通常は スタイル > ボーダー)、微妙な影を付けて奥行きを出します。などの設定を使います：
- ぼかし: 10px
- スプレッド：0px
- 色：ソフトな影をつけるために、ライトグレーか透明感のある黒を選んでください。
- 対照的な配色を選びましょう
- Use colors that contrast with your website’s background. For example, if your background is light, opt for a bold color like blue, orange, or green.
- アイコンの色は、白またはボタンの背景に対して目立つ色にしてください。
- ホバー効果の追加
- での ホバー の設定は スタイル タブをクリックします：
- を変更します。 背景色 をクリックすると、ボタンの色の濃淡に切り替わります。
- ホバーアニメーション アニメーションやトランジションのスピードをコントロールできます。
- での ホバー の設定は スタイル タブをクリックします：
- パルスアニメーションの追加（オプション）
- での アドバンス タブで カスタムCSS (で利用可能です。 エレメンタル・プロ)、パルスアニメーションを追加します：
- 交換
#yourButtonIDをボタンのIDで指定します。こうすることで、ボタンが微妙に大きくなったり小さくなったりして、注目されるようになります。
50% { transform: scale(1.05); } } 500% { transform: scale(1); } } 50%}#yourButtonID { animation: pulse 2s infinite; }.
このコードは パルスアニメーション効果 を指定されたボタンに合わせます。ボタンが滑らかに少し大きくなり、2秒かけて元の大きさに戻り、これを連続的に繰り返します。この効果により、ボタンが注目され、ユーザーの目に留まりやすくなります。
ボタンを固定します：
- の中で"アドバンス「タブの "ポジショニング、" 選ぶ "固定."
- ボタンを右下に配置します。 20px 両側から余白を取ることで、ユーザーがスクロールしてもそのまま表示されます。
- クリック "出版". Set the display conditions to “すべてのページ” This will ensure the button is displayed on every page, providing a consistent user experience.
ページ上部にアンカーを追加
- Elementorでページを開きます。:
- WordPressのダッシュボードに移動し、次の場所に移動します。 ページ または 投稿をクリックし、編集したいページを選択します。
- クリック Elementorで編集 をクリックして、Elementorエディタでページを開きます。
- トップ・エレメントの選択:
- Choose an element near the top of the page where you want users to be directed when they click the “Scroll to Top” button. This is typically the ヘッダー セクション タイトルまたは 前段 ページの
- 要素をクリックして選択します。
- 詳細タブへ:
- 一番上の要素を選択した状態で アドバンス タブをクリックします。
- CSS IDの設定:
- を探します。 CSS ID フィールドの アドバンス タブ
- 単語を入力
トップ(など）。立ち上がり).
- 変更を保存:
- CSS IDを設定したら 更新 をクリックして、ページの変更を保存します。
重要な注意事項
- Make sure the CSS ID you entered matches the one in your “Scroll to Top” button’s リンク.例えば、CSS ID を
トップボタンのリンクは#top.
ボタンのアンカーを追加します：
- Elementorで任意のページを開き、一番上の要素（見出しやセクションなど）をクリックします。
- ボタンリンクを設定します。で リンク フィールドに
#top(を必ず含めてください。#記号）。
- 結果は続きをお読みください。
結論
Adding a “Scroll to Top” button in Elementor is a straightforward way to improve user experience on longer pages by allowing easy navigation back to the top. By creating a global button template, you ensure a consistent appearance across your entire site. The process includes designing the button, setting custom styles like rounded corners and shadow effects, and optionally adding animations like a pulse effect for added visibility.
Once the button is designed, you can fix it in place using the “Fixed” positioning and ensure it appears on all pages through display conditions. Additionally, by setting a CSS ID at the top of each page (such as “top”) and linking the button to this anchor (#top)をクリックすると、ユーザーは素早くページのトップにスクロールして戻ることができます。
よくある質問
1.なぜ "Scroll to Top "ボタンを追加する必要があるのですか？
このボタンは、特に長いページで、ユーザーをスクロールの手間を省きます。トップページに素早く戻ることができ、サイトのナビゲーションを容易にします。
2.ボタンにアニメーション効果を追加できますか？
もちろんです！Elementorのモーションエフェクトを使えば、バウンスやスライドなどのアニメーションを追加して、より人目を引くボタンにすることができます。
3.このようなことができるプラグインはありますか？
はい、いくつかのプラグインは "Scroll to Top "ボタンを提供しています。しかし、カスタムコードで追加することで、余分なプラグインを必要とせず、サイトをより高速に保つことができます。