カスタム CSS

Amplitudeには、ガイドとサーベイの外観をカスタマイズするための2つのオプションがあります。テーマは、ガイドやサーベイの全体的な外観を制御します。カスタムCSSは、テーマでは対応できない特定のスタイル設定のニーズをきめ細かく制御できます。Amplitudeはほとんどのカスタマイズにテーマを使用することを推奨しています。テーマはより優れた柔軟性と下位互換性を提供するためです。

Web SDKのみ

Web SDKではカスタムCSSを使用できます。モバイルSDK（iOS、Android、React Native）ではカスタムCSSをサポートしていません。

カスタム CSS の仕組み

Guides and Surveys SDKはフォームファクター要素にCSSクラスを追加するため、CSSで要素をターゲティングできます。これらのセレクタ：

カスタムスタイル設定のための安定したターゲットを提供
コンテナと親要素に焦点を当てる
既存のテーマ設定と連携して動作します

クラスセレクタ

CSSクラスセレクターを使用して、ガイドとサーベイの要素をターゲットにします：

css

/* Target banner container */
.amplitude-engagement-banner-container {
  background-color: #f0f0f0;
}
/* Target modal overlay */
[data-amplitude-engagement-modal-overlay] {
  background-color: rgba(0, 0, 0, 0.8);
}

フォームファクタコンテナ

フォームファクタ	セレクター
バナー	`.amplitude-engagement-banner-container`
カード	`.amplitude-engagement-card-container`
モーダル	`.amplitude-engagement-modal-container`
モーダルオーバーレイ	`[data-amplitude-engagement-modal-overlay]`
ポップオーバー	`.amplitude-engagement-popover-container`
ツールチップ	`.amplitude-engagement-tooltip-content`
ピン	`.amplitude-engagement-pin`
チェックリスト	`.amplitude-engagement-checklist`

共通要素

エレメント	セレクター
閉じるボタン	`.amplitude-engagement-close`
画像	`.amplitude-engagement-image`
ビデオ	`.amplitude-engagement-video`
タイトル	`.amplitude-engagement-title`
コンテンツ	`.amplitude-engagement-content`
ビーコン	`.amplitude-engagement-beacon`

バナー固有の要素

エレメント	セレクター
バナー本文	`.amplitude-engagement-banner-body`
バナータイトル	`.amplitude-engagement-banner-title`
バナーコンテンツ	`.amplitude-engagement-banner-content`
バナーアクション	`.amplitude-engagement-banner-actions`
バナー閉じるボタン	`.amplitude-engagement-banner-close-button`

ツールチップ固有の要素

エレメント	セレクター
ツールチップのコンテンツ	`.amplitude-engagement-tooltip-content`
ツールチップマーカー	`.amplitude-engagement-tooltip-marker`
ツールチップマーカー（画像）	`.amplitude-engagement-tooltip-marker__image`
ツールチップマーカー（アイコン）	`.amplitude-engagement-tooltip-marker__icon`
ツールチップマーカー（ビーコン）	`.amplitude-engagement-tooltip-marker__beacon`

ツールチップで要素をマーカーとして使用設定（Webのみ）を使用すると、Amplitudeは個別のマーカー要素をレンダリングしないため、上記の表に記載されているツールチップのマーカーセレクタはどの要素にも一致しません。詳細については、フォームファクタガイドのツールチップを参照してください。

ピン固有の要素

エレメント	セレクター
ピン	`.amplitude-engagement-pin`
ピンビーコン	`.amplitude-engagement-pin-beacon`
ピンのコンテンツ	`.amplitude-engagement-pin-content`
ピンの矢印	`.amplitude-engagement-pin-arrow`
ピンマスク	`.amplitude-engagement-pin-mask`

チェックリスト固有の要素

エレメント	セレクター
チェックリスト	`.amplitude-engagement-checklist`
チェックリストヘッダー	`.amplitude-engagement-checklist-header`
チェックリストのタイトル	`.amplitude-engagement-checklist-title`
チェックリストのサブタイトル	`.amplitude-engagement-checklist-subtitle`
チェックリストの進捗状況	`.amplitude-engagement-checklist-progress`
チェックリストの閉じるボタン	`.amplitude-engagement-checklist-close-button`
チェックリスト項目ヘッダー（拡張済み）	`.amplitude-engagement-checklist-item-header__expanded`
チェックリスト項目ヘッダー（折りたたみ）	`.amplitude-engagement-checklist-item-header__collapsed`
チェックリスト項目本文	`.amplitude-engagement-checklist-item-body`
チェックリスト項目のコンテンツ	`.amplitude-engagement-checklist-item-content`
チェックリスト項目ボタン	`.amplitude-engagement-checklist-item-buttons`
チェックリスト項目ボタン（プライマリ）	`.amplitude-engagement-checklist-item-button__primary`
チェックリスト項目ボタン (セカンダリ)	`.amplitude-engagement-checklist-item-button__secondary`

