ClickFunnelsページへのカスタムCSSコードの追加

ClickFunnels ページ エディターでは、セクション、行、列、および要素に、エディター内で直接簡単に調整できるモダンで堅牢なレイアウトとスタイル オプションが付属しています。ただし、組み込みのデザイン設定が特定のニーズを完全に満たしていない場合や、独自のデザインを作成したい場合があります。これらのシナリオでは、ClickFunnels を使用すると、ページ上のコンテンツにカスタム CSS コードを適用できます。この記事では、カスタム CSS コードを適用して ClickFunnels ページのスタイルとカスタマイズを行う方法を学びます。

---

必要条件

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

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

警告：

カスタム CSS をページに適用するには、CSS の原則をしっかりと理解する必要があります。CSS を誤って使用または不適切に使用すると、ページ レイアウトが中断され、ClickFunnels ページ エディターの通常の機能が妨げられる可能性があります。カスタムスタイルを追加するときは注意して進めてください。

大事な：

カスタム CSS の複雑さと多様性のため、ClickFunnels サポート チームはカスタム コードに関連する問題のトラブルシューティングや支援を提供できません。高度な CSS 変更についてサポートが必要な場合は、資格のある開発者に相談することを検討してください。

---

ステップ 1: CSS セレクターの生成

CSS スタイルを適用するには、ページの特定のコンテナまたは要素をターゲットにする固有の CSS セレクター が必要です。ClickFunnels のすべてのコンテナ (セクション、行、列、要素など) では、 CSS ID を追加または生成できます。ClickFunnels には、これらのセレクターを生成する 2 つの方法があります。

CSS ID の使用

1. コンテナ(セクション、行、Flex、または要素)にカーソルを合わせ、**コードアイコン(<>)**をクリックして、コンテナのCSS設定にアクセスします。

2. ID を自動的に生成するには、[ IDを生成] リンクをクリックするか、識別しやすいようにカスタム ID 名 を入力します。
   

3. [ 更新 ] ボタンをクリックして、選択したコンテナに ID を適用すると、CSS コードで使用できます。

例： ID headline を headline 要素に適用すると、次のように CSS でターゲットにすることができます。

#headline{
background: black;
padding: 1rem;
border-radius: .70rem;
}

カスタム属性の使用

ClickFunnels では、カスタム属性を任意のコンテナ (セクション、行、列、または要素) に追加することもできます。CSS コードでは、角括弧 [] で囲まれた セレクターとしてこれらの属性を使用できます。カスタム属性を追加するには:

1. コンテナ(セクション、行、列、フレックス、または要素)にカーソルを合わせ、歯車 ⚙️アイコンをクリックします。

2. [ 高度な ]オプションに移動します。

3. [ ロジック] メニューをクリックします。

4. 次に、「 カスタム属性を追加 」ボタンをクリックして、コンテナーのカスタム属性 名 と 値を 挿入します。
   

例：data-element="paragraph", を使用してカスタム属性を追加する場合は、次のようにターゲットにすることができます。

[data-element="paragraph"] {
  padding: 10px !important;
}

---

ステップ 2: コード エディターで CSS コードを追加する

CSS セレクターを取得したら、 CSS コード エディターを使用してカスタム スタイルを適用できます。その方法は次のとおりです。

1. ページエディタで、[ 設定] > [コードを表示 ] に移動するか、 コンテナの [ コード<> ] アイコン をクリックしてコードエディタにアクセスします。

2. 左側のコードエディタタイプとしてCSS を選択します 。

3. カスタム CSS コードを CSS エディターに入力または貼り付けます。
   

4. エディターで [保存] をクリックして、スタイルを適用します。ページをプレビューして、CSS が正しく適用されていることを確認します。

---

カスタム CSS の特異性: デフォルトのデザインを上書きすることを確認する

ClickFunnelsコンテナ(セクション、要素など)には、デザイン全体の一貫性を維持するために、事前に適用されたデフォルトスタイルが付属しています。ただし、カスタム CSS を追加する場合は、スタイルがこれらの組み込み設定よりも優先されるようにする必要がある場合があります。カスタム CSS の 特異性 を理解することは、ClickFunnels のデフォルト スタイルを正常にオーバーライドするための鍵となります。

特異性を理解する:

特異性によって、複数のルールが同じ要素を対象とする場合に適用される CSS ルールが決まります。特異度の高いセレクターが優先されます。例えば：

/* Less specific */
h1 {
  color: red;
}

/* More specific */
#headline h1 {
  color: blue;
}

この場合、2 番目のルール (#headline h1) が最初のルールをオーバーライドします。

!importantの使用:

ClickFunnels の既定のスタイルが CSS によって上書きされていない場合は、 !important ルールを使用してカスタム スタイルに優先順位を付けることができます。

#headline {
  color: #000000 !important;
}

---

CSS Advanced: CSS コンビネータの使用

ClickFunnels 要素はコンテナにラップされることが多く、ID またはカスタム属性は HTML タグ ( <h1> や <p> など) に直接ではなく、コンテナに適用されます。

CSSコンビネーターの使用:

コンテナ内の正しいタグをターゲットにするには、子 (>)、子孫 (スペース)、隣接兄弟 (+) セレクターなどの CSS コンビネーターを使用できます。

例： 見出し要素に ID headlineが付いているが、その中の <h1> のスタイルを設定する必要がある場合は、次のように使用できます。

#headline > h1 {
  color: #000000 !important;
}

ヒント：

ブラウザの開発者ツールを使用して、ClickFunnels ページの要素を調べます。これにより、親ノードと子ノードの構造を識別し、スタイルを適用する正確なHTMLタグを見つけることができます。DOM 階層を調べることで、意図せずに他の要素に影響を与えることなく、特定の要素を効果的にターゲットにするための適切な CSS コンビネータを決定できます。

CSSコンビネータの詳細については、 MDN Web Docs on CSS Combinatorsを参照してください。

---

CSS コードのトラブルシューティング

カスタム CSS を使用する場合は、ベスト プラクティスに従い、問題を効果的にトラブルシューティングすることが重要です。以下にいくつかのヒントを示します。

1. 要素の検査: ブラウザの開発者ツールを使用してページを検査し、適用されたスタイルを特定します。競合やセレクターの欠落がないか確認します。

2. 構文エラーのチェック: CSS コードに、括弧やセミコロンの欠落などの構文エラーがないことを確認してください。

3. 特定のセレクターを使用する: 一意の ID またはカスタム属性を使用して正しい要素をターゲットにしてください。

4. 特異性をチェックします。 必要に応じて、 !important ルールを使用してデフォルトの CSS を上書きします。

5. プレビューとテスト: CSS の変更を適用した後は、必ずページをプレビューして、すべてが正しく表示されることを確認してください。

6. レンダリングされないテンプレート構文を修正する: CSS、ヘッダーコード、フッターコードに、閉じられていない {{ や {% など、レンダリングされないテンプレート構文が含まれている場合、エディターはページを保存しません。表示されるメッセージに従って、その部分を {% raw %} ... {% endraw %} で囲むか、削除してください。