サイドバー : コースページへのコースサイドバーナビゲーションの追加
公開日: 更新日:
サイドバー要素を使用すると、コース構造をページに直接表示することで、学生がコースを簡単にナビゲートできます。この要素は、コースの概要から情報を取得し、モジュールとレッスンを表示して、学生の学習パスをガイドします。 コースのホーム、モジュール、および レッスン ページで使用するのに最適です。この記事では、コースのデザインに完全に適合するようにサイドバー要素を追加および構成する方法を説明します。
-
アクティブなClickFunnelsアカウント
コースページへのサイドバー要素の追加
Section titled “コースページへのサイドバー要素の追加”-
ClickFunnelsダッシュボードの左側のメニューで コース アプリに移動します。
-
カスタマイズするコースを選択し、カスタマイズ をクリックしてコースページエディタにアクセスします。
-
コースのホーム、モジュール、またはレッスンページを編集するには:
-
コースホームページ:
- コース タブで、Course Home をクリックして、メインページレイアウトにアクセスします。
- コース タブで、Course Home をクリックして、メインページレイアウトにアクセスします。
-
モジュールとレッスンのページ:
-
テンプレート タブに切り替えます。
-
Default Module Page または Default Lesson Page テンプレートを見つけます。
-
目的のテンプレートをクリックして、編集用に開きます。
-
-
-
サイドバーを配置する場所で、オレンジ色の + 要素を追加 ボタンをクリックします。
-
要素メニューで コース に移動し、サイドバー 要素を選択します。
サイドバー要素のカスタマイズ
Section titled “サイドバー要素のカスタマイズ”設定へのアクセス
Section titled “設定へのアクセス”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコン をクリックするか、要素を直接クリックします。
上マージン
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
モバイルプレビュー
モバイルプレビュー 設定は、サイドバーの設定パネルの上部に表示されます。モバイルでは、サイドバーはハンバーガーメニューから開きます。モーダルを表示 を選択するとエディタでそのモバイルメニューが開き、表示を確認してスタイルを設定できます。モーダルを非表示 を選択すると閉じます。この設定はエディタにのみ影響し、公開ページには影響しません。
レンダーモード
サイドバー要素の レンダーモード 設定は、ナビゲーションメニューでのコースコンテンツの表示方法と整理方法を決定します。
クラシック モード:
-
モジュールとレッスンの単純な階層構造を表示します。
-
すべてのモジュールとレッスンは展開可能なリストとして表示されるため、ユーザーは簡単にナビゲートできます。
アセンション モード:
-
コンテンツを各モジュールのタブに整理し、選択したタブの下にレッスンをネストします。
-
一度に 1 つのモジュールを表示することで、よりクリーンで焦点を絞ったレイアウトを提供します。
ドリップモジュールを表示
サイドバー要素の ドリップモジュールを表示 設定は、ドリップスケジュールに基づいて、ロックされたコースモジュールとレッスンを表示するか、今後のコースモジュールとレッスンを表示するかどうかを制御します。各オプションの機能は次のとおりです。 
-
はい: ロックされたモジュールやスケジュールされたモジュールを含むすべてのモジュールが表示され、学生は今後のコンテンツをプレビューできます。
-
いいえ: ロック解除されたアクセス可能なモジュールのみが表示され、サイドバーは現在のコンテンツに焦点を合わせます。
ドリップモジュールの追加の詳細については、 How to Manage Course Modules 記事をご覧ください。
サイドバー設定
サイドバー要素には、コースのレイアウトやデザインの好みに合わせて外観と機能を調整できるカスタマイズ可能な設定がいくつか含まれています。 
-
幅: サイドバーの幅をコンテナを基準にして調整します(たとえば、全幅の場合は100%に設定します)。
-
上部パディング と 下部パディング: サイドバー要素内に垂直方向の間隔を追加します。
-
垂直間隔: ナビゲーション内の項目間の間隔を調整します。
-
背景色: ブランドに合わせてサイドバーの背景色を設定します。
-
モバイルハンバーガーカラー: モバイル版のナビゲーションメニューの色を選択します。
-
完了チェックマークカラー: 完了したレッスンとサブモジュールを示すチェックマークの色を変更します。
-
モジュール間の隙間: 最上位モジュール間のスペースを調整します。クラシック モードで使用できます。
-
左のインデントスペーシング: ネストされたコンテンツ項目のインデントを調整します。
-
現在のメインモジュールからのみコンテンツを表示: はい を選択すると、学生が現在いる最上位モジュールのみが表示されます。いいえ(デフォルト)を選択すると、すべてのモジュールが表示されます。クラシック モードで使用できます。
-
左のアイコンを無効にする: レッスンの左側に表示されるアイコンを非表示にします。
-
チェックマークアイコンを無効にする: 完了チェックマークの表示を切り替えます。
-
コンテンツ深度の切り捨て: 各最上位モジュール内でサイドバーに表示するコンテンツの階層数を 2 または 3(デフォルトは 3)で設定します。それより深くネストされたコンテンツは非表示になります。たとえば 2 の場合、サブモジュール内のサブモジュールは表示されますが、その中のレッスンは表示されません。
-
サブモジュールをデフォルトで展開: はい を選択すると、ページの読み込み時にサブモジュールが展開された状態で表示されます。いいえ(デフォルト)を選択すると、学生が横の矢印をクリックするまでサブモジュールは折りたたまれたままになります。現在のページを含むサブモジュールは常に展開されます。
-
コンポーネント: このグループを展開すると、サイドバーの各パーツのスタイルを設定できます。表示されるパーツは レンダーモード によって異なり、以下のセクションで説明します。
モジュール設定
モジュール 設定では、サイドバー内の最上位モジュールの外観を調整できます。このコンポーネントは クラシック モードで使用できます。背景とテキストの色をカスタマイズして、デザインがコースのテーマに合っていることを確認できます。
-
上マージン:
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (
px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
-
背景: モジュールセクションの背景色を選択して、視覚的に区別します。
-
テキストカラー: 読みやすさを向上させたり、コースのブランドに一致させたりするために、テキストの色を選択します。
ナビゲーションリンクとモジュールタブ
アセンション モードでは、コンポーネント グループに モジュール の代わりに ナビゲーションリンク と モジュールタブ が表示されます。
-
ナビゲーションリンク: モジュールタブの上に表示されるリンクのスタイルを設定します。下部パディング と 水平パディング を設定し、リンクを追加・編集して、下記の コースの深さの設定 で説明する状態別の設定でリンクテキストのスタイルを設定できます。
-
モジュールタブ: 最上位モジュールを一覧表示するタブのスタイルを設定します。垂直間隔 を設定し、同幅タブ をオンにしてすべてのタブを同じ幅にし、下記の コースの深さの設定 で説明する状態別の設定でタブのスタイルを設定できます。
コースの深さの設定
コースの深さ1、コースの深さ2、コースの深さ3 コンポーネントでは、コースの各ネストレベルにある項目のスタイルを個別に設定できます。これらは項目の見た目を変更するもので、表示される項目を変更するものではありません。サイドバーに表示する階層数は、サイドバー設定の コンテンツ深度の切り捨て で設定します。最上位モジュール自体のスタイルは、モジュール(クラシック)または モジュールタブ(アセンション)で設定します。
-
コースの深さ1: 最上位モジュールの直下にある項目(そのモジュールのレッスンやサブモジュールなど)。
-
コースの深さ2: サブモジュール内の項目。
-
コースの深さ3: サブモジュール内のサブモジュールにある項目。コンテンツ深度の切り捨て が 3 に設定されている場合にのみ表示されます。
-
上マージン:
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (
px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
-
アイテムタイプ: コースの深さ1 と コースの深さ2 で使用できます。そのレベルのどの項目にスタイルの変更を適用するかを選択します。
-
いずれか: サブモジュールとレッスンの両方。
-
セクション: サブモジュールのみ。
-
レッスン: レッスンのみ。
-
-
選択状態: 選択状態 設定では、サイドバーで現在選択されている項目の外観をカスタマイズできます。たとえば、生徒が レッスン 2 を表示している場合、このレッスンのテキストまたは背景が強調表示され、その生徒の位置を示すことができます。
-
デフォルト: このスタイルは、現在選択されていないアイテムに適用されます。
-
選択済み: このスタイルは、現在選択されている、またはアクティブなアイテムに適用されます。テキストを太字にしたり、フォントの色を変更したりするなど、外観をカスタマイズして目立たせることができます。
-
-
ホバー状態: ホバー状態 設定では、ユーザーがカーソルをアイテムの上に置いたときのアイテムの外観をカスタマイズします。これにより、インタラクティブで視覚的に明確なナビゲーション エクスペリエンスを作成できます。
-
ホバーしていない: このスタイルは、ユーザーのカーソルがサイドバーの項目の上にない場合に適用されます。
-
ホバー中: このスタイルは、ユーザーがサイドバー項目にカーソルを合わせたときに適用されます。この状態をカスタマイズして、アイテムを目立たせることができます。
アイテムタイプ、選択状態、ホバー状態 がそれぞれ いずれか、デフォルト、ホバーしていない に設定されている場合、パネルには タイポグラフィ、背景、テキストカラー、テキストシャドウ、ボーダー、シャドウ、コーナー が表示されます。それ以外のオプションを選択すると、その状態用の タイポグラフィ、背景、テキストカラー、ボーダー が表示されます。
-
-
タイポグラフィ:
タイポグラフィ 設定では、このレベルの項目のテキストを設定します。デフォルトの状態では、スタイルガイドのプリセットスタイル(S、M、L、XL)を選択したり、スタイルを編集 を選択してそのプリセットを使用しているすべての箇所を変更したり、上書き を選択してこの要素だけのテキストをカスタマイズしたりできます。
-
フォントファミリー: このオプションを使用すると、テキストのフォントタイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。
-
太さ: このオプションは、テキストの太さを定義します。選択できる太さは、選択したフォントによって異なります。
-
フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキスト サイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
-
Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
-
Px は絶対測定値であり、テキスト サイズを正確に制御できます。
-
-
文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値(レム単位で測定)を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。
-
テキストの大文字小文字: テキストの大文字と小文字の表示方法を選択します。
-
小文字: すべてのテキストが小文字です。
-
大文字: すべてのテキストが大文字です。
-
大文字にする: 各単語の最初の文字を大文字にします。
-
-
-
背景: このレベルの項目の背景色を設定します。
-
テキストカラー: このレベルの項目のテキストの色を選択します。
-
テキストシャドウ:
テキストシャドウ セクションは、テキストの背後に微妙な影を追加し、奥行きを生み出し、読みやすさを向上させます。次のパラメータを制御できます。
-
オフセット-xとオフセット-y:影の水平方向と垂直方向の位置を調整します。
-
ぼかし: 影の表示のぼかしやシャープさを設定します。
-
色: ページデザインに一致または対照する影の色を選択します。
-
-
ボーダー:
ボーダー 設定を使用すると、要素の周囲に境界線を追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。
-
スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。
-
スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。
-
上書き: 上書き オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。
-
ボーダー: 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。
-
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。
-
色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。
-
ストロークサイズ: 境界線の太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。
-
-
シャドウ:
シャドウ 設定では、影効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
-
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
-
シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
-
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
-
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
-
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
-
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
-
色: カラーピッカーを使用して、影の色の設定を選択します。
-
-
コーナー: スタイルガイドのコーナースタイルまたは独自の値を使用して、このレベルの項目の角を丸めます。
ボーダー
ボーダー 設定を使用すると、要素の周囲に境界線を追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。
-
スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。
-
スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。
-
上書き: 上書き オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。
-
ボーダー: 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。
-
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。
-
色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。
-
ストロークサイズ: 境界線の太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。
シャドウ
シャドウ 設定では、影効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
-
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
-
シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
-
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
-
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
-
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
-
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
-
色: カラーピッカーを使用して、影の色の設定を選択します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。