コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

セレクトボックス: ユーザーがリストからオプションを選択できるようにする

公開日: 更新日:

ClickFunnels の Select Box 要素を使用すると、フォームにドロップダウン メニュー (HTML <select> 要素) を追加して、訪問者がオプションのリストから選択できるようにします。これは、国、州、カスタム選択などの構造化データを収集する場合に特に役立ちます。この記事では、Select Box 要素の追加とカスタマイズについて説明します。

必要条件

Section titled “必要条件”

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

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

ページエディタでのセレクトボックス要素の追加

Section titled “ページエディタでのセレクトボックス要素の追加”

  1. ページエディタ内で、要素を配置する セクション を追加します。

  2. そのセクション内に 行 を追加します。

  3. 行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。

  4. フォーム カテゴリから、セレクトボックス 要素を選択します。

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

セレクトボックス要素のカスタマイズ

Section titled “セレクトボックス要素のカスタマイズ”

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

上マージン

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

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

入力タイプ

入力タイプ で、さまざまなプリセット オプションから選択するか、カスタム選択を作成することができます。
セレクトボックスの入力タイプで「すべての国」、必要で「必要」を選択

  1. すべての国: すべての国を含むドロップダウンリストを追加します。

  2. すべてのアメリカ合衆国: 米国のすべての州のリストを追加します。

  3. すべてのカナダの州: カナダの州のリストを追加します。

  4. カスタムオプション: このオプションを使用すると、パーソナライズされたオプションのリストを定義でき、標準カテゴリに当てはまらないカスタム データを収集するのに最適です。

すべての国、すべてのアメリカ合衆国、または すべてのカナダの州 を選択すると、エディターには 1 つのプレースホルダーオプション (Select 国、Select 州、または Select 省) が表示されます。リスト全体は公開ページで表示されます。

  • すべてのアメリカ合衆国 と すべてのカナダの州 は、最初に Select State オプションがあり、その後に州が続きます。

  • すべての国 は、米国、カナダ、イギリス、アイルランド、オーストラリア、ニュージーランドが最初に表示され、その後にその他のすべての国が続きます。プレースホルダーオプションはないため、訪問者が別の国を選ぶまでリストの最初の国が選択された状態になります。

カスタムオプション

入力タイプ で カスタムオプション を選択した場合は、フィールドの一意の 入力名 を入力します (フィールドにはプレースホルダーとして 名前 と表示されます)。この名前はフィールドを識別するもので、選択された値はこの名前で連絡先プロファイルに保存されます。次に、ドロップダウンオプションごとに値とテキストを手動で追加します。

カスタムオプション: 入力名 favorite-workout、「最初のオプションは必須のときにデフォルトで空白です」のツールチップ、3つのオプションとオプションを追加ボタン

  1. 値: 各オプションに関連付けられた内部値は、ワークスペースの連絡先プロファイルに保存されます。

  2. テキスト: ドロップダウンメニューでユーザーに表示されるラベル。

オプションを追加 をクリックして、必要な数のカスタム オプションを追加します。フィールドが 必要 (必須) の場合、ClickFunnels は空白の値と 下のオプションを選択してください というテキストを持つ最初のオプションを自動的に追加します。その 値 は編集できません (カーソルを合わせると「最初のオプションは必須のときにデフォルトで空白です」と表示されます) が、テキスト をカスタマイズして、「選択してください…」などの説明テキストでユーザーを案内できます。

例: 次の例では、ユーザーが「お気に入りのワークアウトを選択してください」という質問に答えて選択できる 3 つのオプション (ホーム ワークアウト、 パワーリフティング、 クロスフィット) を追加しました。ClickFunnels には、空白値のデフォルト オプションが自動的に含まれ、ユーザーに「以下のオプションを選択してください」と求めます。この説明テキストは、ユーザーが選択を行う際に役立ちます。ユーザーがドロップダウンからオプションを選択してフォームを送信すると、選択した値がカスタム属性として連絡先プロファイルに保存されます。

必要

必要 設定では、ユーザーがフォームを送信する前にオプションを選択する必要があるかどうかを決定します。ドロップダウンで 必要 または 不要 を選択します。必要 に設定すると、訪問者は選択が完了するまでフォームを送信できません。これは、重要な情報を収集し、重要なデータを取得するのに役立ちます。不要 に設定すると、フィールドは任意になり、ユーザーは要素内のオプションを選択しなくてもフォームを送信できます。

背景色

背景色 セクションでは、要素の背景色を設定できます。スタイルガイド から定義済みの色を選択するか、カスタム色を作成できます。カスタム カラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。

サイズ サイズ設定: デバイスごとの幅スライダーと単位
  • 幅: 幅設定では、要素の幅を制御できます。この幅は、配置されるコンテナのパーセンテージ (たとえば、全幅にするにはデフォルトの 100%)、または固定幅の場合はピクセル (px、最大 2500px) で指定できます。この設定を調整すると、要素をページ上の他のコンポーネントに揃えたり、バランスの取れたレイアウトを作成したりするのに役立ちます。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの幅の値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

