ナビゲーション: ページへのナビゲーションメニューの追加

ClickFunnels の ナビゲーション 要素を使用すると、 ホーム、 会社概要、 ショップ、その他のセクションへのリンクなど、ファネルまたは Web サイトの構造化されたメニューを作成できます。この要素により、訪問者のシームレスなナビゲーションが保証され、全体的なユーザー エクスペリエンスが向上します。この記事では、Navigation 要素を追加およびカスタマイズし、そのプロパティを構成し、設計と機能の要件を満たすためにそれを使用する方法を学習します。

---

必要条件

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

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

---

ページ・エディターでのナビゲーション要素の追加

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

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

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

4. 「 ナビゲーション」 カテゴリから、「 ナビゲーション」 要素を選択します。
   

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

---

ナビゲーション要素のカスタマイズ

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

上マージン

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

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

ハンバーガーアイコン

ハンバーガーアイコンは折りたたみ可能なメニューボタンです。ユーザーがナビゲーション メニューにアクセスするための直感的でコンパクトな方法を提供します。訪問者はハンバーガー アイコンをクリックまたはタップすることでメニューを開閉でき、すっきりとしたモダンなデザインが保証されます。

注:

折りたたむ オプションが 決して に設定されている場合、 ハンバーガーアイコン は表示されず、ナビゲーション メニューは常に完全に表示されます。 ハンバーガーメニューを有効にするには、折りたたむ オプションを次のいずれかに設定します。

• モバイル: 画面サイズが 770 ピクセル以下の場合、ナビゲーション要素はハンバーガー メニューに折りたたまれます。

• 常に: ナビゲーション要素は、すべての画面サイズでハンバーガー メニューに折りたたまれます。

ハンバーガーアイコン と オーバーレイ の設定は コンポーネント設定 にまとめられています。コンポーネント設定 は、折りたたむ が モバイル または 常に に設定されている場合にのみ表示されます。

詳細については、この記事の ナビゲーション設定 セクションを参照してください。

1. 寸法

• 幅と高さ
  アイコンのサイズを制御します。これらのスライダーまたは入力値をピクセル(px)単位で手動で調整して、ハンバーガーアイコンを拡大縮小します。

  • 寸法が大きいほど、アイコンが目立ちます。

  • 寸法が小さいほど、より繊細でミニマルな外観が生まれます。

2. バーのスタイルとサイズ

• バースタイル: さまざまなバーのデザインから選択して、アイコンの外観をカスタマイズします。オプションには、デザインの好みに合わせて 3 行のスタックやバリエーションが含まれます。

• バーサイズ: ハンバーガーアイコン内の各線(バー)の太さを調整します。太字のアイコンの場合はサイズを大きくしたり、サイズを小さくしたりして、より洗練されたスタイルにします。

3. 色

• バーカラー: ハンバーガーアイコンのバーの色をブランドに合わせて変更します。たとえば、暗い背景には白いバーの色を使用し、明るい背景には黒いバーを使用します。

• バックグラウンド： アイコンコンテナの背景色を設定します。透明な背景は、多くの場合、クリーンでモダンなデザインに最適です。

4. バーのボーダー半径

バーのボーダー半径 を大きくして、バーのエッジを滑らかにします。値を大きくすると丸みを帯びたバーが作成され、より柔らかく、角張りのない外観になります。

5. 正当化

ハンバーガーアイコンをナビゲーションコンテナ内に揃えます。オプションには 左、中央、右 があります。

6. パディング

ハンバーガーアイコンのコンテナ内のスペースを調整します。

• 上と下: 垂直方向の間隔を変更します。

• 左 + 右: 水平方向の間隔を変更します。

7. シャドウ

影効果を有効にして、アイコンに奥行きを加えます。強度とオフセットをカスタマイズして、3D 外観を作成します。

8. ボーダー

ハンバーガーアイコンのコンテナの周囲に境界線を適用して、定義を追加します。境界線の幅、色、スタイルを調整できます。

9. コーナー半径

ハンバーガーアイコンの容器の角を丸めます。値を大きくすると、エッジがより湾曲し、よりソフトなデザインの美学に最適です。

オーバーレイ

オーバーレイは、ハンバーガー アイコンをクリックしたときに全画面オーバーレイを作成することで、ナビゲーション エクスペリエンスを向上させる機能です。これにより、背景コンテンツを暗くしたりブロックしたりしながら、ナビゲーション メニュー項目を気を散らすことなく表示する最新の方法が保証されます。

ナビゲーションリンク

