WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorメニューアンカー 【完全マニュアル】

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
menu_anchor_thumbnail

menu_anker

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

 

 

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

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

ma_content

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

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

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

設定は以上です。

おじさん
おじさん
え?わざわざ解説しなくても・・・

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

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

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

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

menuanker_link

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

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

おじさん
おじさん
べつに難しくないし・・・

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

メニューアンカーの配置

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

ma_edit

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

ma_preview

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

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

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

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

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

ma_chosetsu

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

すると?!

ma_niceposition

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

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

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

(応用編)外から飛び込みたい!

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

おじさん
おじさん
無いです。

またまたぁ〜あるでしょ?!(笑)

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

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

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

これだけでOKです。

おじさん
おじさん
メモメモ_φ(・_・

あのぉ・・・

 

まとめ

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

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

 

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

ElementorPro購入 完全ガイド

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

Elementor公式サイト

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。