サイドバー : コースページへのコースサイドバーナビゲーションの追加

サイドバー要素の レンダリングモード 設定は、ナビゲーションメニューでのコースコンテンツの表示方法と整理方法を決定します。

クラシックモード:

• モジュールとレッスンの単純な階層構造を表示します。

• すべてのモジュールとレッスンは展開可能なリストとして表示されるため、ユーザーは簡単にナビゲートできます。

アセンションモード

• コンテンツを各モジュールのタブに整理し、選択したタブの下にレッスンをネストします。

• 一度に 1 つのモジュールを表示することで、よりクリーンで焦点を絞ったレイアウトを提供します。

サイドバー要素の[ ドリップモジュールを表示 ]設定は、ドリップスケジュールに基づいて、ロックされたコースモジュールとレッスンを表示するか、今後のコースモジュールとレッスンを表示するかどうかを制御します。各オプションの機能は次のとおりです。

• はい: ロックされたモジュールやスケジュールされたモジュールを含むすべてのモジュールが表示され、学生は今後のコンテンツをプレビューできます。

• いいえ: ロック解除されたアクセス可能なモジュールのみが表示され、サイドバーは現在のコンテンツに焦点を合わせます。

ドリップモジュールの追加の詳細については、 How to Manage Course Modules 記事をご覧ください。

サイドバー要素には、コースのレイアウトやデザインの好みに合わせて外観と機能を調整できるカスタマイズ可能な設定がいくつか含まれています。  

• 幅: サイドバーの幅をコンテナを基準にして調整します(たとえば、全幅の場合は100%に設定します)。

• パディング: 上と下: サイドバー要素内に垂直方向の間隔を追加します。

• 垂直方向の間隔: ナビゲーション内の項目間の間隔を調整します。

• 背景色: ブランドに合わせてサイドバーの背景色を設定します。

• モバイルハンバーガーの色: モバイル版のナビゲーションメニューの色を選択します。

• 完了したチェックマークの色: 完了したモジュール/レッスンを示すチェックマークの色を変更します。

• 左インデント間隔: ネストされたコンテンツ項目のインデントを調整します。

• 左アイコンを無効にする: アイコン (モジュール/レッスン アイコンなど) の表示を切り替えます。

• チェックマークアイコンの無効化: 完了チェックマークの表示を切り替えます。

• コンテンツ深度の切り捨て: ネストされたナビゲーションに表示されるレベルの数を設定します (たとえば、モジュール>レッスン>サブレッスンの 3 つのレベル)。

モジュール設定では、サイドバー内のモジュールリストの外観を調整できます。背景とテキストの色をカスタマイズして、デザインがコースのテーマに合っていることを確認できます。

• 上マージン:

  「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
  
  デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

  

• 背景: モジュールセクションの背景色を選択して、視覚的に区別します。

• テキストの色: 読みやすさを向上させたり、コースのブランドに一致させたりするために、テキストの色を選択します。

コースの深さ設定は、サイドバーのネストされたモジュールとレッスンの表示とスタイルを制御します。各奥行きレベルのデザインを個別に調整できるため、外観をきめ細かく制御できます。

• 深さ1 : コースの最上位レベルのモジュールのみを表示します。
  例: 「モジュール 1」と「モジュール 2」は表示されますが、サブモジュールとレッスンは非表示になります。

• 奥行き 2: モジュールとその直接のサブモジュールを表示します。
  例: 「モジュール 1 - モジュール 1.1」は表示されますが、「モジュール 1.1」内のレッスンは非表示のままです。

• 深さ 3: モジュール、サブモジュール、レッスンを含む完全な階層を表示します。
  例: 「モジュール 1 - レッスン 1」と「モジュール 1.1 - レッスン 1」はすべてサイドバーに表示されます。

主な設定:

• 上マージン:

  「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
  
  デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

  

• 項目タイプ: この設定では、サイドバーに表示される項目の種類を制御できます。以下を選択できます。

  • 任意: セクション(モジュール)とレッスンの両方を表示します。

  • セクション: モジュールのみを表示します。

  • レッスン: 個々のレッスンのみを表示します。

• 選択した状態: 「選択した状態」 設定では、サイドバーで現在選択されている項目の外観をカスタマイズできます。たとえば、生徒が レッスン 2 を表示している場合、このレッスンのテキストまたは背景が強調表示され、その生徒の位置を示すことができます。

  • デフォルト: このスタイルは、現在選択されていないアイテムに適用されます。

  • 入選： このスタイルは、現在選択されている、またはアクティブなアイテムに適用されます。テキストを太字にしたり、フォントの色を変更したりするなど、外観をカスタマイズして目立たせることができます。

• ホバー状態: [ ホバー状態 ] 設定では、ユーザーがカーソルをアイテムの上に置いたときのアイテムの外観をカスタマイズします。これにより、インタラクティブで視覚的に明確なナビゲーション エクスペリエンスを作成できます。

  • ホバーなし: このスタイルは、ユーザーのカーソルがサイドバーの項目の上にない場合に適用されます。

  • ホバー: このスタイルは、ユーザーのカーソルをサイドバー項目にカーソルを合わせたときに適用されます。この状態をカスタマイズして、アイテムを目立たせることができます。

• タイポグラフィ：

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

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

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

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

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

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

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

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

  • 色: カラーピッカーを使用して、テキストの色を選択します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。 カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。 さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。

  • 太字: [色] オプションと同様に、テキストの太字状態の色を選択できます。この色は、テキストが太字に設定されている場合に適用され、通常のテキストと視覚的に区別できます。

  • リンク: [色] オプションと同様に、ハイパーリンクを含むテキストに特定の色を適用できます。テキストがハイパーリンクされている場合は、選択した色を使用してリンクのスタイルを設定し、目立たせます。

  • アイコンの色: アイコンの色 (該当する場合) を選択して、ページ全体のデザインと一致していることを確認します。

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

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

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

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

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

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

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

    • オーバーライン: テキストの上に線を描きます。

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

  • 整列: コンテナ内のテキストの配置を設定します。 ページのデザインに基づいて、テキストを左、中央、または右に揃えることを選択できます。

• テキストシャドウ:

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

  

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

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

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

• 境：

  「境界線」設定を使用すると、要素の周囲に境界線を追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

  

  1. スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。

  2. スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。

  3. オーバーライド： [ オーバーライド ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。

  4. 国境： 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。

  5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。

  6. 色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。

  7. ストロークサイズ: 境界線の太さは、[ ストローク サイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

• 影：

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

  

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

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

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

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

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

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

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