SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

アンカーブロック

アンカーブロックを使用すると、ユーザーをページの特定のセクションに移動させるリンクを作成できます。このブロックは、訪問者が必要なコンテンツに直接ジャンプできるようにすることで、シームレスなワンクリックナビゲーションを構築し、ユーザーエクスペリエンスを向上させるのに役立ちます。

アンカーリンクは、長文コンテンツ、FAQセクション、目次ナビゲーション、または訪問者がスクロールせずに特定のセクションにすばやく到達できるようにしたいページに最適です。ページ全体にアンカーポイントを設定することで、よりアクセスしやすくユーザーフレンドリーなエクスペリエンスを作成できます。

要件: アンカーブロックは、すべての ライセンスプランで利用可能です。


アンカーブロックをページに追加する

SeedProdページにアンカーブロックを追加するには、次の手順に従ってください。

ステップ1:ブロックを追加する

デザイン > ブロックの下で、訪問者がジャンプできるようにしたいページの目的のセクションにアンカーブロックをドラッグアンドドロップします。

アンカーブロックをページにドラッグ

アンカーブロックは、ジャンプ先を作成したいページ上の任意の場所に配置できます。

ステップ2: アンカー名を設定する

追加したら、アンカーブロックをクリックして設定を開きます。アンカー名を設定できるフィールドが1つ表示されます。

  • アンカー名: このアンカーポイントの一意で説明的な名前を入力します。スペースの代わりに小文字の英字とハイフンを使用します(例:「about-section」、「pricing-details」、「contact-form」)。この名前は、このセクションにリンクするために使用する識別子になります。
アンカー名フィールドを表示するアンカーブロック設定

アンカーの一意の名前を設定します。たとえば、「whatwedo」という名前を付けた場合、「#whatwedo」を使用してリンクします。

アンカーにジャンプするリンクを作成するには、ハッシュ記号(#)の後にアンカー名を付けて、ボタン、テキストリンク、またはナビゲーションメニュー項目に追加します。

たとえば、アンカーに「whatwedo」という名前を付けた場合、ボタンまたはリンク設定でURLとして「#whatwedo」を使用します。訪問者がこのリンクをクリックすると、ページは自動的にアンカーブロックを配置したセクションにスクロールします。

同じページに複数のアンカーブロックを作成し、それぞれに一意の名前を付けることで、コンテンツ全体に包括的なジャンプナビゲーションを構築できます。

ページ上の複数のアンカーブロックを示す例

同じページに複数のアンカーを作成して、完全なジャンプナビゲーションシステムを構築します。

ステップ4:変更を保存

アンカーブロックの設定とアンカー名の設定が完了したら、必ず作業を保存してください。


これで、ページにアンカーブロックが正常に追加されました!このシンプルでありながら強力なブロックは、訪問者が必要なコンテンツに直接ジャンプするのに役立つシームレスなナビゲーションを作成します。ページ全体に複数のアンカーを試して、全体的なブラウジングエクスペリエンスを向上させる直感的でユーザーフレンドリーなナビゲーションを構築してください。

関連記事