詳細設定 - スタイルのカスタマイズ

  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels は、コンテナ (セクション、行、列、要素) の外観と機能を完全にパーソナライズするのに役立つ高度な設定を提供します。これらの設定により、コンテナーの高度なスタイル、アニメーション、ロジックをより詳細に制御できます。この記事では、詳細設定内のスタイル セクションに焦点を当て、動的コンテンツを調整したり、CSS プロパティを微調整したりして、ニーズに合わせた独自のデザインを作成できます。

必要条件

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

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

  • エディターで追加されたセクション、行、列、または要素

動的に入力

動 的に入力された機能 を使用すると、動的変数を要素に統合できます。これは、ブログ、コース、ユーザー固有の情報など、外部データに基づいて変更されるコンテンツを扱う場合に特に便利です。

例えば：

  • 段落要素を使用してブログのタイトルを動的に表示する場合は、段落テキスト内に変数 {{blog.name}} を挿入し、[ 動的に入力] 設定をオンに切り替えることができます。

  • 有効にすると、ページが読み込まれるときに、システムは変数を実際のブログタイトルに動的に置き換えます。

手記：

この設定は、 見出し、 段落、またはテキスト コンテンツを直接挿入して表示できる同様の要素など、テキスト ベースの要素でのみ使用できます。

高度なCSS

[スタイル] タブの [CSS の詳細設定] では、位置と Z インデックスの 2 つの主要なプロパティを使用して、要素のレイアウトとレイヤーを微調整できます。

立場

Position プロパティは、コンテナ (セクション、行、列、および要素) を親コンテナ内でどのように配置するかを定義します。次の 2 つのオプションから選択できます。

  • 静的: コンテナは、追加のスタイル調整なしでデフォルトのフロー位置にとどまります。

  • 相対: コンテナの位置を相対に設定すると、Zインデックス値を適用してスタック順序を調整できます。これは、Z-Index 値が高いコンテナーが視覚的に優先されるため、親コンテナー内で重複するコンテナーを管理する場合に特に便利です。

Zインデックス

Z-Index プロパティは、相対配置と  連携して、コンテナーの重複を管理します。Z-Index 値が高いコンテナは、同じスタッキング コンテキスト内にある場合、値が低いコンテナの前に表示されます。

例えば：

  • セクションに 2 つの行があり、一番下の行が最初の行と重なる負の余白を持っている場合は、最初の行で [位置: 相対] を使用し、その Z インデックスを 0 より大きい値に設定して前方に移動できます。

  • 同様に、両方の行が [相対] に設定されている場合、 Z インデックス 値が高い行が優先され、他方の行の上に表示されます。

上記の例では、セクション内に 2 つの行が配置されています。2行目(白い背景)には負の 上マージン(-130px) が適用され、1行目(緑色の透明な背景)と重なっています。既定では、自然な積み重ね順序により、2 番目の行は最初の行の上に表示されます。

これを調整して最初の行を前面に出すには、最初の行の Z インデックスを 2 番目の行よりも高い値に設定します。両方の行が 相対 位置に設定され、 Zインデックス がスタック順序を決定できるようにします。この調整により、最初の行 (緑色の透明な背景) が 2 行目 (白い背景) の上に表示され、意図した視覚的階層が作成されます。

CSS の Z-Index の詳細については、 MDN Web Docsを参照してください。

高さ

使用可能な高さを塗りつぶす

手記：

[使用可能な高さを塗りつぶす]オプションを含む[高さ]設定は、[断面]設定内でのみ使用できます。行、フレックスコンテナ、要素などの他のコンテナには、このプロパティは含まれません。

[使用可能な高さを塗りつぶす]オプションを使用すると、ブラウザ ウィンドウ(ビューポート)に残っている余分な垂直方向のスペースを埋めるためにセクションを自動的に拡大できます。これは、パディングを手動で調整したり、スペーサー要素を追加したりすることなく、セクションを引き伸ばして残りの画面の高さをカバーする場合に便利です。

セクションに対してこのオプションがオンになっている場合:

  • そのセクションは、ビューポートの残りのスペースを埋めるように展開されます。

  • 複数のセクションでこの設定を有効にすると、残りのスペースはセクション間で均等に共有されます。

大事な：

フレキシブルハイト機能を機能させるには、 ボディ 表示設定を「フレックス」に設定する必要があります。「ブロック」に設定すると、オプションがオンになっていてもセクションは展開されません。

使い方:

  • フレックスハイトなし: 断面は既定の高さを維持し、ビューポートに空きスペースを残す場合があります。

  • フレックスハイト付き: セクションはビューポート内の利用可能なスペースを埋めるように引き伸ばされ、よりバランスの取れたレイアウトを提供します。

関連記事