ボタン: ユーザーにアクションの送信を許可する

公開日: 2024年11月1日更新日: 2026年10月27日

ClickFunnels の Button 要素は、ページに行動喚起ボタンを追加するために不可欠です。この要素により、訪問者はフォームの送信、次のファネルステップへの移動など、さまざまなアクションを実行できます。この記事では、ファネルのニーズに合わせて Button 要素を追加およびカスタマイズする方法を説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

ページエディタでのボタン要素の追加

ページエディタ内で、要素を配置する セクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
フォーム カテゴリから、ボタン 要素を選択します。

Button 要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。

ボタン要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️アイコン をクリックするか、要素を直接クリックします。

ボタンテンプレート

ボタンテンプレート オプションを使用すると、事前にデザインされたさまざまなテンプレートから選択して、ボタンのスタイルをすばやく設定できます。これらのテンプレートは、シンプルなフラットデザインからグラデーション、ボーダー、3D 効果まで、さまざまなスタイルを提供し、ワンクリックでページのデザインに最も適した外観を選択できます。

テンプレートを適用するには、ボタン設定の テンプレート タブに移動し、好みのスタイルを選択します。適用すると、設定タブと 詳細設定 タブでボタンの外観をカスタマイズでき、色、フォント、その他のプロパティを調整して、完全にカスタマイズされた外観にすることができます。

上マージン

上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

ボタン設定

このフィールドでは、ボタンに表示されるメインテキストとサブテキストを定義できます。編集をクリックすると、追加のオプションが使用可能になります。

ボタンテキスト: このフィールドでは、ボタンに表示されるプライマリテキストを入力できます。「送信」、「無料ガイドを入手」、オファーに関連する行動喚起など、ユーザーに実行してもらいたいアクションに合わせてカスタマイズします。
サブテキスト: このオプションフィールドを使用すると、メインボタンのテキストの下にテキストを追加できます。必要に応じて、追加のコンテキストや情報を提供するために使用します。
アリアラベル: この属性は、ボタンの目的に関する追加情報をスクリーンリーダーに提供することで、アクセシビリティを向上させます。視覚障害のあるユーザーがボタンの機能を理解できるように説明を入力します。 MDN documentationのariaラベルについて詳しく知る。
提出テキスト: このフィールドは、ボタンアクションが 注文/フォームを送信 の場合にのみ表示されます。フォームの送信中にボタンに表示されるテキストを設定します。空のままにすると、ボタンには Submitting… と表示されます。

ボタンアクション

この設定では、訪問者がボタンをクリックしたときに何が起こるかを定義できます。ボタンのクリック時のアクション セクションのドロップダウンからアクションを選択します。使用可能なアクションは次のとおりです。

