ページでスタイルガイドを使用する

スタイル ガイドは、事前定義されたスタイルをフォント、色、ボタン、その他のデザイン要素に適用することで、ページのデザインの一貫性を維持するのに役立ちます。個々のコンポーネントを手動で調整する代わりに、スタイルガイドを使用すると、ページ全体に変更をすばやく均一に適用できます。この記事では、スタイル ガイドとは何か、ページ編集中にスタイル ガイドにどのようなメリットがあるか、ClickFunnels ページ エディター内でスタイル ガイドを適用またはアクセスするさまざまな方法について説明します。

---

必要条件

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

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

---

スタイルガイドとは何ですか?

スタイル ガイドは、同じガイドを使用しているすべてのページで、フォント、色、間隔、その他の表示スタイルなどのデザイン設定を定義および管理できる一元化されたツールです。スタイル ガイドを使用すると、各要素を個別にカスタマイズする代わりに、一貫したデザイン ルールが自動的に適用され、統一感のあるプロフェッショナルな外観が作成されます。

例えば：

• ブランドが見出し、ボタン、リンクに特定の色を使用している場合は、スタイルガイドでこれらの設定を行うことができます。

• フォントを更新したり、ボタンのスタイルを調整したりすると、変更は同じスタイルガイドに接続されているすべてのページに自動的に適用されるため、時間と労力を節約できます。

スタイルガイドの詳細については、「スタイル入門」の記事を参照してください。

---

スタイルガイドはどこに適用できますか?

スタイルガイドは、一貫したブランディングとデザインを維持するために、さまざまな領域に適用できます。内訳は次のとおりです。

1. サイト全体: スタイルガイドをサイト全体に適用して、システムページ(ホームページ、ブログホーム、ストアフロント、コースホームなど)を含むすべてのページに同じスタイルが反映されるようにします。

2. ファネル： オプトイン、セールス、サンキューページなど、特定のファネル内のすべてのページにスタイルガイドを割り当てて、まとまりのあるデザインを確保します。

3. コース： スタイルガイドをコースホーム、モジュール、レッスンに適用して、一貫したコーススタイルを実現します。

4. ブログ: スタイルガイドを使用して、ブログホームページと個々のブログ投稿のスタイルを設定します。

5. ストアページ: ストアホーム(ストアフロント)と個々の製品ページにスタイルガイドを割り当てて、シームレスなショッピング体験を実現します。

6. ランディングページ: 独自のデザイン要件を満たすために、スタイルガイドを特定のページ(例:会社概要や連絡先)に適用します。

---

スタイルガイドの適用方法

スタイル ガイドをページに適用するのは簡単で、Web サイトやファネルのさまざまな部分でデザインの一一性が保たれます。さまざまなコンテキストでスタイルガイドを適用する方法は次のとおりです。

サイト全体へのスタイルガイドの適用

1. ワークスペースから、左側のメニューにある サイト & ブログ アプリをクリックします。

2. [ サイト設定] を選択します。

3. [サイト設定] パネルの [ 詳細設定 ] セクションまで下にスクロールします。

4. [詳細設定] の下にある [スタイル] ドロップダウンを見つけます。

5. ドロップダウンをクリックし、目的のスタイルガイド(例:「デフォルトのスタイルガイド」またはカスタムスタイルガイド)を選択します。
   

6. ページの上部または下部にある [サイトを更新 ] をクリックして、変更を保存します。

ファネルへのスタイルガイドの適用

1. [ ファネル ] メニューからカスタマイズするファネルに移動します。

2. ファネルの右側にある 歯車⚙ アイコンをクリックします。

3. ファネル設定パネルの スタイル ドロップダウンまで下にスクロールします。

4. ドロップダウンメニューから目的のスタイルガイドを選択します。

5. [ ファネルを更新 ] をクリックして、ファネル内のすべてのページにスタイルガイドを適用します。

個々のファネルページへのスタイルガイドの適用

1. カスタマイズするページを含むファネルに移動します。

2. ファネルワークフローで目的のページを見つけます。

3. ページの横にある 3 つのドット (⋮) アイコンをクリックします。

4. ドロップダウンメニューから[ 設定 ]を選択します。

5. スタイル ガイドドロップダウン を見つけて、そのページに必要なスタイルを選択します。

