概要
ガイドのスタイル設定には、全体に(すべてのガイドに)影響を与えるものも、個々のガイドに影響を与えるものもあります。
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にリセットできます。
各ガイドのスタイル設定
各ガイド内では、ガイドの「ソース」でスタイルを追加することができます。特定のガイドまたはテンプレートのCSSタブ内で追加できます。一般に、これは他のどのスタイル設定方法よりも優先されます。