カード固有の要素

エレメント	セレクター
カード	`.amplitude-engagement-card`
カードのコンテンツ	`.amplitude-engagement-card-content`

モード固有の要素

エレメント	セレクター
モーダルボディ	`.amplitude-engagement-modal-body`

アクションバー要素

これらのセレクターを使用して、ナッジフッターのアクションバー領域をターゲットにすることができます。各レイアウトには基本クラスとレイアウト固有のバリアントクラスが適用されるため、すべてのレイアウトを一緒にスタイル設定したり、特定のレイアウトをターゲットにしたりできます。

エレメント	セレクター
アクションバーコンテナ	`.amplitude-engagement-actions-bar-container`
アクションバー	`.amplitude-engagement-actions-bar`
クラシックおよび分割レイアウトのバリアント	`.actions-bar-layout-classic`
スタックレイアウトのバリアント	`.actions-bar-layout-stacked`
中心配置レイアウトのバリアント	`.actions-bar-layout-centered`

たとえば、すべてのナッジフッターレイアウトでCTAの上に境界線を追加したり、特定のレイアウトのみをスタイル設定したりするには、次のようにします。

css

/* Add a border above CTAs in all guide/survey footer layouts */
.amplitude-engagement-actions-bar-container {
  border-top: 1px solid #000000;
}
/* Style only Classic and Split layout footers */
.amplitude-engagement-actions-bar.actions-bar-layout-classic {
  padding-top: 12px;
}

ボタンとアクション

エレメント	セレクター
CTAボタン	`.amplitude-engagement-cta-button`
CTAボタン（プライマリ）	`.amplitude-engagement-cta-button__primary`
CTAボタン（セカンダリ）	`.amplitude-engagement-cta-button__secondary`
バナーアクション	`.amplitude-engagement-banner-actions`

フォーム要素（サーベイ要素）

エレメント	セレクター
アンケートプロンプト	`.amplitude-engagement-survey-prompt`
List	`.amplitude-engagement-list`
リストのドロップダウン	`.amplitude-engagement-list-dropdown`
レーティング	`.amplitude-engagement-rating`
レーティング（絵文字）	`.amplitude-engagement-rating__emojis`
評価（数値）	`.amplitude-engagement-rating__numbers`
評価（星）	`.amplitude-engagement-rating__stars`
レーティングラベル	`.amplitude-engagement-rating-label`
評価ラベル（開始）	`.amplitude-engagement-rating-label-start`
評価ラベル（末尾）	`.amplitude-engagement-rating-label-end`
テキスト入力	`.amplitude-engagement-text-input`
短いテキスト入力	`.amplitude-engagement-short-text-input`
入力	`.amplitude-engagement-input`
選択	`.amplitude-engagement-select`
入力を選択	`.amplitude-engagement-select-input`
チェックボックスオプション	`.amplitude-engagement-checkbox-option`
ラジオオプション	`.amplitude-engagement-radio-option`

.amplitude-engagement-survey-promptセレクタは、評価、テキスト、リスト、およびドロップダウンサーベイの各ブロックで、質問プロンプトラベルをターゲットにします。.amplitude-engagement-rating-label-startおよび.amplitude-engagement-rating-label-endセレクタは、.amplitude-engagement-rating-label内の2つのスケールエンドポイントラベルをターゲットとしています。

クラスセレクタの使用

基本的なスタイリング

css

/* Style banner background */
.amplitude-engagement-banner-container {
  background: linear-gradient(to right, #667eea, #764ba2);
}
/* Customize CTA button appearance */
.amplitude-engagement-cta-button {
  border-radius: 8px;
  text-transform: uppercase;
}
/* Style close button hover state */
.amplitude-engagement-close:hover {
  opacity: 0.7;
}

特定のフォームファクタをターゲットにする

css

/* Style banners with custom background */
.amplitude-engagement-banner-container {
  background: linear-gradient(to right, #667eea, #764ba2);
}
/* Style primary CTA buttons in banners */
.amplitude-engagement-banner-container
  .amplitude-engagement-cta-button__primary {
  width: 100%;
}
/* Style checklist progress bars */
.amplitude-engagement-checklist-progress {
  background-color: #f5f5f5;
}

重要な考慮事項

カスタム CSS を実装する際には、次の考慮事項に注意してください。

特異性

デフォルトのスタイルを上書きするには、!importantを使用する必要がある場合があります。

css

.amplitude-engagement-banner-container {
  background-color: #custom-color !important;
}

セレクタの安定性

次のものではなく、ドキュメント化されたCSSクラスをターゲットにします：

内部生成されたクラス名
変更される可能性がある要素構造
文書化されていないクラスまたは属性

これは役に立ちましたか？