オーバーレイに表示される ナビゲーションリンク は、 ナビゲーション 要素で構成されたリンクと同じです。これらのリンクには、メニュー項目、サブメニュー、ブログのサブメニュー、または画像を含めることができます。オーバーレイでは、サブメニューは展開された状態で表示され、その項目が親メニュー項目の下に一覧表示されます。メニュー項目のアイコンもリンクの横に表示されます。訪問者がオーバーレイ内のリンクをタップすると、メニューが閉じます。リンクの追加または管理の詳細については、このガイドの ナビゲーションリンク セクションを参照してください。

追加のオーバーレイ設定

1. 上マージン:

オーバーレイコンテナの上のスペースを調整して、画面上部からの距離を制御できるようにします。スライダーを使用すると、余白の正確なピクセル値またはパーセンテージ値を設定できます。

2. 正当化

このオプションは、オーバーレイ内のメニュー項目の配置を決定します。

• 左: メニュー項目をオーバーレイの左側に揃えます。

• 中央: オーバーレイ内のメニュー項目を中央揃えにします。

• 右: メニュー項目をオーバーレイの右側に揃えます

3. ギャップ

[ギャップ] スライダーを使用すると、メニュー項目間の垂直方向の間隔を調整できます。ギャップを大きくして間隔を空けて外観にしたり、ギャップを小さくしてコンパクトなレイアウトにしたりします。

4. 背景

背景 設定 では、オーバーレイの視覚的な外観を定義して、ブランディングを強化したり、より魅力的なユーザーエクスペリエンスを作成したりできます。利用可能なカスタマイズ オプションは次のとおりです。

• 画像 URL: 背景画像の URL を入力するか、ClickFunnels 画像ギャラリーに直接アップロードします。

• イメージスタイル: 幅、高さ、または領域全体を塗りつぶすなど、オーバーレイ内でのイメージの表示方法を選択します。画像を繰り返したり中央に配置したりするなどの追加オプションも利用できます。

• 画像フィット: 背景画像の配置を調整して、オーバーレイ内に効果的に配置します。

• 色: オーバーレイの背景色を単色に設定し、背景と前景の両方の透明度をカスタマイズして、目的の効果を実現します。

• 画像フィット: オーバーレイ内で画像 (中央、左上など) を揃えます。

• 色: 単色の背景色を使用し、その透明度を調整して微妙な効果を出します。 前景の 透明度を構成することもできます。

5. 閉じるアイコン

閉じるアイコンを使用すると、訪問者はオーバーレイを閉じてメインコンテンツに戻ることができます。

• 色: オーバーレイの背景と対照的に色をカスタマイズします。

• サイズ: アイコンのサイズを調整して、目立ちやすくします。

6. タイポグラフィ

オーバーレイ内のナビゲーションリンクのテキストスタイルを制御します。

• フォントファミリと太さ: フォントを選択し、太字を調整します。

• フォントサイズと行の高さ: デスクトップビューとモバイルビューのテキストサイズと間隔を設定します。

• テキストの大文字と小文字と装飾: 大文字や下線効果などのテキスト変換を適用します。

• リンク: ナビゲーションリンクの色を設定します。

7. テキストシャドウ

シャドウ効果を使用してナビゲーションテキストに奥行きや強調を追加します。

• オフセット(XおよびY): 影の位置を調整します。

• ぼかし: 影のエッジを柔らかくしたりシャープにしたりします。

• 色: テキストと一致またはコントラストするように影の色をカスタマイズします。

ナビゲーションリンク

ナビゲーションリンク セクションでは、ナビゲーション バーに表示されるメニュー項目を追加および整理できます。これらのリンクには、通常のメニュー、サブメニュー、動的なブログのサブメニュー、さらには画像ベースのメニューを含めることができます。これらのコンポーネントを追加およびカスタマイズする手順を次に示します。

リスト内の項目にカーソルを合わせると、次の操作が表示されます。

• 項目の左側にあるハンドル (☰) をドラッグして、項目の順序を変更したり、サブメニューの中や外に移動したりします。

• 右側のゴミ箱アイコンをクリックして、項目を削除します。

• 項目の下にある + ボタンをクリックし、item、submenu、または blog submenu を選択すると、その項目の後に新しい項目が追加されます。サブメニューの場合は、新しい項目がサブメニューの中に追加されます。

メニューの追加

メニュー項目を追加するには:

• [ + メニュー] ボタンをクリックして、新しいメニュー項目を作成します。