何も起こらない: 何も起こらない オプションを選択すると、ボタンをクリックしても何も起こりません。
リンクなし: クリックすると、このボタンは顧客をファネルシーケンスの次のステップに自動的に移動します。最も一般的には OTO ページで使用され、顧客がオファーを辞退してファネルを先に進めるようにします。このボタンをクリックしても、ページに関連付けられた商品は購入され ません。顧客は単に次のファネルステップに進みます。
移動先…: 移動先… を選択するとドロップダウンが表示され、カスタムURL、カスタムアクションリンク、ストアページ、ブログホームページ の 4 つのリンクタイプから選択できます。どのリンクタイプにも、リンクを新しいブラウザタブで開くための 新しいウィンドウで開く チェックボックスがあります。
1. カスタムURL: このオプションを使用すると、クリック時にボタンがリダイレクトされる特定の URL (「ハードリンク」) を入力できます。これは、外部 Web サイトまたはユーザーに送信する任意の URL にすることができます。このフィールドは入力した内容の先頭に必ず https:// を追加するため、Web アドレスにのみ使用してください。電話、テキストメッセージ、メールのリンク (tel:、sms:、mailto:) には、代わりに カスタムアクションリンク を使用してください。
2. カスタムアクションリンク: ハードコードされた URL に直接リンクする代わりに、相対パス または カスタムアクションコマンド ( #open-popup や /terms-and-condition など) を使用できます。この柔軟性により、ポップアップを開いたり、同じドメインに関連付けられたパス名に一致するページに移動したりするなどのアクションをトリガーする動的リンクをページ内に作成できます。リンクは入力したとおりに保存されるため、tel:+1234567890 などの電話、テキストメッセージ、メールのリンクもここに入力します。
3. ストアページ: このオプションは、ファネルに接続されたストアのフロントページに直接リンクします。これは、ユーザーを商品リストやショップ関連コンテンツに誘導する必要があるボタンに役立ちます。新しいウィンドウで開く を有効にして、新しいタブでストアページを起動できます。
4. ブログホームページ: このオプションは、ユーザーをサイトのメインブログページにリダイレクトします。ブログコンテンツを宣伝したり、リンクしたりするのに最適です。ブログを別のタブで開きたい場合は、このオプションでも 新しいウィンドウで開く チェックボックスを使用できます。
注文/フォームを送信: ボタンアクションとして 注文/フォームを送信 を選択すると、リダイレクトオーバーライドを有効にする オプションを使用して送信後のリダイレクトを制御できます。
- デフォルトの動作: リダイレクトオーバーライドを有効にする ボックスをオフのままにすると、ボタンアクションはデフォルトの動作に従い、ユーザーを ClickFunnels ファネルの次のステップに進めます。ファネルに次のステップがない場合は、フォームが送信され、ページが現在の URL にリロードされます。
- リダイレクトオーバーライドを有効にする: このボックスをオンにすると、カスタム URL またはページ URL への 相対パス をフィールドに入力できます。有効にすると、ボタンは、ファネルの次のステップに進むのではなく、フォーム送信後にこの指定されたURLにユーザーをリダイレクトします。
1クリックアップセル: このオプションはファネルステップのページでのみ使用できます。ボタンを OTO 商品の注文送信ボタンとして指定できます。選択したら、製品を追加 をクリックして特定の商品と価格を割り当てるか、製品を編集 をクリックしてファネルステップの商品を管理します。リダイレクトオーバーライドを有効にする をオンにして、購入後に顧客を指定した URL に移動させることもできます。ボタンをクリックすると、OTO オファーとともに注文が送信されます。顧客が前のページで商品を購入した後にこのページに到達した場合、ボタンは支払い情報を再入力することなく注文を送信します。物理的な商品の場合、ClickFunnels はフルフィルメントのために配送先住所を入力するようユーザーに求めます。顧客が事前に購入せずにページにアクセスした場合、ボタンをクリックするとチェックアウトモーダルが開き、ユーザーが支払い情報を入力して取引を完了します。
スクロール先…: ボタンアクションとして スクロール先… を選択すると、ボタンがクリックされたときにページの特定の部分にスクロールすることで、スムーズなナビゲーションを作成できます。スクロール先… を選択するとドロップダウンメニューが表示され、セクション、行、特定の要素などのターゲット要素を選択できます。この機能は、ユーザーを同じページ上の関連コンテンツに誘導し、手動スクロールの必要性を減らすことでユーザーエクスペリエンスを向上させるのに役立ちます。
表示または非表示…: 表示または非表示… アクションを使用すると、ボタンがクリックされたときにページ上の特定の要素の表示を切り替えることができます。表示または非表示… を選択すると、次の 2 つのドロップダウンメニューが表示されます。
1. 表示…: ボタンをクリックしたときに表示される要素、セクション、または行を選択します。
2. 非表示…: ボタンをクリックしたときに非表示になる要素、セクション、または行を選択します。
ポップアップを開く…: ページポップアップウィンドウを開き、追加情報、フォーム、または行動喚起を含めることができます。
ポップアップを閉じる…: アクティブなポップアップウィンドウを閉じます。
完了をマーク…: コース内の現在のレッスンを完了としてマークし、受講者をまだ完了していない次のレッスンに進めます（完了済みのレッスンはスキップされます）。コース内のすべてのレッスンが完了している場合は、代わりに最初のレッスンに戻ります。完了状況に関係なくコースのアウトライン順に進めたい場合は、次のレッスンへ進む… を使用してください。
次のレッスンへ進む…: 完了済みかどうかに関係なく、コースのアウトライン順で次のレッスンに受講者を移動します。必要に応じて次のモジュールにも進みます。非公開のレッスンや、受講者がアクセスできないモジュール内のレッスンなど、アクセスできないレッスンはスキップされます。最後のレッスンでは、コースページに移動します。このアクションは移動のみを行い、現在のレッスンを完了としてマークしません。そのため、すでに修了したコースを見直す受講者に便利です。
前のレッスンに戻る…: このアクションを選択すると、ユーザーはコースのアウトライン順で前のレッスンに戻ります（アクセスできないレッスンはスキップされます）。このアクションは、現在のレッスンの完了ステータスを変更しないため、進行状況をリセットせずに以前のコンテンツに再アクセスする場合に便利です。
レッスンを再スタート…: このアクションは、現在のレッスンの完了ステータスをクリアし、レッスンを再読み込みします。これは、ユーザーが理解を深めるために教材を最初から繰り返す必要があるコースレッスンで特に役立ちます。
コースページの編集とカスタマイズの詳細については、「 Using the Page Editor to Design Your Course」を参照してください。
次のステップにリダイレクト: ボタンをクリックすると、ユーザーは自動的にファネルシーケンスの次のステップに移動します。これは、URL を手動で指定することなく、訪問者にファネルの進行を案内する簡単な方法です。

次のステップにリダイレクト アクションは、フォーム送信 を対象としていません。このアクションを選択しても、フォームデータは送信されません。クリックしたときにのみ、次のファネルステップへのリダイレクトがトリガーされます。ユーザーを進める前にフォーム情報をキャプチャする必要がある場合は、代わりに 注文/フォームを送信 アクションを選択すると、データが適切に送信され、指定されたとおりにユーザーに誘導されます。
ファイルをダウンロード…: このアクションはボタンをファイルのダウンロードに変えます。ファイルを選択 をクリックして ファイルを選択 ダイアログを開き、ワークスペースの既存のダウンロードを名前で検索するか、新しいファイルをアップロード をクリックしてエディターを離れずにアップロードします。新しくアップロードしたファイルは自動的にボタンに選択されます。ファイルを添付すると、その名前が表示され、ボタンは ファイルを変更 に変わります。クリック時の動作は 新しいタブで開く（ダウンロードの代わりに） チェックボックスで制御します。オフのまま（デフォルト）にすると同じタブでダウンロードが強制され、オンにすると代わりに新しいブラウザタブでファイルが開きます（例: ブラウザの PDF ビューアーで PDF を表示）。詳細は「ボタンをファイルのダウンロードに変える」の記事を参照してください。

サイズとスペーシング

サイズとスペーシング の設定では、コンテナ内のボタンのサイズと位置を制御できます。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルでサイズと間隔を個別に設定できます。モバイル配置が指定されていない場合、デフォルトでデスクトップ配置が継承されます。各オプションの仕組みは次のとおりです。

フル幅: 有効を選択すると、ボタンがコンテナの幅全体に広がり、利用可能なスペースを水平方向に埋めて、目立つ全幅の外観になります。無効を選択すると、ボタンはその内容に基づいて必要なだけのスペースのみを占有します。
幅: フル幅では広すぎるデザインのために、ボタンの幅を固定値で設定します。スライダーを使用するか、ピクセル（スライダーでは最大 1200px）またはパーセンテージ (%) で値を入力します。フル幅 で有効または無効を選択すると、この値は置き換えられます。
サイドパディング: ボタンの左右のパディングを調整します。この値を大きくすると、ボタンがコンテナ内の中央に保たれながら幅が広がります。
垂直パディング: ボタンの上下のパディングを調整します。この設定は、ボタンの高さを制御し、垂直方向に大きくまたは小さく表示するのに役立ちます。
整列: ボタンをコンテナの左、中央、または右に揃えます。フル幅 が有効に設定されている場合、このオプションは表示されません。

ボタンスタイル

ボタンスタイル 設定を使用すると、ユーザーは事前定義されたスタイルを適用およびカスタマイズしたり、特定の調整のために上書きしたりできます。これらの設定を使用するためのガイドは次のとおりです。

スタイルの選択: ページ上の 3 つの定義済みスタイル (1、2、3) からグローバルに選択できます。これらのスタイルのいずれかを選択すると、プリセットの外観がボタンに適用されます。
スタイルの編集: スタイルの編集 をクリックすると、選択したスタイルのプロパティをエディター内で直接編集できます。このオプションは、スタイルをグローバルに調整し、それを使用するすべてのボタンに影響を与えます。
オーバーライド: 他のボタンに影響を与えずに特定のボタンインスタンスのスタイルをカスタマイズする場合は、オーバーライド オプションを選択できます。これにより、ボタンスタイルのプロパティのロックが解除され、個別のカスタマイズが可能になります。オーバーライド を有効にすると、追加のスタイル設定にアクセスできるようになり、次のセクションに分かれています。

ボタンの状態

ボタンの状態 設定では、さまざまな操作状態でのボタンの表示方法を定義できます。

デフォルト: アイドル状態のときのボタンの通常の外観。たとえば、背景を青に設定し、白のテキストと灰色のサブテキストの色を使用して、ボタンをすっきりとした標準的な外観にすることができます。
ホバー: ユーザーがボタンにカーソルを合わせたときのボタンの外観。この状態には、対話性を示すための背景、テキストの色、またはサブテキストの色の変更を含めることができます。たとえば、ユーザーがボタンの上にマウスを移動すると、背景が暗い青の色合いに変わり、テキストの色が明るい白になり、サブテキストが太字に切り替わり、ボタンがクリック可能であることを示す場合があります。
押下: ボタンがクリックまたは押されたときのボタンの外観で、ユーザーに視覚的なフィードバックを提供します。この状態では、背景を濃い灰色に設定し、テキストの色を白に変更し、サブテキストの色を赤に切り替えることで、アクションが登録されたことを明確にフィードバックすることができます。

各状態では、背景、テキストカラー、サブテキストカラー、ボーダーカラーをカスタマイズして、まとまりのあるレスポンシブなデザインを作成できます。各ボタンの状態 (デフォルト、ホバー、および押下) にはこれらの設定が含まれており、インタラクション状態ごとに異なる外観を作成できます。サブテキストカラー は、ボタンにサブテキストがある場合にのみ表示されます。

背景: この設定は、各状態のボタンの背景色を制御します。たとえば、デフォルト状態には青などの原色を選択し、ホバーには濃い青の色合いを選択し、押下状態には灰色などの中間色を選択できます。各状態の背景色を調整すると、インタラクティブ性を視覚的に伝えることができます。
テキストカラー: この設定により、ボタンのメインテキストの色が変わります。たとえば、デフォルト状態では、色付きの背景に対して読みやすくするために、テキストの色を白に設定できます。ホバー状態では、テキストをより目立たせるために少し明るい色合いや対照的な色合いを選択し、押下状態では、視認性を維持するために背景とよく合う色を選択できます。
サブテキストカラー: この設定は、ボタンに表示されるサブテキストの色を制御します。たとえば、デフォルト状態に微妙な灰色を設定し、ホバーでより濃い色合いに切り替えてインタラクティブ性を強調し、押下状態で赤などの明確な色を使用してボタンがアクティブになったことを示すことができます。
ボーダーカラー: この設定は、各状態でのボタンのボーダーの色を制御します。

プライマリテキストスタイル

プライマリテキストスタイル セクションは、メインボタンテキストの外観を制御します。各オプションでは、カスタマイズして明確で魅力的な行動喚起を作成できます。

ボタンフォント: プライマリボタンテキストのフォントタイプを選択します。ClickFunnels はさまざまな Google フォントを提供しており、ワークスペース設定 > 私の資産 > フォント に移動してカスタムフォントをアップロードすることもできます。アップロードされたフォントが選択リストに表示されます。
ウェイト: プライマリボタンテキストの太さを定義します。選択できるウェイトは、選択したフォントによって異なります。インパクトを生み出すために太いウェイトを選択し、より繊細な外観にするには細いウェイトを選択してください。
フォントサイズ: スライダーを使用してテキストサイズを調整するか、特定の値を手動で入力できます。さらに、サイズの単位として rem または px (2rem や 32px など) を選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
- Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem を選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
- Px は絶対測定値であり、テキストサイズを正確に制御できます。
文字間隔: プライマリテキストの文字間の間隔を制御します。値を大きくすると間隔が広がり、値を小さくすると文字間隔が狭くなります。
行の高さ: これは、ボタンのテキストに複数の行がある場合に便利な、行間の垂直方向の間隔を調整します。行の高さを高くすると間隔が広くなり、低くすると行が近くなります。
テキストの大文字小文字: プライマリボタンテキストに、なし (-)、小文字 (aa)、大文字 (AA)、先頭大文字 (Aa) のいずれかを選択して、表示を制御します。
装飾: 下線、打ち消し線、または下線オーバーライン (下線 + 上線) を使用してプライマリテキストのスタイルを設定し、目立たせたり、特定の要素を強調したりします。

サブテキストスタイル

サブテキストスタイル セクションでは、プライマリボタンテキストの下に表示される 2 次テキストの外観をカスタマイズします。このセクションは、ボタンにサブテキストがある場合にのみ表示されます。各オプションの概要は次のとおりです。

マージントップ: プライマリテキストとサブテキストの間の垂直方向のスペースを調整します。この値を大きくすると、サブテキストがさらに下に移動し、2 つのテキスト要素間の分離が大きくなります。
ボタンフォント: ボタンのサブテキストのフォントタイプを選択します。ClickFunnels はさまざまな Google フォントを提供しており、ワークスペース設定 > 私の資産 > フォント に移動してカスタムフォントをアップロードすることもできます。アップロードされたフォントが選択リストに表示されます。
ウェイト: サブテキストの太さを定義し、繊細で軽量な外観または大胆で強調された外観のオプションがあります。選択できるウェイトは、選択したフォントによって異なります。
フォントサイズ: スライダーを使用してテキストサイズを調整するか、特定の値を手動で入力できます。さらに、サイズの単位として rem または px (2rem や 32px など) を選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
- Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem を選択し、スタイルガイドでデスクトップ用の 16px の基本フォントサイズを指定した場合、デスクトップビューでは 32px になります (つまり、2rem × 16px = 32px)。
- Px は絶対測定値であり、テキストサイズを正確に制御できます。
文字間隔: サブテキスト内の文字間の間隔を調整して、よりゆったりした表示または詰まった表示にできます。
行の高さ: サブテキストの行間の垂直方向の間隔を制御し、複数行のサブテキストに特に役立ちます。行の高さを高くすると行間のスペースが広がり、低くすると行が近くなります。
テキストの大文字小文字: なし (-)、小文字 (aa)、大文字 (AA)、先頭大文字 (Aa) のオプションを使用してサブテキストの大文字と小文字を調整し、表示に柔軟性を与えます。
装飾: 下線、打ち消し線、または下線オーバーライン (下線 + 上線) を使用してサブテキストを強調し、テキストを目立たせます。

ボーダー

ボーダー 設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

スタイルプリセット(1、2、3): スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットは、ページ全体で一貫したボーダースタイルを提供し、要素にすばやく適用できます。
スタイルを編集: スタイルガイドでプリセットのボーダースタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。
オーバーライド: オーバーライド オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用のボーダー設定をカスタマイズします。
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右のボーダーの任意の組み合わせが含まれます。
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。
色: カラーピッカーを使用して、ボーダーの色を選択します。スタイルガイドから色を選択するか、カスタム色を選択して、ボーダーの色がデザインスキームに一致するようにすることができます。
ストロークサイズ: ボーダーの太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

コーナー

コーナー 設定では、要素のコーナーの丸み(border-radius)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。

スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイックスタイリングオプションを提供します。
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。
オーバーライド: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、オーバーライド をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、4 つのコーナーすべてに均一な半径を設定します。
エッジを分離する: エッジを分離する (Separate Edges) を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下のコーナーに異なる値を設定して、独自の形状を実現できます。

アイコン前

アイコン前 設定では、見出し、小見出し、段落、ボタンなど、要素内のテキストの前に表示されるアイコンを追加できます。オプションの内訳は次のとおりです。

アイコンピッカー: このオプションを使用すると、リストからアイコンを選択できます。チェックマーク、矢印、封筒などのさまざまなアイコンから、デザインのニーズに合わせて選択できます。アイコンは Font Awesome ライブラリから読み込まれ、デザインの好みに合わせて多数のアイコンにアクセスできます。
アイコンサイズ: スライダーを使用してアイコンサイズを調整するか、ピクセル (px) または rem で特定の値を入力します。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのアイコンサイズを個別に設定できます。
アイコンの色: ブランドやページデザインに合わせてアイコンの色をカスタマイズします。
左の余白/右の余白: 左の余白スライダーと右の余白スライダーを使用すると、アイコンと周囲のコンテンツの間の間隔を制御できるため、正確な配置が可能になります。

アイコン後

アイコン後 の設定では、テキストの後に表示されるアイコンを追加でき、アイコン前と同じカスタマイズオプションを使用できます。

アイコンピッカー: このオプションを使用すると、リストからアイコンを選択できます。チェックマーク、矢印、封筒などのさまざまなアイコンから、デザインのニーズに合わせて選択できます。アイコンは Font Awesome ライブラリから読み込まれ、デザインの好みに合わせて多数のアイコンにアクセスできます。
アイコンサイズ: スライダーを使用してアイコンサイズを調整するか、ピクセル (px) または rem で特定の値を入力します。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのアイコンサイズを個別に設定できます。
アイコンの色: ブランドやページデザインに合わせてアイコンの色をカスタマイズします。
左の余白/右の余白: 左の余白スライダーと右の余白スライダーを使用すると、アイコンと周囲のコンテンツの間の間隔を制御できるため、正確な配置が可能になります。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。
ごみ箱 (🗑️) アイコン: ページエディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリングロジックを制御できる詳細設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。