2020年09月08日

-Elementor-ページ内リンクを設定しよう!

こんにちは、SeekNextの木谷です。今日はElementorでページ内リンク(アンカーリンク)のやり方をご紹介します!

実際に案件でクライアントに依頼をされ、「どうやってやるんだろう…」となった時に試行錯誤してたどり着きました。

アンカーリンクとは

「アンカーリンク」と似た単語として「ハイパーリンク」がありますが、どちらもクリックするとどこかに飛ぶ意味では同じものの、

・ハイパーリンクはどこにでも飛べるどこでもドア

・アンカーリンクはホームページ上のどこかに行けるドア

的なイメージです。

アンカーリンクのメリットとしては、

・回遊率が長くなる

・ユーザーが求める情報にたどり着きやすい

ことが挙げられます。

Elementorでアンカーリンクを埋め込む

メニューアンカーウィジェット(Menu Anchor)を使用します。

ここにあるので、これを飛ばしたいところに挿入。

「メニューアンカーのID」にわかりやすいID名をつけます。ここではserviceとしています。

これで準備OK!

リンクを設定する方法(ボタン)

飛ばしたいボタンのリンク部分の編集をします。URLの部分に「#」と先ほど設定したIDを記載すればOKです。先ほどの例で言うと「#service」ですね。こんな感じになります。

リンクを設定する(ヘッダー)

ヘッダーにアンカーリンクを設定することも可能です。やり方も先ほどと同様。ただ、ヘッダーの場合はWordpress→外観→メニュー→カスタムURLからの設定となります。

先ほど同様、URLには「#service」を入力し、表示させたい通りに入力すれば設定完了です。

別のページから特定のアンカーリンクに飛ぶ方法

こちらは応用となりますが、外部のページからURLで飛ばした時にTOPではなくアンカーリンク部分に飛ぶ方法をご紹介します。こちらも簡単で、下記の通り当てはめると設定完了!

【飛ばしたいURL /「#メニューアンカーのID」】

飛ばしたいURLには「http://〜」が入ります。それに「/#メニューアンカーID」をくっつけるだけでOK。

ページ遷移があまり必要のないHPであればアンカーリンクを使うと便利です!

HPの下の方に行った時に「TOPに戻る」みたいなボタンがありますが、これも、この方法で設定できます!

実際に設定してみると少し感動するのでぜひ試してみてくださいー!