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

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

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

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

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

• 高さ：テキスト領域要素の [サイズ] で n 個の追加 h8 設定が使用でき、テキスト入力領域に割り当てられる垂直方向のスペースを指定できます。この設定は、より長いユーザー応答に対応する必要がある場合に役立ちます。

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

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

パディングオプション:

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

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

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

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

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

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

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

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

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

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

タイポグラフィ設定では、要素内のテキストの外観を制御できます。これらの設定では、2 つのビューが提供されます。定義済みのスタイル (小、中、または大) を選択して、ページ全体に一貫したデザインを適用できます。定義済みのスタイルを上書きすることを選択した場合は、追加の設定が使用可能になり、文字の外観を手動でカスタマイズできます。

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

• 太さ: このオプションは、テキストの太さを定義します。 希望する強調に応じて、薄型、[規則]、または太字のオプションから選択できます。細いフォントは微妙な外観を提供し、太字のフォントはより視覚的なインパクトを生み出します。

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

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

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

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

• 行の高さ: テキストの行間の垂直方向のスペースを制御します。これは通常、フォント サイズのパーセンテージとして表されます。パーセンテージを大きくすると、行間のスペースが増え、特に大きなテキストブロックの場合、読みやすさが向上します。 また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで行の高さの値を個別に設定することもできます。

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

• 太字: [色] オプションと同様に、テキストの太字状態の色を選択できます。この色は、テキストが太字に設定されている場合に適用され、通常のテキストと視覚的に区別できます。

• リンク: [色] オプションと同様に、ハイパーリンクを含むテキストに特定の色を適用できます。テキストがハイパーリンクされている場合は、選択した色を使用してリンクのスタイルを設定し、目立たせます。

• アイコンの色: アイコンの色 (該当する場合) を選択して、ページ全体のデザインと一致していることを確認します。

• テキストの大文字と小文字: テキストの大文字と小文字の表示方法を選択します。

  • 小文字: すべてのテキストが小文字です。

  • 大文字: すべてのテキストが大文字です。

  • 大文字にする: 各単語の最初の文字を大文字にします。

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

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

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

  • オーバーライン: テキストの上に線を描きます。

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

• 整列: コンテナ内のテキストの配置を設定します。 ページのデザインに基づいて、テキストを左、中央、または右に揃えることを選択できます。

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

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

• ぼかし: 影の表示のぼかしやシャープさを設定します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. 色: カラーピッカーを使用して、影の色の設定を選択します。

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

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

• Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。

• Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。

• 詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。