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

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

---

必要条件

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

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

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

---

動的に生成された

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

例えば：

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

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

手記：

この設定は、見出し、サブ見出し、段落、箇条書きリスト、HTML / JS の各要素で使用できます。

---

高度なCSS

[スタイル] タブの [高度なCSS] では、位置、Zインデックス、回転の 3 つの主要なプロパティを使用して、要素のレイアウト、レイヤー、角度を微調整できます。行の場合は、ここに モバイルで列を表示 オプションも表示されます。詳しくは ページエディタ:行の追加 をご覧ください。

立場

位置 プロパティは、コンテナ (セクション、行、列、および要素) を親コンテナ内でどのように配置するかを定義します。次の 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を参照してください。

回転

回転 プロパティを使用すると、カスタム CSS を書かずに、コンテナ (セクション、行、列、要素) を指定した角度だけ傾けることができます。傾けたバッジ、チケット、ステッカー、引用カードなどのデザインのアクセントに便利です。

• スライダーを使うか、-180 から 180 度の範囲で値を入力します。正の値では時計回りに、負の値では反時計回りに回転します。

• 既定値は 0 で、コンテナは回転しません。

• 回転はエディターのキャンバスと公開ページの両方に反映されます。

手記：

回転で変わるのはコンテナの見た目だけで、レイアウト上で占めるスペースは変わりません。回転したコンテナは周囲のコンテンツと重なることがあるため、周りに十分なパディングやマージンを確保してください。回転には CSS の rotate プロパティが使われるため、同じコンテナに適用した アニメーション と併用できます。このプロパティの詳細については、MDN Web Docs を参照してください。

---

高さ

利用可能な高さを埋める

手記：

[_利用可能な高さを埋める]_オプションを含む[**高さ]**設定は、[**セクション]**設定内でのみ使用できます。行、フレックスコンテナ、要素などの他のコンテナには、このプロパティは含まれません。

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

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

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

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

大事な：

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

使い方:

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

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