絞れば、出てくる、アイディア。

【Elementor】同じページ内の指定した箇所に自動でスクロールさせる設定

【Elementor】同じページ内の指定した箇所に自動でスクロールさせる設定

Elementorで、同じページ内の指定した箇所に自動でスクロールするように設定する方法を紹介します。
この設定は、「メニューアンカー」と呼ばれ、「#」を使用して、アンカー(=錨)で同じページ内のリンクを設定しすることができます。

↓このボタンを押すと、この記事の最後に飛ぶことができます。この設定方法を紹介します!

1. Elementorのウィジェット「メニューアンカー」を設置する

↑まず、Elementor編集画面左側の「要素」から「メニューアンカー」を選択します。
見つからない場合は、上部の「ウィジェットの検索」に「メニュー」と入れると出てきます。

メニューアンカーを、同じページ内のスクロールさせたい箇所に挿入します。 今回は、ページの最下部、《まとめ》の上に自動でスクロールさせたいので、その上にドラッグ&ドロップで挿入します。

メニューアンカーを、同じページ内のスクロールさせたい箇所に挿入します。

今回は、ページの最下部、《まとめ》の上に自動でスクロールさせたいので、その上にドラッグ&ドロップで挿入します。

メニューアンカーを選択した状態にすると、「メニューアンカーを編集」の画面が左側に表示されます。そこで、「メニューアンカーのID」を設定します。今回は、アルファベットで「matome」とします。

メニューアンカーを選択した状態にすると、「メニューアンカーを編集」の画面が左側に表示されます。

そこで、「メニューアンカーのID」を設定します。※日本語は使えないので、アルファベットか数字で設定します。
今回は、アルファベットで「matome」とします。

ここまでで、「メニューアンカー」自体の設定は完了です!

2. ボタンを設置して、リンク先を設定する

Elementor編集画面左側の「要素」から「ボタン」を選択します。

Elementor編集画面左側の「要素」から「ボタン」を選択します。
ボタンを挿入したい箇所に、ドラッグ&ドロップで挿入します。

「リンク」の箇所に、先ほど作ったメニューアンカーのID「matome」を入力します。 この時に、必ず「#」をつけます。

「ボタン」を選択した状態にすると、「ボタンを編集」の画面が左側に表示されます。

「リンク」の箇所に、先ほど作ったメニューアンカーのID「matome」を入力します。
この時に、必ず「#」をつけます。

ボタンをクリックすると、ページ最下部の「まとめ」までビューーンと勝手にスクロールする機能が設定できました!!

《まとめ》

今回の記事では、Elementorのウィジェット「メニューアンカー」を使って、同じページ内で勝手に指定した場所までスクロールさせる設定の方法を紹介しました。

ページのボリュームや情報量が多い時は、ページ上部のボタン一つでユーザーが求めている情報の箇所まで飛ばす事ができるので、ユーザーにスクロールさせる事もなく便利です。

weblemonの記事でも、この「メニューアンカー」機能を多用しています。
ぜひ、役立ててみてください👍