ビジュアルデザインスタジオでグローバルCSSを編集する

最終更新日:

ビジュアルデザインスタジオ(Visual Design Studio)でグローバルCSSを編集することで、ガイドやリソースセンターのスタイルをカスタマイズできます。たとえば、次のようなことが可能です。

  • バッジの位置を変更する
  • リソースセンターのホームビューを変更する
  • ガイド間で標準的な変更を加える
  • ライトモードとダークモードを切り替える

グローバルCSS編集のユースケース

以下のリストは、スタイル変更のユースケースを示しています。

  • 新しいキャレットのsvgファイルをアップロードする(プライマリツールチップまたは左/右キャレット)
  • 見出しのアイコンを追加する
  • リソースセンターのホームビューモジュールにアイコンを追加する
  • リスト項目に枠線を追加する
  • リスト項目に背景色を追加する
  • 仕切り線の幅を広げる
  • お知らせモジュールの「未読」通知を修正する
  • レスポンシブな高さと幅
  • リソースセンターの「x」ボタンのサイズや位置を変更する
  • リソースセンターのボックスシャドウを削除または調整する
  • リソースセンターバッジのボックスシャドウを削除する
  • 未読通知のパルスアニメーションを変更する
  • スライドアニメーション
  • リソースセンターとガイドの境界線にグラデーションカラーを追加する

グローバルCSSを有効にする

グローバルCSSの編集を有効にするには、サブスクリプションレベルでこの機能を有効にする必要があります。 有効にするには、Pendoサポートまでご連絡ください。

グローバル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クラスを参照してください。

  1. [設定(Settings)]>[サブスクリプション設定(Subscription Settings)]に移動します。
  2. アプリケーションリストからアプリを選択します。
  3. [タグ付けとガイドの設定(Tagging & Guide Settings)]タブを選択します。

    Global_css_setting.png
  4. [詳細設定(Advanced Settings)]で、 [グローバルCSSを編集(Edit Global CSS)]を選択します。
  5. [デザイナーを起動(Launch Designer)]ダイアログで、アプリのURLを入力し、 [デザイナーを起動]を選択します。
  6. [グローバルCSSスタイル(Global CSS styles)]で、CSSに必要な変更を加え、デザイナーのヘッダーで[変更を適用(Apply changes)]を選択します。

    editglobalcss.png

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"
]
この記事は役に立ちましたか?
3人中2人がこの記事が役に立ったと言っています