クリック時に特定のコンテンツにスクロールを有効にする

特定のコンテンツにスクロールすると、ユーザーは手動スクロールせずにページを簡単に移動できます。ClickFunnels は、訪問者を特定のセクション、行、Flex、または要素に誘導するボタンとテキスト リンクによってトリガーされる組み込みのスクロール機能を提供します。この記事では、ターゲット コンテナーを準備し、スムーズなスクロールを可能にするためにボタン アクションとテキスト リンクを構成する方法について説明します。

---

必要条件

• アクティブなClickFunnelsアカウント

• ワークスペースで作成されたページ

• ボタンまたはテキスト要素

---

コンテンツへのスクロールについて

コンテンツにスクロールは、ユーザーがボタンまたはテキスト リンクをクリックしたときに特定のセクションに誘導することで、ページ内のスムーズなナビゲーションを可能にする機能です。手動でスクロールする代わりに、訪問者は関連するコンテンツに即座に誘導できるため、ユーザー エクスペリエンスが向上します。

例：

ヒーロー セクション、お客様の声セクション、会社概要セクション、オファー セクション、ユーザーが購入を確定するチェックアウト セクションで構成されるファネル ページを考えてみましょう。 ヒーローセクションでは、「今すぐ注文」ボタンを組み込み、そのアクションを構成して チェックアウトセクションまでスクロールできます。ユーザーがこのボタンをクリックすると、ページが「チェックアウト」セクションにスムーズに移行し、 購入プロセスがより迅速かつシームレスになります。

---

ステップ 1 - コンテナを選択してタイトルを変更する

スクロールアクションを設定する前に、クリックしたときにリンクを移動する場所を特定する必要があります。ClickFunnels では 、セクション、行、Flex、 または 要素までスクロールできます。

ターゲットコンテナの選択

コンテナは、ページ上の任意のセクション、行、Flex、または要素を参照します。スクロールしてアクションリンクを設定すると、リンクによって選択したコンテナーまでページがスクロールされます。選択しやすいように、コンテナに明確なタイトルを付けることをお勧めします。

コンテナータイトルの変更

1. ページエディタで、コンテナ(セクション、 行、 Flex、または 要素)にカーソルを合わせます。

2. **コード<>**アイコンをクリックします。
   

3. コードエディタで、 CSS情報 セクションに移動します

4. [タイトル] フィールドに、コンテナの [タイトル] を追加します。
   

   ヒント：

   明確で簡潔な命名規則 ( 例: Section-hero、 Row-slider、 Element-checkout など) は、特定のセクションにスクロールするようにボタン アクションを設定したり、カスタム CSS コード内の要素を参照したりするなど、さまざまなユースケースでコンテナの識別を容易にします。

5. [ 更新 ] をクリックして変更を保存します。

---

ステップ 2: リンク アクションを設定する

ボタンアクションを「スクロール先」に設定する

コンテナの準備ができたら、次の手順に従って、スクロールするボタンを設定します。

1. ページ エディターで、行内のオレンジ色の + プラス ボタンまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。

2. [フォーム] カテゴリから、[ボタン] 要素を選択します。
   

3. ボタン 設定 を開き、 ボタン アクションセクションを見つけます。

4. [ボタンのクリック時のアクション] セクションで、アクションを スクロール先… に設定します。

5. ドロップダウンメニューが表示され、使用可能なセクション、行、Flex、および要素が表示されます(前に割り当てたタイトルを使用)。

6. スクロール先のコンテナを選択します。
   

7. [保存] をクリックして変更を保存します。

これで、訪問者がボタンをクリックすると、ページは指定されたコンテンツに自動的にスクロールします。

注意：

スクロールアクションのターゲットコンテナが非表示になっていないことを確認してください。コンテナの可視性が [デスクトップのみ ] または [モバイルのみ] に設定されている場合、ボタンの可視性は一致する必要があります。たとえば、スクロール先コンテナの表示設定が [モバイルのみ] に設定されているが、ボタンが デスクトップでのみ表示されている場合、コンテナはデスクトップに表示されないため、スクロール アクションは機能しません。

テキストリンクを使用したコンテンツへのスクロール

ページの特定の部分にテキストをリンクすることで、スクロールを有効にすることもできます。これは、「詳細」や「チェックアウトに移動」などのインラインテキストをリンクする場合に便利です。

これを行うには、次の形式を使用します#scroll-[ID]、ここで[ID] は、ターゲットコンテナ(セクション、行、フレックス、またはエレメント)のシステム生成ID。

1. ページ エディターで、スクロール先のコンテナーの [コード <> ] パネルを開きます。

2. [CSS] タブを選択したら、[ CSS 情報 ] セクションを見つけます。

3. [CSS IDセレクター] フィールドの下にある [IDを生成] をクリックします。
   

4. CSS 情報セクションに表示されているシステム生成 ID(#id-6Z-8oepNL-481 など)をコピーします。

5. アクションをリンクするテキストに移動します。

6. テキストを#scroll-[ID]にリンクする、ID (例: scroll-id-6Z-8oepNL-481) をコンテナーの ID に置き換えます。
   

注意：

• スムーズなスクロールは、 システム生成の ID を使用する場合にのみ機能します。コンテナにカスタム ID を手動で入力すると、スクロール アクションは機能しません。または、カスタム ID を持つコンテナーまでスクロールする必要がある場合は、Button 要素を使用します。

• スクロールアクションのターゲットコンテナが非表示になっていないことを確認してください。コンテナの可視性が [デスクトップのみ ] または [モバイルのみ] に設定されている場合、ボタンの可視性は一致する必要があります。たとえば、スクロール先コンテナの表示設定が [モバイルのみ] に設定されているが、ボタンが デスクトップでのみ表示されている場合、コンテナはデスクトップに表示されないため、スクロール アクションは機能しません。