「料金を見る」などのリンクから、同じページの指定した位置へ移動できます。
このページでできること
ページ内の指定位置へ移動させる
ページ内の指定位置へ移動させる
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「メニューアンカー」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「メニューアンカー」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
IDに使う文字は半角英数字・ハイフン・アンダースコアで揃えると分かりやすくなります。別ページからは「ページのURL#price」の形でリンクします。
② 移動先の目印を付ける
赤い番号は手順の番号に対応しています。
- 移動先にしたい見出しの直前へ「メニューアンカー」を置きます。
- 「メニューアンカーの ID。」へ「price」などの英数字を入力します。ここには # を付けません。
- 移動元のボタンや文字リンクのリンク先に「#price」を入力します。
- プレビューでリンクを押し、目的の場所まで移動するか確認します。
ここを確認：ボタンを押すと目的の見出しへ移動する。
③ 見た目と表示を確認する
- アンカー自体は公開ページに見せる文章やボタンではなく、移動先の目印です。
- 同じページで同じIDを複数使わないようにします。
- 固定ヘッダーで見出しが隠れる場合は、アンカーの位置や上の余白を調整します。
入力・使い方の例
移動先のID：price ／ ボタンのリンク：#price
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- ボタンを押すと目的の見出しへ移動する。
- スマホでも見出しがヘッダーに隠れない。
うまくいかないとき
押しても移動しない
IDとリンクの綴りが一致しているか、ID欄に # を入れていないか確認します。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。