Elementorメニューアンカー はランディングページや、長めのページの一部分を指定してリンクを貼る為、ターゲットとなる目印となるウィジェットです。

このウィジェットを使いこなす事で、今流行りの縦長サイトのメニューも簡単につくれます。では早速使い方を見てみましょう！

メニューアンカー設定項目

設定出来るのはアンカー内の「メニューアンカーのID」のみです。ここには、「大文字アルファベット、小文字アルファベット、0〜9の数字、アンダーバー（_)、ハイフン（-）」が入力出来ます。

ここで設定したIDはリンクURLの様なものとなるので、表示されるコンテンツに関連づいた名前が良いかと思います。

詳細タブについは、他のウィジェットと同様の設定が可能ですが・・・このウィジェットは表立って見える物ではありませんので、デフォルトのままが良いかと思います。

設定は以上です。

おじさん

え？わざわざ解説しなくても・・・

まぁまぁ、焦らないで下さい。ちょっとむずかしいのはこの後です。

メニューアンカーへ飛ばす方法

リンクのターゲットとなるメニューアンカーの設定はOKですが、今度は飛ばす為の設定が必要となります。

下の画像は見出しウィジェット「service」に対し、メニューアンカーへリンクしている設定です。

設定はリンクへ入力します。先程のメニューアンカーウィジェットで決めたIDに#（シャープ）を付けて入力します。

これだけで、見出しウィジェット（service）をクリックすると、Serviceというコンテンツにスライド（ジャンプ）します。

おじさん

べつに難しくないし・・・

ですね。問題は飛び先の位置なんです。結構思う様に飛ばなくて・・・

メニューアンカーの配置

まず、こちらをご覧下さい。

「Service」という見出しウィジェットのすぐ上にメニューアンカーウィジェットを配置すると・・・

見出しウィジェットの「Service」が画面一番上に来る表示となります。

おじさん

別にええやん。一番上に来てもええやん。

おっしゃるとおり、構わないんですが、なんか窮屈というか・・・デザイン的に露骨に飛びました感というか・・・。

ここで分かったのが、「メニューアンカーウィジェットの底辺が画面の一番上に来るようにジャンプする」という事です。

これを逆手にとって・・・

今回は見出しウィジェットのマージンでメニューアンカーとの隙間を取りましたが、やり方は何でもOKです。

すると？！

程よく画面枠との距離が取れます。

なるほど！確かに画面枠ギリギリに表示されるのはね。

おじさん

ちょっとした手間が、見やすくなったりしますね。

（応用編）外から飛び込みたい！

これだけで十分メニューアンカーは使えると思いますが、更に応用編として外部から指定の場所に飛ばしたい時ってありませんか？

おじさん

無いです。

またまたぁ〜あるでしょ？！（笑）

別のページからメニューアンカーめがけてジャンプ！

まず、飛ばしたい場所のページのURLに飛ばしたいメニューアンカーのIDをリンクに設定してあげる事で、簡単に設定出来ます。

http://（飛ばしたいページのURL）/ #（メニューアンカーID）

これだけでOKです。

おじさん

メモメモ_φ(･_･

あのぉ・・・

まとめ

いかがでしたでしょうか？特にElementor無料版にはメニューウィジェットが無い為、メニューアンカーで擬似的メニューを作ってあげるのも良いかもしれません。

飛んで表示される位置にも気を使ってあげる事で、素人ぽさを消せるのではないかと思います。是非ご活用してみて下さい！

Pro版のメニュー機能捨てがたい・・・Pro版の購入はこちらの記事を参考に。

ElementorPro購入 完全ガイド

いやいや、今すぐPro版を購入！という方はこちら

Elementor公式サイト