ガイドのスタイル設定（クラシック）

ガイドのスタイル設定には、全体に（すべてのガイドに）影響を与えるものも、個々のガイドに影響を与えるものもあります。

Pendoガイドは、次の組み合わせによってスタイルが設定されます。

• サイト内のスタイル（PendoガイドはDOM内に存在し、ページ内のスタイルを継承します）
• 共通のPendoガイドのスタイルシート
• カスタムの共通ガイドスタイル
• 特定のガイドまたはテンプレートごとのCSSタブのスタイル

スタイル階層

• インラインのスタイル設定/ガイド固有/テンプレートのスタイル設定の上書き
• 上書きするグローバルCSS
• アプリケーションのCSS

グローバルCSS

管理者は、すべてのガイドに適用されるグローバルスタイルを指定できます。

グローバルCSSには以下の方法でアクセスします。

1. app.pendo.io/guidesに移動し、［クラシックデザイナーで管理（Manage in Classic Designer）］を選択します。
2. URLバーに「https://app.pendo.io」と入力します。左側のナビゲーションバーに読み込みエラーメッセージが表示されます。
3. ［詳細オプションを表示（Show advanced Options）］を選択します。
4. ドロップダウン矢印を選択し、任意のアプリ名を選択します。
5. ［アプリを上書き（Override app）］を選択します。

グローバルスタイルは以下の方法で指定します。

1. アプリ内ガイドデザイナーに移動します。
2. ウィンドウの右上にある［グローバル設定（Global Settings）］を選択します。
3. ［グローバルCSS（Global CSS）］タブを選択します。
4. すべてのガイドに適用したいCSSを追加します。Pendoが使用するすべてのCSSクラスのスタブが表示されます。クラスにスタイルを追加したり、独自のクラスやIDを追加したりできます。
   
   1. ガイドタイプ：ライトボックスまたはツールチップを選択して、グローバルCSSがデザイナーでレンダリングされたガイドプレビューにどのように影響するかを確認します。これは、グローバルCSSが開いているときに自動的に表示されます。
   2. プレビュータイプ：デスクトップまたはモバイルを選択して、異なる解像度のガイドプレビューを確認します。デザイナーウィンドウは自動的にサイズを変更します。
   3. デフォルトCSSとカスタムCSS：［PendoのデフォルトCSSを使用（Use Pendo Default CSS）］を選択すると、デフォルトのPendoスタイルが読み込まれます。Pendoガイドのスタイルシートを参照してください。
5. ［カスタムCSSを追加（Add Custom CSS）］を選択して、グローバルCSSを変更するか、独自のスタイルを追加します。［デフォルトにリセット（Reset to Default）］をクリックすると、いつでもスタイルシートをデフォルトのCSSにリセットできます。
6. ［保存（Save）］を選択して終了します。

注：カスタムスタイルシートはデフォルトスタイルの後に読み込まれるため、カスタムシートに同じレベルのクラス指定のスタイルがある場合、カスタムスタイルがPendoのデフォルトスタイルよりも優先されます。

警告：CSSセレクターの範囲が正しく設定されていない場合、グローバルCSSがアプリケーションに適用され、スタイルを変更することができます。これは非常に影響度が大きいため、適切な注意を払って使用してください。グローバルスタイルへの変更は、既存のすべてのガイドに影響する可能性があります。

各ガイドのスタイルを設定する

各ガイドのソースよりスタイルを追加することができます。特定のガイドまたはテンプレートのCSSタブ内で追加できます。一般に、これは他のどのスタイル設定方法よりも優先されます。