Google chrome（グーグル ク...
続きを読む
Elementorで、同じページ内の指定した箇所に自動でスクロールするように設定する方法を紹介します。
この設定は、「メニューアンカー」と呼ばれ、「＃」を使用して、アンカー（＝錨）で同じページ内のリンクを設定しすることができます。
↓このボタンを押すと、この記事の最後に飛ぶことができます。この設定方法を紹介します！
↑まず、Elementor編集画面左側の「要素」から「メニューアンカー」を選択します。
見つからない場合は、上部の「ウィジェットの検索」に「メニュー」と入れると出てきます。
↑メニューアンカーを、同じページ内のスクロールさせたい箇所に挿入します。
今回は、ページの最下部、《まとめ》の上に自動でスクロールさせたいので、その上にドラッグ＆ドロップで挿入します。
↑メニューアンカーを選択した状態にすると、「メニューアンカーを編集」の画面が左側に表示されます。
そこで、「メニューアンカーのID」を設定します。※日本語は使えないので、アルファベットか数字で設定します。
今回は、アルファベットで「matome」とします。
ここまでで、「メニューアンカー」自体の設定は完了です！
↑Elementor編集画面左側の「要素」から「ボタン」を選択します。
ボタンを挿入したい箇所に、ドラッグ＆ドロップで挿入します。
↑「ボタン」を選択した状態にすると、「ボタンを編集」の画面が左側に表示されます。
「リンク」の箇所に、先ほど作ったメニューアンカーのID「matome」を入力します。
この時に、必ず「＃」をつけます。
ボタンをクリックすると、ページ最下部の「まとめ」までビューーンと勝手にスクロールする機能が設定できました！！
今回の記事では、Elementorのウィジェット「メニューアンカー」を使って、同じページ内で勝手に指定した場所までスクロールさせる設定の方法を紹介しました。
ページのボリュームや情報量が多い時は、ページ上部のボタン一つでユーザーが求めている情報の箇所まで飛ばす事ができるので、ユーザーにスクロールさせる事もなく便利です。
weblemonの記事でも、この「メニューアンカー」機能を多用しています。
ぜひ、役立ててみてください👍
2024-10-16
Wednesday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
記事の検索数やGoogleにインデックス...
続きを読む