• メニュー項目をクリックして、テキストとそのアクションをカスタマイズします。たとえば、ページへのリンクや外部リンク、またはポップアップを開くなどのカスタム アクションを追加できます。

• メニューを追加すると、ナビゲーション要素で アイテム として分類されます。
  

サブメニューを含むメニューの追加

サブメニューを使用すると、ネストされたメニュー構造を作成して、ナビゲーションを整理してユーザーフレンドリーにすることができます。

• [ + サブメニュー ] ボタンをクリックして、サブメニューを含むメニュー項目を追加します。

• サブメニューには、通常のメニューやその他のサブメニューを保持して、階層構造を作成できます。

• メニューをサブメニューに直接追加するには、サブメニューの横にある + アイコン をクリックします。これにより、そのサブメニューの下に新しいメニュー項目が子として追加されます。

• サブメニューをクリックまたはカーソルを合わせると、サブメニュー項目がドロップダウンコンテナに表示されます。
  

ページエディタでのサブメニューのプレビュー:

各サブメニューには、エディターでドロップダウンコンテナを直接プレビューできる トグルスイッチ が含まれています。 オンに 切り替えると、展開したときにサブメニューがどのように表示されるかを確認します。

ブログサブメニューの追加

ブログサブメニューは動的で、ブログカテゴリをナビゲーションに自動的に取り込みます。

• [ + ブログ サブメニュー ] ボタンをクリックして、ナビゲーションに追加します。

• ブログサブメニューのトグルスイッチを使用して、ドロップダウンがエディターでどのように表示されるかをプレビューします。

• これは、手動で更新せずにブログカテゴリを動的に表示するのに最適です。
  

画像をメニューとして追加する

画像は、テキストベースのメニューと一緒にクリック可能なメニュー項目として使用できます。たとえば、 お問い合わせ アイコンなどのボタンの画像をアップロードして、ナビゲーションの一部にすることができます。
画像をメニュー項目として追加するには:

• [ + 画像 ] ボタンをクリックして画像をアップロードします。

• 画像の項目をクリックして設定を開き、Image Url、Alt Text、Link action or URL、Target (Same window または New Tab) を設定します。
  

メニューアクション設定

ナビゲーションリンク セクションの各メニュー項目には、特定のアクションを割り当てることができます。メニュー タイトルをクリックすると、設定ウィンドウが開き、ユーザーがそのメニュー項目を操作したときに何が起こるかを定義できます。アクションを構成する方法は次のとおりです。

1. Link name: ナビゲーションバーに表示されるメニュー項目の名前を入力します (例: ホーム、ショップ、お問い合わせ)。

