注： この記事では、過去に発売されたガイド体験を取り上げます（2019年2月18日以前）。この日以降にお客様になられた場合は、ビジュアルデザインスタジオ（Visual Design Studio）のカスタムコードのビルディングブロックを使用して、カスタムガイドのスタイルを設定できます。
概要
ガイドのスタイル設定には、全体に（すべてのガイドに）影響を与えるものも、個々のガイドに影響を与えるものもあります。
Pendoガイドは、次の組み合わせによってスタイルが設定されます。
- サイト内のスタイル（PendoガイドはDOM内に存在し、ページ内のスタイルを継承します）
- 共通のPendoガイドのスタイルシート
- カスタムの共通ガイドスタイル
- 特定のガイドまたはテンプレートごとのCSSタブのスタイル
スタイル階層
- インラインのスタイル設定/ガイド固有/テンプレートのスタイル設定の上書き
- 上書きするグローバルCSS
- アプリケーションのCSS
グローバルCSS
すべてのガイドに継承される共通のスタイルを指定することができます。管理者は次の方法でこれを行うことができます。
- アプリ内ガイドデザイナーに移動します。
- ウィンドウの右上隅にある［グローバル設定（Global Settings）］ボタンを選択します。
- ［グローバルCSS（Global CSS）］タブを選択します。
- ここで、すべてのガイドに継承したい任意のCSSを追加できます。Pendoが使用するすべてのCSSクラスのスタブが表示されます。これらのクラスにスタイルを追加したり、独自のクラスやIDを追加したりできます。
-
ガイドタイプ：ライトボックスまたはツールチップを選択して、グローバルCSSがデザイナー内でレンダリングされたガイドプレビューの例にどのように影響するかを確認します。これは、グローバルCSSが開いているときに自動的に表示されます。
-
プレビュータイプ：デスクトップまたはモバイルを選択して、サンプルガイドをさまざまな解像度でプレビューします。デザイナーウィンドウは自動的にサイズを変更します。
-
デフォルトCSSとカスタムCSS：［PendoのデフォルトCSSを使用（Use Pendo Default CSS）］を選択すると、デフォルトのPendoスタイルが読み込まれます。Pendoガイドのスタイルシートをご覧ください。
［カスタムCSSを追加（Add Custom CSS）］を選択して、グローバルCSSを変更するか、独自のスタイルを追加します。［カスタムCSSを追加（Add Custom CSS）］の横にある［デフォルトにリセット（Reset to Default）］をクリックすると、いつでもスタイルシートをデフォルトのCSSにリセットできます。
注：カスタムスタイルシートはデフォルトスタイルの後に読み込まれるため、カスタムシートに同じレベルのクラス指定のスタイルがある場合、カスタムスタイルがPendoのデフォルトスタイルよりも優先されます。
警告：CSSセレクターの範囲が正しく設定されていない場合、グローバルCSSがアプリケーションに適用され、そのスタイルを変更することができます。かなり強力なので、適切な注意を払いながら使用する必要があります。共通のスタイルへの変更は、既存のすべてのガイドに影響を与える可能性があります。
各ガイドのスタイル設定
各ガイド内では、ガイドの「ソース」でスタイルを追加することができます。特定のガイドまたはテンプレートのCSSタブ内で追加できます。一般に、これは他のどのスタイル設定方法よりも優先されます。