6. [提出] をクリックして変更を適用します。

コースへのスタイルガイドの適用

1. ダッシュボードの左側のメニューにある コース アプリに移動します。

2. リストから編集するコースを見つけます。

3. コースタイトルの横にある**歯車⚙**アイコンをクリックします。

4. コース設定で、[ 高度な設定 ]セクションまで下にスクロールします。

5. [高度な設定] の横にある [構成] をクリックします。

6. 設定パネルで [スタイル] ドロップダウンを見つけます。

7. ドロップダウンメニューから希望のスタイルガイドを選択します。

8. [コースを更新]をクリックして、選択したスタイルガイドをコース全体に適用します。

ブログへのスタイルガイドの適用

1. サイト & ブログアプリに移動します。

2. [ ブログ] を選択します。

3. ブログダッシュボードの右上にある 歯車(⚙) アイコンをクリックします。

4. [ブログ情報] セクションで、[スタイル] ドロップダウンを見つけます。

5. そのページに必要なスタイルガイドを選択します。

6. [ ブログを更新] をクリックして、変更を適用します。

ブログページへのスタイルガイドの適用

1. サイト & ブログアプリに移動します。

2. [ ブログ] を選択します。

3. 目的のブログ投稿を見つけて、ページの右側にある 編集 アイコン ( ⚙ ) をクリックします。

4. [ 詳細設定 ] セクションで、[ スタイル] ドロップダウンを見つけます。[詳細設定] の横に [設定] が表示されている場合は、先にクリックして設定を表示します。

5. 目的のスタイルガイドを選択し、[ 保存＆閉じる]をクリックします。

ストアページへのスタイルガイドの適用

1. ストア アプリに移動し、[概要] に移動します。

2. 右上隅にある [ストアをデザイン ] ボタンをクリックします。

3. ストアエディターで、スタイルガイドを適用するストアページ(ストアフロント、製品、チェックアウトなど)を選択します。

4. ページ名の横にある**歯車⚙**アイコンをクリックして、その設定を開きます。

5. [ 高度な設定 ] セクションで、[ スタイル] ドロップダウンを見つけます。

6. ドロップダウンメニューから希望のスタイルガイドを選択します。

7. [ ページを更新 ] をクリックして、選択したスタイル ガイドをそのページに適用します。

ランディングページへのスタイルガイドの適用

1. 左側のメニューから ランディングページ アプリに移動します。

2. 目的のランディングページを見つけて、その横にある 歯車 アイコン( ⚙ )をクリックします。

3. [ 高度な設定 ] セクションで、[ スタイル] ドロップダウンを見つけます。

4. 目的のスタイルガイドを選択し、[ ページを更新]をクリックします。

---

セクション、行、および要素からのスタイルガイドへのアクセス

スタイルガイドには、ページの個々のセクション、行、または要素から直接アクセスして更新できます。

警告

スタイルガイドに変更を加えると、同じスタイルガイドを使用するサイトの他のすべての領域が自動的に更新されます。

セクションからスタイルガイドにアクセスする

1. エディタで、アウトラインがハイライト されるまでセクション にカーソルを合わせます。

2. セクションの境界線に表示される**歯車⚙**をクリックします。

3. 設定パネルで、[ ペイント] ドロップダウンを見つけます。

4. ドロップダウンの下にある [スタイルカラーを編集 ] をクリックします。

5. スタイルガイドパネルが開き、ページエディターから直接更新できます。

行からのスタイルガイドへのアクセス

1. エディターで、アウトラインがハイ ライト表示される まで行にカーソルを合わせます。

2. 行の境界線に表示される**歯車⚙**をクリックします。

3. 設定パネルで、[ ペイント] ドロップダウンを見つけます。

4. ドロップダウンの下にある [スタイルカラーを編集 ] をクリックします。

5. スタイルガイドパネルが開き、ページエディターから直接更新できます。

要素からスタイルガイドにアクセスする

1. ページ上の任意の要素(見出し、ボタン、画像など)を選択します。

2. 要素の設定パネルで、[ スタイルを編集] オプションを探します。要素の種類によっては、これは異なる設定(タイポグラフィ、ボタンスタイルなど)に表示される場合があります。

3. [ スタイルを編集] をクリックして、スタイル ガイドに従って要素の外観を更新します。