ページの特定のセクションにスクロールするためのリンクを作成する

たった1回のクリックで、商品の詳細、よくある質問、お問い合わせフォームなど、ページの特定の部分に訪問者を直接誘導したいと思いませんか？それがまさに アンカーリンク により認められた使用に限ります。

このガイドでは、スムーズスクロールリンクを作成する方法を学びます。 GemPages バージョン 7ボタン、画像、またはテキスト要素を使用して、ページの任意のセクションにスクロールできます。コーディングは必要ありません。

アンカーリンクとは何ですか?

An アンカーリンク （「スクロール トゥ リンク」とも呼ばれます）を使用すると、ページを再読み込みしたり、ユーザーに手動でスクロールさせたりすることなく、訪問者を同じページの特定のセクションに送ることができます。

GemPagesでは、クリック可能な要素（ボタンや見出しなど）を セクションID ページ上に

始める前に: セクションIDを取得する

アンカーリンクを作成するには、まず セクション ID ユーザーにスクロールしてもらいたい目的地の。

セクション ID を見つける方法:

• エディターでリンクしたいセクションにマウスを置きます。
  
• セクションを右クリックします。
  
• 選択する 「コピークラス」 ドロップダウンメニューから選択します。

• 次のようなクラスになります .gp0XsMH_MSIDに変換するには、 ドット（.) また、 ハッシュ（#).

例： .gp0XsMH_MS → #gp0XsMH_MS

リンクを設定するときに、このセクション ID を使用します。

GemPagesでアンカーリンクを作成する方法

GemPages では、次の 2 つの簡単な方法でアンカー リンクを作成できます。

• ボタンまたは画像の使用: あなたは ボタン、画像、またはヒーローバナー クリック可能なリンクに変更し、訪問者を同じページ内の特定のセクションにスクロールさせます。これは、「商品の詳細を見る」「よくある質問を見る」「お問い合わせ」など、明確なアクションを促したい場合に最適です。
• テキスト（アンカーテキスト）の使用: アンカーリンクを直接追加することもできます 見出しまたはテキストブロック内のテキスト訪問者がテキストをクリックすると、ページが目的のセクションまでスクロールします。このオプションは、長いページ、目次レイアウト、または目立たないナビゲーションリンクに適しています。

各方法の手順を以下に説明します。

オプション1: ボタンまたは画像を使用してアンカーリンクを作成する

ユーザーがクリックしてページの特定の部分までスクロールできるボタンまたは画像を作成するには、次の手順に従ってください。これらの手順はボタン要素に適用されますが、ヒーローバナーや画像要素にも使用できます。

ステップ1： に行く Shopify管理 > アプリ をクリックして GemPages ビルダー アクセスするために GemPagesダッシュボードページセクションに移動し、希望するテンプレートを選択してエディターにアクセスします。

ステップ2： ドラッグ ボタン 素子 あなたのページに。

ステップ3： ボタン要素をクリックすると、左側のサイドバーに設定が表示されます。「リンク」ボタンをオンにします。

ステップ4： クリック後のアクションを選択: リンクがクリックされたときに実行されるアクションを選択します。

• ページを開く: 別のページ/URL を開きます。
• にスクロールします: ページ上の特定のセクションまでスクロールします。
• ポップアップを開く: 特定のポップアップを開きます。
• メールを送ります: 特定のメールアドレスにメールを送信します。
• 電話をかける: モバイルまたはタブレットで閲覧中に電話をかけます。

この場合は、 にスクロールします.

ステップ5： 貼り付け セクション ID 先ほどコピーしたファイルを選択するか、リストから保存先を選択します。

ステップ6： 青を打つ Save ボタンを押します。次に Save and パブリッシュ ライブページで結果を確認します。 

ボタンをクリックすると、セクションまでスムーズにスクロールするようになりました。

オプション2: テキストを使用してアンカーリンクを作成する（アンカーテキスト）

ボタンや画像の代わりにテキスト リンクを使用する場合は、テキスト要素内に直接アンカー リンクを作成できます。

ステップ 1： の中に GemPagesダッシュボードテンプレートを開いて、 エディター.

ステップ 2： の中に エディターテキストベースの要素をページにドラッグします。例: 見出し要素.

ステップ 3: アンカー リンクを追加するテキストを選択し、インライン テキスト パネルを起動してさらにカスタマイズします。

ステップ 4: チェーンアイコンをクリックすると、 カスタムURL フィールド。

ステップ 5：貼り付け セクション ID 目的地をフィールドに入力し、クリックします このURLにリンクします。

ステップ 6: Save and パブリッシュ ライブページで結果を確認するページ。

よくあるご質問

1. 要素 (ボタンや画像など) に直接アンカー リンクを作成できますか?

現在、GemPagesのアンカーリンクは、 セクション or 行個々の要素ではなく、

要素に直接リンクしたい場合は、その要素を行内に配置する必要があります。次に、行のクラスをコピー（IDに変換）して、スクロール先として使用します。

2. アンカーリンクが正しい要素までスクロールしないのはなぜですか?

多くの場合、要素がセクションまたは行内にないことが原因となっています。対象要素が行内にラップされていることを確認し、その行のセクションIDを使用してスムーズなスクロールを実現してください。

3. ポップアップや外部 URL にアンカー リンクを使用できますか?

いいえ。アンカーリンクは、同じページ内でのスクロールのみを目的として設計されています。ポップアップを開いたり、外部ページへのリンクを設定したりといったアクションについては、「クリック後のアクション」メニューのそれぞれのオプションをご利用ください。

4. ボタンをページの一番下までスクロールさせることはできますか?