2. Link To: アクションのドロップダウンから、ユーザーがリンクをクリックしたときの動作を選択します。

   • 何も起こらない または リンクなし: メニュー項目にアクションを割り当てません。

   • 移動先…: 訪問者を別のページに移動します。次のいずれかのオプションを選択します。

     • カスタムURL: 開く Web アドレスを入力します。

     • カスタムアクションリンク: #open-popup、#submit-form、#close-popup、?next_funnel_step=true、?page_action=mark_complete などのリンクまたはアクションコードを入力します。

     • ストアページ: ストアページにリンクします。

     • ブログホームページ: ブログのホームページにリンクします。

     新しいウィンドウで開く チェックボックスを選択すると、新しいブラウザータブでリンクが開きます。これは、外部リンクに特に役立ちます。

   • 注文/フォームを送信: ページ上のフォームまたは注文を送信します (#submit-form)。

   • 1クリックアップセル: ファネルステップのページでのみ使用できます。

   • スクロール先…: 選択したセクションまたは要素までページをスクロールします。

   • 表示または非表示…: 選択した要素を表示または非表示にします。

   • ポップアップを開く…: ページのポップアップを開きます (#open-popup)。

   • ポップアップを閉じる…: 開いているポップアップを閉じます (#close-popup)。

   • 完了をマーク…、次のレッスンへ進む…、前のレッスンに戻る…、レッスンを再スタート…: コースレッスンのページ用です。レッスンを完了としてマークする、次のレッスンを開く、前のレッスンに戻る、またはレッスンを最初からやり直します。

   • 次のステップにリダイレクト: 訪問者をファネルの次のページに移動します (?next_funnel_step=true)。

   • ファイルをダウンロード…: 選択したファイルをダウンロードします。

3. Icon: 視覚的に強調するために、メニュー項目にアイコンを追加します。Icon セクションを開き、組み込みの Icon Picker を使用してアイコンを選択します。メニュー項目のアイコンはハンバーガーメニューにも表示されます。

4. Open Full Setting: メニュー項目をさらにカスタマイズするには、Open Full Setting をクリックして、設定パネルでその項目のすべての設定を開きます。

特殊なケース: ブログのサブメニュー

ブログのサブメニューに手動アクションの設定は必要ありません。この動的メニューには、ブログのカテゴリが自動的に表示されます。メニューは動的パス{{ blog.url }}にリンクされています。ブログのサブメニューを追加すると、ワークスペースのブログ設定に基づいて自動的に更新されます。ブログを管理するには、サイトアプリ » ブログ に移動します。

メニュー項目のフル設定へのアクセス

メニュー項目のフル設定を使用すると、高度な機能を構成し、各項目を個別にスタイル設定できます。このセクションでは、利用可能なカスタマイズ オプションを次のカテゴリに分類します。

1. リンク

   • リンク名: ナビゲーションバーに表示されるメニュー項目の名前を設定します。

   • リンクノードのクリック時のアクション: 項目をクリックしたときの動作を、Link To と同じアクションのオプションから選択します。

2. タイポグラフィ

   • 色: メニューのテキストの色をカスタマイズして、ブランディングに合わせて調整します。

   • フォントのスタイルとサイズ: 定義済みのスタイル (S、M、L、XL) から選択するか、デスクトップおよびモバイル ビューのカスタム サイズを設定します。

   • フォントファミリーと太さ: フォントの種類を選択し、その太さを調整します (例: 通常、太字)。

   • 文字間隔と行の高さ: 読みやすさのために文字と行の間の間隔を微調整します。

   • テキストの大文字と小文字: 大文字、小文字、または大文字のスタイルを適用します。

   • 装飾: 強調するために、下線、取り消し線、またはその他のテキスト効果を追加します。

3. 背景

   • 色: 単色の背景色を追加して、行動喚起などの特定のメニュー項目を強調します。

4. テキストの影

   • 影効果を有効にして、テキストに奥行きを加えます。方向(オフセットXとY)やぼかしなどのパラメータを調整して、エッジを柔らかくします。

5. アイコン前 と アイコン後

   • メニューテキストの前後にアイコンを追加して、視覚的な魅力を高めたり、リンクの目的を伝えたりします。

   • アイコン ピッカーを使用して、デザインに合わせたさまざまなアイコンから選択します。

ナビゲーション設定

ナビゲーション設定では、ナビゲーションメニューのレイアウト、動作、配置を構成できます。これらの設定により、ナビゲーション バーの表示方法と、さまざまなデバイス上のユーザーとの対話方法が決まります。以下は、ナビゲーション設定内の主な機能の内訳です。

1. アイテムが複数行に折り返すことを許可: このオプションを切り替えると、ナビゲーション項目が 1 行に収まらない場合に 2 行目に折り返すことができます。これは、多くの項目を含むメニュー、特に小さな画面で便利です。
   

2. 向き: 水平 はナビゲーション項目を 1 行に表示し、デスクトップレイアウトに最適です。垂直 は、ナビゲーション項目を列に積み上げ、通常はモバイルレイアウトまたはサイドメニューに使用されます。

3. ギャップ： [ギャップ] スライダーを使用して、ナビゲーション項目間の間隔を調整します。値を大きくすると項目間の分離が大きくなり、値を小さくするとメニューレイアウトが凝縮されます。

4. 折りたたむ: この設定は、ナビゲーションが ハンバーガーメニューに折りたたまれるタイミングを決定します。デフォルトは モバイル です。

   • 決して: ナビゲーションは完全に表示されたままで、大きな画面でも小さな画面でも折りたたまれません。

   • モバイル: 画面幅が 770 ピクセル以下の場合、ナビゲーションがハンバーガー メニューに折りたたまれます。

   • 常に: すべての画面サイズでナビゲーションをハンバーガー メニューに折りたたみます。

     注:

     ハンバーガーアイコンを有効にするには、折りたたむ オプションを モバイル または 常に に設定する必要があります。

5. 正当化
   コンテナー内のナビゲーション項目を揃えます。水平 の向きでは、項目を左、中央、右に揃えるか、項目の間または周囲にスペースを空けて配置できます。垂直 の向きでは、項目を左、中央、右に揃えることができます。折りたたむ が 常に に設定されている場合、この設定は表示されません。

サイズと位置

• 幅: スライダーを使用するか、特定の値を入力して、ナビゲーション要素の幅を調整します。幅は、デザイン要件に合わせてパーセンテージ (%) またはピクセル (px) で設定できます。たとえば、100% にすると、ナビゲーションがコンテナの幅全体にまたがることができます。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで幅の値を個別に設定できます。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

パディング

パディング 設定では、ナビゲーション要素の内側、メニュー項目の周囲のスペースを制御します。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルでパディングの値を個別に設定できます。

タイポグラフィ

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

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

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

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

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

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

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

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

• リンク: ナビゲーションリンクの色を設定します。

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

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

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

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

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

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

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

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

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

テキストシャドウ

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

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

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

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

影

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

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

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

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

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

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

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

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

サブメニュー設定

サブメニュー設定コンポーネントを使用すると、ナビゲーション要素内のサブメニューの間隔、配置、サイズを構成できます。これらの設定は、視覚的に整理されたユーザーフレンドリーなドロップダウン構造を作成するのに役立ちます。サブメニューの設定は、折りたたむ が 決して または モバイル に設定されている場合にのみ表示されます。

1. サブメニューのギャップ: スライダーを使用するか、 emに値を入力して、個々のサブメニュー項目間の間隔を調整します。ギャップを大きくすると、アイテム間の分離が広くなり、読みやすくなります。

2. サブメニューの正当化: コンテナ内のサブメニュー項目を揃えます。デザインの好みに応じて、左揃え、中央揃え、または右揃えを選択できます。

3. サブメニューサイズ: スライダーを使用して、サブメニューコンテナの幅を設定します。デフォルト設定は自動で、 コンテンツに基づいて幅が自動的に調整されます。または、カスタム幅を指定することもできます。

サブメニューのパディング

サブメニューパディングコンポーネントを使用すると、サブメニューコンテナの周囲の内部間隔を定義して、ドロップダウン内の配置と間隔を一貫させることができます。

1. 上: サブメニューの内容の上のスペースを、ピクセル(px)単位で入力するか、スライダーを使用して調整します。

2. 下: サブメニュー コンテンツの下のスペースを調整して、ドロップダウン内のバランスと配置を維持します。

3. 左 + 右: サブメニュー コンテンツの左右の水平方向のパディングを制御し、きちんとした間隔で外観を確保します。

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

サブメニューの色

サブメニューの色 コンポーネントでは、背景色とテキストの色を設定することで、ドロップダウンメニューの外観をカスタマイズできます。これらの設定により、サブメニューがブランディングと一致し、視認性が向上します。

1. 背景色: サブメニューの背景色を設定します。単色または透明度を使用して、全体的なデザインに合わせます。

2. テキストカラー: サブメニュー内のテキストの色をカスタマイズします。最適な読みやすさを得るために、背景と対照的な色を選択してください。

サブメニューの影

サブメニューの影コンポーネントを使用すると、サブメニューに影の効果を追加して、視覚的な奥行きを高め、背景と区別できます。

1. シャドウスタイル: シャドウエフェクトのタイプ( アウトセット など)やその他の使用可能なスタイルなどを選択します。

2. X方向とY方向: 影の水平方向と垂直方向の位置をピクセル単位で調整します。

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

4. スプレッド: サブメニューからシャドウが外側に広がる範囲を定義します。

5. 色: サブメニューのデザインを引き立てる影の色を選択します。

サブメニューの境界

サブメニューの境界 コンポーネントを使用すると、サブメニューの周囲に境界線を追加したり、スタイルを設定したりして、定義しやすくすることができます。

1. 境界線: 特定の端(上、下、左、右)の境界線を有効または無効にするか、すべての辺に適用します。

2. 罫線スタイル: 単線、破線、またはその他の罫線スタイルから選択します。

3. 色: サブメニューの背景と一致または対照するように境界線の色を設定します。

4. ストロークサイズ: 境界線の太さをピクセル単位で調整します。

サブメニューの角

サブメニューの角 コンポーネントを使用すると、サブメニューのコーナー半径をカスタマイズして、モダンで洗練された外観にすることができます。

1. すべてのコーナー: すべてのエッジのコーナー半径を同時に調整して、丸みを帯びたコーナーまたはシャープなコーナーを作成します。

2. エッジを分離: このオプションを有効にすると、各コーナーを個別に制御できます。

   • 左上: 左上隅の半径を調整します。

   • 右上: 右上隅の半径を調整します。

   • 左下: 左下隅の半径を調整します。

   • 右下: 右下隅の半径を調整します。

コントロールパネル

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

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

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

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

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

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

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

詳細設定

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

• 詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。

• 詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。

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