Elementorアンカーリンク追加完全ガイド：ページ領域をジャンプさせる3つの簡単ステップ

ウェブデザインにおいて、スムーズなブラウジング体験を生み出すことは、訪問者の興味を引き、インタラクションを向上させる重要な方法のひとつです。アンカーリンクの追加は、この目標を達成するための便利なツールです。もしエレメンタそうすれば、アンカーリンクの追加はとても簡単になる。

アンカーリンクは、訪問者がボタンやリンクをクリックすることで、ページの特定のセクションに直接ジャンプできるようにします。このアプローチは時間を節約し、より多くのインタラクションとクリックスルー行動を促します。

このチュートリアルでは、Elementorでアンカーリンクを追加する方法をステップバイステップで詳しく説明します。ぜひお読みください。

ウェブページのアンカーリンクとは何ですか？

ウェブページにおけるアンカーリンクの原則

アンカーリンクは、訪問者が同じウェブページの特定のエリアにジャンプできるようにする特別なタイプのハイパーリンクです。簡単に言えば、アンカーリンクはボートのアンカーのようなものです。

アンカーの目的は、ボートを水中のどこかにとどめて漂流を防ぎ、アンカーの範囲内で自由に動けるようにすることだ。

アンカーリンクも同じ仕組みです。訪問者がアンカーリンクをクリックすると、他のページに移動する代わりに、ページ上の特定のコンテンツエリアにリダイレクトされます。このプロセスは読み込み時間を節約し、訪問者が見たいものをより早く見つけ、現在のページに留まるのを助けます。

Elementorでアンカーリンクを追加する（3つの簡単なステップ）

万が一エレメンタプラグインがサイトにインストールされていれば、すぐにアンカータグの作成を開始できます。インストール方法がまだわからない場合は、以前のElementorインストールチュートリアルをご覧ください。

次に、以下の手順に従ってください：

ステップ1：Elementorのページ編集を選択する

サインインワードプレスウェブサイトを開き、アンカーリンクを追加する必要のあるページを開く。

トップメニューの "Elementorで編集 "をクリックすると、ページがElementorのビジュアルエディタに読み込まれます。

ステップ2："Menu Anchor "アンカータグを検索して追加する

左側の検索バーに「Menu Anchor」と入力すると、「Menu Anchor」というウィジェットが表示されます。これはアンカーリンクを作成するために必要なコンポーネントです。

ステップ3：メニューアンカーウィジェットでアンカーリンクを追加する

Menu Anchorコンポーネントを見つけたら、ページのジャンプしたいエリアにドラッグ＆ドロップします。例えば、「価格」エリアにジャンプさせたい場合は、そのエリアの前にこのコンポーネントを配置します。

次に、コンポーネントの「ID」フィールドにアンカーの名前を入力する。

次に、クリックするとアンカーポイントにジャンプするリンクとして使用するボタンまたはテキストを選択します。

例えば、アンカー・ジャンプ・ボタンとして "Get Started "ボタンを選択します：

ページの一番上までスクロールし、"Get Started "ボタンをクリックします。ボタンのリンクフィールドで、既存のリンクをクリアし、ジャンプターゲットとして "#prices "を記入します。

保存」をクリックする。

ページに戻ったら、ボタンをクリックして「価格」エリアにジャンプする。

WordPressのメニューにアンカーを追加する

この方法はずっとシンプルだ。

まず、あるエリアにアンカーを追加することから始めましょう。例えば、「よくある質問(よくあるご質問)」エリアでジャンプを設定する：

ElementorでMenu AnchorをFAQエリアの前面にドラッグし、IDフィールドに "faq "を入力し、保存をクリックします。

そして次のようにする：

かえるワードプレスバックステージ
アピアランス＞メニューに進む；
カスタムリンク」をクリックする；

ある URL リンクテキストに "FAQ "として "#faq "を入力してください；

メニューに追加」をクリックし、保存する。

一度保存したら、サイトのフロントに行って、メニューの「FAQ」をクリックすると、FAQエリアにリダイレクトされます。

Elementor アンカーリンクの追加 FAQ

Elementorでアンカーリンクを追加する際のFAQです：

1.アンカーリンクとは？

アンカーリンクとは、ページのある部分にジャンプするためのリンクのこと。

2.Elementorでページの特定の部分にリンクするにはどうすればよいですか？

ジャンプしたいブロックを選択し、「ブロックの編集」をクリックする；
詳細設定を開きます；
増加カスケーディングスタイルシート ID、例えば "ファースト"；
ジャンプするボタンまたはテキストを選択します；
ボタンまたはテキストへのリンクに「#First」と入力してください。

3.WordPressでアンカーリンクを手動で追加するには？

ボタンまたはテキストを選択し、リンクに「# アンカー名」を入力します；
Jump Targetブロックを見つけ、Advanced settingsを開く；
IDを設定したアンカー名にする（「#」は付けない）。

4.手動でHTMLにアンカーリンクを追加するには？

利用する <a href="#目标ID">ジャンプテキスト</a> でアンカーリンクを設定する；
対象地域内 HTML タグ別アーカイブ id="ターゲットID"例えば <div id="faq">.

5.Elementorで画像にリンクを追加するには？

ターゲット画像を選択します；
コンテンツ」の設定で「リンク」を見つける；
カスタムリンク」を選択する；
ターゲットリンクのアドレスを入力します。

結論として

これで、Elementorでアンカーリンクを設定するための完全な方法を手に入れたことになります。アンカーリンクはランダムに追加するものではなく、ページ上の重要なジャンプ機能の不可欠な部分であることを覚えておくことが重要です。ページの最も重要なエリアを特定し、適切なテキストまたはボタンでジャンプパスを設定することをお勧めします。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み