ビジュアルデザインスタジオ（Visual Design Studio）でグローバルCSSを編集することで、ガイドやリソースセンターのスタイルをカスタマイズできます。たとえば、次のようなことが可能です。
- バッジの位置を変更する
- リソースセンターのホームビューを変更する
- ガイド間で標準的な変更を加える
- ライトモードとダークモードを切り替える
グローバルCSS編集のユースケース
以下のリストは、スタイル変更のユースケースを示しています。
- 新しいキャレットのsvgファイルをアップロードする（プライマリツールチップまたは左/右キャレット）
- 見出しのアイコンを追加する
- リソースセンターのホームビューモジュールにアイコンを追加する
- リスト項目に枠線を追加する
- リスト項目に背景色を追加する
- 仕切り線の幅を広げる
- お知らせモジュールの「未読」通知を修正する
- レスポンシブな高さと幅
- リソースセンターの「x」ボタンのサイズや位置を変更する
- リソースセンターのボックスシャドウを削除または調整する
- リソースセンターバッジのボックスシャドウを削除する
- 未読通知のパルスアニメーションを変更する
- スライドアニメーション
- リソースセンターとガイドの境界線にグラデーションカラーを追加する
グローバルCSSの編集を有効にする
グローバルCSSの編集を有効にするには、サブスクリプションレベルでこの機能を有効にする必要があります。これにより、アカウント管理者はアプリケーションレベルでグローバルCSS機能にアクセスできるようになります。有効にするには、Pendoサポートまでご連絡ください。
この機能は、ユーザーがグローバルCSSを追加できないようにするために、いつでも無効にすることができます。
グローバルCSSの編集
ご利用のサブスクリプションでグローバルCSSを有効にすると、アプリケーションレベルで編集できるようになります。
注：カスタムCSSのデフォルトのクラス._pendo-guide-container、_pendo-guide-content、_pendo-launcherなどは、Pendoクラシックガイドを参照しています。これらのクラスのCSSを編集すると、クラシックガイドにのみ影響します。ここで_pendo-step-container-styles、_pendo-step-container、_pendo-resource-centerなどのビルディングブロックガイドクラスを追加すると、ビジュアルデザインスタジオでビルディングブロックを使用して作成されたガイドにもグローバルCSSが適用されます。ビルディングブロッククラスとリソースセンタークラスのリストについては、CSSクラスを参照してください。
- ［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
- アプリケーションリストからアプリを選択します。
-
［タグ付けとガイドの設定（Tagging & Guide Settings）］タブを選択します。
- ［詳細設定（Advanced Settings）］で、 ［グローバルCSSを編集（Edit Global CSS）］を選択します。
- ［デザイナーを起動（Launch Designer）］ダイアログで、アプリのURLを入力し、 ［デザイナーを起動］を選択します。
- ［グローバルCSSスタイル（Global CSS styles）］ウィンドウの［使用するスタイルシートを設定（Set Stylesheet to use）］セクションで、［カスタムCSS（Custom CSS）］を選択します。
- CSSに必要な変更を加え、ビジュアルデザインスタジオのヘッダーで［変更を適用（Apply changes）］を選択します。
注：グローバルCSSを編集すると、テーマスタイルやアプリのスタイルが上書きされます。プロパティや値に重要度を追加するには、
!importantルールを使用しなければなりません。このルールは、その特定の値に対する以前のすべてのスタイル設定ルールを上書きするものです。
サンプルシナリオ
50ピクセル（px）未満のリソースセンターアイコンを作成する場合は、ビジュアルデザインスタジオの設定を使用すると50ピクセル（px）未満のサイズを選択できないため、カスタムCSSを使用する必要があります。
以下は、変更するCSSクラスの例です。
リソースセンターのバッジ画像のサイズを変更します。
._pendo-resource-center-badge-image {
height: 40px !important;
width: 40px !important;
}
バッジコンテナの影のサイズを変更します。
._pendo-resource-center-badge-container{
height: 40px !important;
width: 40px !important;
}
未読通知バブルのサイズをバッジに比例するように変更します。
.pendo-resource-center-badge-notification-bubble {
height: 13px !important;
width: 13px !important;
padding: 3px !important;
font-size: 12px !important;
}
グローバルCSSの編集を無効にする
グローバルCSSを編集する機能をアプリケーションレベルで無効にすることができます。
- グローバルCSSの編集で説明されている手順に従って、ビジュアルデザインスタジオ（Visual Design Studio）にアクセスします。
- ［グローバルCSSスタイル（Global CSS styles）］ウィンドウの［使用するスタイルシートを設定（Set Stylesheet to use）］セクションで、［PendoのデフォルトCSS（Pendo Default CSS）］を選択します。
- ［変更を適用（Apply changes）］を選択して、ビジュアルデザインスタジオを終了します。
CSSクラス
このセクションでは、リソースセンターとガイドで使用されるCSSクラスの例をいくつか紹介します。
ビルディングブロックリソースセンターのCSSクラス
[
"_pendo-resource-center-global-container",
"_pendo-resource-center-view-transitions",
"_pendo-resource-center-view-container",
"_pendo-resource-center-home-container",
"_pendo-resource-center-home-title-container",
"_pendo-resource-center-onboarding-module-title-container",
"_pendo-resource-center-guidelist-module-title-container",
"_pendo-resource-center-sandbox-module-title-container",
"_pendo-resource-center-integration-module-title-container",
"_pendo-resource-center-home-title-text",
"_pendo-resource-center-onboarding-module-title-text",
"_pendo-resource-center-guidelist-module-title-text",
"_pendo-resource-center-sandbox-module-title-text",
"_pendo-resource-center-integration-module-title-text",
"_pendo-resource-center-close-button",
"_pendo-resource-center-home-list",
"_pendo-resource-center-module-list-item",
"_pendo-resource-center-module-list-item-text",
"_pendo-resource-center-module-list-item-style",
"_pendo-resource-center-module-list-item-text-container",
"_pendo-resource-center-module-list-item-title-text",
"_pendo-resource-center-module-list-item-subtitle-text",
"_pendo-resource-center-right-caret",
"_pendo-resource-center-left-caret",
"_pendo-resource-center-sandbox-module-code-container",
"_pendo-resource-center-integration-module-code-container",
"_pendo-resource-center-guidelist-module-list",
"_pendo-resource-center-onboarding-module-list",
"_pendo-resource-center-guidelist-module-listed-guide",
"_pendo-resource-center-onboarding-module-listed-guide",
"_pendo-resource-center-guidelist-module-listed-guide-link",
"_pendo-resource-center-guidelist-module-listed-guide-text",
"_pendo-resource-center-guidelist-module-search-bar",
"_pendo-resource-center-guidelist-module-no-matches-container",
"_pendo-resource-center-badge-container",
"_pendo-resource-center-badge-image-container",
"_pendo-resource-center-badge-image",
"_pendo-resource-center-onboarding-module-guide-row",
"_pendo-resource-center-onboarding-module-guide-complete-circle-container",
"_pendo-resource-center-onboarding-module-listed-guide-link",
"_pendo-resource-center-onboarding-module-listed-guide-text",
"_pendo-resource-center-onboarding-module-listed-guide-step-complete",
"_pendo-resource-center-onboarding-module-progress-bar",
"_pendo-resource-center-onboarding-module-progress-bar-container",
"_pendo-resource-center-onboarding-module-progress-bar-background",
"_pendo-resource-center-onboarding-module-progress-bar-fill",
"_pendo-resource-center-onboarding-module-percent-complete"
]
ビルディングブロックガイドのCSSクラス
[
"_pendo-step-container",
"_pendo-step-container-size",
"_pendo-backdrop",
"_pendo-step-container-styles",
"_pendo-close-guide",
"_pendo-simple-text",
"_pendo-text-",
"_pendo-text-plain",
"_pendo-text-link",
"_pendo-text-bold",
"_pendo-text-input",
"_pendo-text-italic",
"_pendo-text-strike",
"_pendo-text-underline",
"_pendo-text-list-unordered",
"_pendo-text-list-item",
"_pendo-text-list-ordered",
"_pendo-row",
"_pendo-button",
"_pendo-button-",
"_pendo-column",
"_pendo-image-wrapper",
"_pendo-image",
"_pendo-video-wrapper",
"_pendo-video",
"_pendo-youtube-video",
"_pendo-youtube-video-wrapper",
"_pendo-open-text-poll-question",
"_pendo-open-text-poll-wrapper",
"_pendo-open-text-poll-input",
"_pendo-yes-no-poll-question",
"_pendo-yes-no-poll-yes-button",
"_pendo-yes-no-poll-no-button",
"_pendo-number-scale-poll-question",
"_pendo-number-scale-poll-wrapper",
"_pendo-number-scale-poll-",
"-wrapper",
"_pendo-number-scale-poll-",
"_pendo-number-scale-poll-",
"-description",
"_pendo-number-scale-poll-",
"-input",
"_pendo-multi-choice-poll-question",
"_pendo-multi-choice-poll-select-border",
"_pendo-multi-choice-poll-select",
"_pendo-option",
"_pendo-badge",
"_pendo-badge-image",
"_pendo-badge-text",
"_pendo-nps-poll-question",
"_pendo-nps-poll-wrapper",
"_pendo-nps-poll-lowerbound-label",
"_pendo-nps-poll-",
"-wrapper",
"_pendo-nps-poll-",
"_pendo-nps-poll-upperbound-label",
"_pendo-nps-open-text-poll-question",
"_pendo-nps-open-text-poll-wrapper",
"_pendo-nps-open-text-poll-input",
"_pendo-nps-poll-success-message"
]