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

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

手記：

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

• モバイル: 画面サイズが 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 として分類されます。
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 画像メニューの目的のアクションを設定します(ページへのリンクやアクションのトリガーなど)。
  

メニューアクション設定

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

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

2. リンク先: この設定では、ユーザーがリンクをクリックしたときの動作を指定できます。いくつかの事前定義されたアクションから選択できます

   • 別のページに移動する: 目標到達プロセス内の特定のページにリンクします。

   • カスタムURL:URLを追加することで、外部Webサイトにリダイレクトします。

   • カスタムアクション: ポップアップを開く、ポップアップを閉じる、ページ上のセクションへのスクロール、その他のカスタム操作などのアクションを割り当てます。

     • #open ポップアップ: リンクをクリックすると、ページポップアップが開きます。

     • #submit フォーム: このオプションは、リンクをクリックしたときにオプトインフォームを送信します。

     • ?next_funnel_step=true: リンクをクリックすると、ユーザーは目標到達プロセスの次のページにリダイレクトされます。

     • #close ポップアップ: このアクションは、すでに開いているポップアップを閉じ、ポップアップを開くアクションとは逆の役割を果たします。

     • ?page_action=mark_complete: コースレッスンエディタでリンクを使用している場合、このアクションを選択すると、クリックするとレッスンが完了としてマークされます。

3. 新しいウィンドウで開く: このオプションを有効にすると、クリック時に新しいブラウザータブでリンクが開きます。これは、外部リンクに特に役立ちます。

4. アイコンピッカー: 視覚的に強調するために、メニュー項目にアイコンを追加します。アイコン オプション を切り替え、組み込みの アイコンピッカーを使用してアイコンを選択します。

5. フル設定を開きます。 メニューをさらにカスタマイズするには、[ 完全な設定を開く ] をクリックして、メニューのスタイル、配置、間隔などの追加オプションにアクセスします。

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

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

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

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

1. リンク

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

   • リンクアクションまたはURL:別のページへのリンクなどのアクション、カスタムURLを割り当てます。

   • ターゲット: リンクを同じウィンドウで開くか、新しいタブで開くかを選択します。

2. 色

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

   • 背景色: 特定のメニュー項目を目立たせるための背景色を設定します ([背景] セクションにあります)。

3. タイポグラフィ

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

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

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

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

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

4. バックグラウンド

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

5. テキストシャドウ

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

6. アイコンの前後

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

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

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

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

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

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

4. 倒れる： この設定は、ナビゲーションが ハンバーガーメニューに折りたたまれるタイミングを決定します。

   • never は 、ナビゲーションが完全に表示されたままで、大きな画面と小さな画面で折りたたまれないことを意味します。

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

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

     手記：

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

5. ジャスティフィケーション
   コンテナー内のナビゲーション項目を揃えます。左 アイテムを左に揃えます。中央は、ナビゲーション コンテナ内の項目を中央に揃えます。右 アイテムを右に揃えます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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