Elementorリンク設定の注意点

Webサイト制作の要(かなめ)とも言える「リンク設定」。
Elementorはコードを書かずに直感的にリンクを貼れるのが魅力ですが、実は「やってはいけない設定」があります。これを知らないと、うまくリンク先に飛ばなかったり、レイアウト崩れの原因になったりすることも…。今回は特に注意したいリンク設定ポイントをご紹介します。


注意点1!リンクの二重設定

前の記事でもご紹介したように、Elementorのセクション・カラム・コンテナには、リンクを設定する機能があります。カード型デザインなどで、ボックス全体をクリックさせたい時に非常に便利です。

しかし、ここで最もやってはいけないミスがあります。それは、「リンクを設定したカードの中に、さらにリンク付きのウィジェット(ボタンなど)を入れてしまう」ことです。




具体的には、セクション全体にリンクを設定。その中のボタンウィジェットにもリンクを設定するということです。
HTMLのルール上、タグの中にタグを入れることは禁止されています。 これを行うと、ブラウザの表示が崩れたり、リンクが反応しなくなったり、Googleからの評価が下がったりするおそれがあります。
セクションなど大きなブロックにリンクを貼りたいときには、中にあるボタンウィジェット等のリンクは空(なし)にしましょう。中のボタンはあくまで「クリックできそうに見えるデザイン」として配置するだけでOKです。


また、セクションでなくとも、ボタンなどの [コンテンツ] タブのリンクと、Wrapper Linkの両方にリンクを入力してしまうといった同じウィジェットの中でリンクが二重になることもないよう、注意が必要です。この場合も必ずどちらか一方のみにしましょう。


注意点2!新しいタブで開く設定

別サイトへのリンクや、PDFファイルを開く際、「新しいタブで開く(target=”_blank”)」設定にしたいことがよくあります。Elementorのリンク入力欄の横にある歯車アイコン(リンクオプション)をクリックすると、設定項目が表示されます。「新しいウィンドウで開く」をチェックを入れることで設定できます。



外部サイトに飛ぶ時には新タブが基本です。複数の情報を並べて比較したり、元のページに戻りながら他のページを見たいときに、いちいち「戻る」ボタンを押す手間が省けて便利で、一番の目的は制作したサイトに戻ってきてもらいやすくするという点が大きいかと思います。

 


次回:アンカーリンクの設定について

recent post

Googleマップの埋め込み方

ただの線じゃない!「区切り」のテクニック

【図形装飾】スペーサーで作るアクセント線・カラーブロック

わざわざカラムを分ける必要なし!テキストの「段組み(カラム分割)」機能

スクロールで背景が動く!プロっぽい「パララックス(視差効果)」の作り方(後編)(※Elementor Pro)

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901