パディング

パディング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに余裕が生まれ、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングオプション:

  • 上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。

  • 下: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。

  • 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。

  • ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

デスクトップとモバイル (🖥️ & 📱) のカスタマイズ:

パディング設定を使用すると、デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。

内側のパディング 内側のパディングは入力ボックス内に適用され、要素のボーダーの端からではなく、入力ボックスの端から計算されます。入力ボックスの内側のパディングは、上、下、左右の寸法のスライダーを変更することで調整できます。
選択の配置

アライン オプションは、コンテナ内の入力フィールドの水平方向の配置を制御します。デザインの好みとレイアウトのニーズに応じて、入力を左、中央、または右に揃えることができます。この設定は、フォーム要素全体で一貫した配置を維持して、プロフェッショナルな外観にするのに役立ちます。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで個別に配置を設定できます。モバイル配置が指定されていない場合、デフォルトでデスクトップ配置が継承されます。

タイポグラフィ

タイポグラフィ設定 では、要素内のテキストの外観を制御できます。上部で、スタイルガイドのテキストスタイルのプリセット (S、M、L、XL) を選択します。プリセットを選択した状態で スタイルを編集 をクリックするとスタイルガイドでそのプリセットを変更でき (そのプリセットを使用するすべての要素に反映されます)、上書き をクリックするとこの要素だけのフォント設定を調整できます。プリセットを使わずにフォント設定を直接行うには、… を選択します。

  • フォントファミリー: このオプションを使用すると、テキストのフォント タイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。

  • ウェイト: このオプションは、テキストの太さを定義します。フォントごとにサポートされているウェイトだけが表示されるため、選択できるウェイトは選択したフォントによって異なります (例: 薄い、レギュラー、セミボールド、ボールド)。細いウェイトは控えめな印象を与え、太いウェイトはより視覚的なインパクトを生み出します。

  • フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキスト サイズを調整できます。さらに、サイズの単位として rem または px (2rem や 32px など) を選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。

    • Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。

    • Px は絶対測定値であり、テキスト サイズを正確に制御できます。

  • 文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値 (rem 単位で測定) を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。

  • 色: カラーピッカーを使用して、テキストの色を選択します。スタイルガイド から定義済みの色を選択するか、カスタム色を作成できます。カスタム カラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。

  • 装飾: 次のようなテキスト装飾を追加します。

    • 下線: テキストの下に線を引きます。

    • 取り消し線: テキストを水平線で取り消します。

    • 下線 + 上線: テキストの下と上の両方に線を引きます。

  • 不透明度: テキストの不透明度を調整します。スライダーを使用すると、テキストを多かれ少なかれ透明にすることができます。スライダーを 左 (0) に動かすと不透明度が下がり (テキストの透明度が高くなります)、右 (1) に動かすとテキストが完全に不透明になります。

テキストシャドウ

テキストシャドウ セクションは、テキストの背後に控えめなシャドウを追加し、奥行きを生み出し、読みやすさを向上させます。次のパラメータを制御できます。

  • オフセット-xとオフセット-y: シャドウの水平方向と垂直方向の位置を調整します。

  • ぼかし: シャドウのぼかしやシャープさを設定します。

  • 色: ページデザインに一致または対照するシャドウの色を選択します。

ボーダー

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

  1. スタイルプリセット(1、2、3): スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットは、ページ全体で一貫したボーダースタイルを提供し、要素にすばやく適用できます。

  2. スタイルを編集: スタイルガイドでプリセットのボーダースタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。

  3. オーバーライド: オーバーライド オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用のボーダー設定をカスタマイズします。

  4. ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右のボーダーの任意の組み合わせが含まれます。

  5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。

  6. 色: カラーピッカーを使用して、ボーダーの色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、ボーダーの色がデザイン スキームに一致するようにすることができます。

  7. ストロークサイズ: ボーダーの太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

コーナー

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

  1. スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。

  2. スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。

  3. オーバーライド: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、オーバーライド をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。

  4. すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、4 つのコーナーすべてに均一な半径を設定します。

  5. エッジを分離する: エッジを分離する (Separate Edges) を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下 のコーナーに異なる値を設定して、独自の形状を実現できます。

シャドウ

シャドウ の設定では、シャドウ効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

  1. スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。

  2. シャドウ スタイル: インセット (要素内のシャドウ) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。

  3. X方向: シャドウの水平方向の位置を調整します。正の値はシャドウを右に移動し、負の値を指定するとシャドウは左に移動します。

  4. Y方向: シャドウの垂直方向の配置をコントロールします。正の値はシャドウを下に押し、負の値はシャドウを上に引っ張ります。

  5. ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかなシャドウが作成され、値を小さくすると、シャドウが鮮明に保たれます。

  6. スプレッド: シャドウのサイズを調整します。正の値はシャドウを広げ、負の値はシャドウを狭くします。

  7. 色: カラーピッカーを使用して、シャドウの色を設定します。

コントロールパネル

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

  • すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。

  • モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。

  • 目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

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