テーマを使用してガイドのスタイルを管理する

最終更新日: 2026年05月26日 19:24

テーマは、Pendoのガイドの外観と雰囲気を管理するのに役立ちます。テーマを使用して、レイアウト、仕上がり、ボタン、その他のデザイン要素に一貫したスタイルを作成し、適用できます。

ガイドテーマ権限を持つ管理者とユーザーはビジュアルデザインスタジオでテーマを設定し、ガイド作成者はガイドを作成するときにテーマを適用できます。テーマはライトモードとダークモードのバリエーションをサポートしており、アプリケーション間でテーマを再利用または複製してブランドの一貫性を維持できます。

テーマは特に次の場合に役立ちます。

複数のアプリやガイドタイプに一貫したブランディングを適用する。
ガイド作成者にレイアウトの信頼できる出発点を提供する。
アクセシビリティとダークモードのバリエーションをサポートする。

異なるプロダクトやキャンペーンのために複数のテーマを設定できます。サブスクリプション内の各アプリに独自のテーマを設定することも、一貫性を保つためにアプリ間でテーマを複製することもできます。ライトボックス、ツールチップ、バナー、埋め込みガイドはすべて、テーマを使用して個別にスタイル設定が可能です。

要件

テーマを作成して適用するには、次の役割要件を満たす必要があります。

Pendoサブスクリプション管理者とガイドテーマ権限を持つユーザーは、テーマを作成、複製、削除できます。
ガイド作成権限を持つPendoユーザーは、ビジュアルデザインスタジオでテーマを適用できます。

デフォルトのテーマ

各アプリケーションには、削除できないデフォルトのテーマが1つあります。このテーマでは、スタイルの名前を変更し、完全に構成することができます。デフォルトのテーマを見分ける最も簡単な方法は、カーソルを合わせたときに削除（ゴミ箱）アイコンがないテーマを見つけることです。

テーマを作成または編集する

サブスクリプション管理者またはガイドテーマ権限を持つユーザーは、Pendoのテーマページから新しいテーマを作成したり、既存のテーマを編集したりできます。

このページには、選択したアプリケーションの現在のテーマがすべて表示されています。まだ誰もテーマを作成していない場合、選択したアプリのデフォルトテーマがリストに表示されます。

Pendoの右上から［設定］ アイコンを選択し、［テーマ］を選択します。
新しいテーマを作成するには、ページの右上にある［ガイドを作成（+ Create Guide）］を選択します。
既存のテーマを編集するには、そのテーマにカーソルを合わせて［テーマを編集（Edit Theme）］を選択します。
アプリのURLを入力し、［デザイナーを起動（Launch Designer）］を選択します。ビジュアルデザインスタジオは新しいタブで開き、そこでテーマスタイルをすべて構成できます。

テーマエディターには2つのパネルがあります。

左のパネルには、ガイドコンテナ、仕上がり、ボタン、水平線などのテーマ要素が表示されます。
右側のパネルには、選択した要素の設定オプションが表示されます。変更を加えると、左側のパネルのプレビューがリアルタイムで更新されます。

ガイドコンテナのスタイル

左パネルでガイドコンテナを選択し、右パネルにそのスタイルオプションを表示します。PendoプランにGuides Proが含まれている場合は、オーバーレイガイドと埋め込みガイドのどちらかを選択できます。各コンテナタイプには、それぞれの構成オプションがあります。

ヒント：右側のパネルの上部にある［詳細オプション（Advanced Options）］をオンにすると、補足スタイルなどの追加のプロパティが表示されます。

タブを使用してライトモードとダークモードを切り替えます。各カラーモードは個別に設定されます。ダークモードでは、色設定のみが使用できます。ライトモードには、使用可能なすべてのスタイルプロパティが含まれています。詳細については、「カラーモード」をご覧ください。

右側のパネルを使用して次のプロパティを設定します。

背景色（Background Color）
枠の幅、色、半径（Border width, color, and radius）
キャレットのサイズと寸法（Caret size and dimensions）
ドロップシャドウの色、角度、距離、ぼかし、サイズ（Drop shadow color, angle, distance, blur, and size）*
閉じるボタンの色、カーソルを合わせた時の色、太さ、サイズ、位置（Close button color, hover color, weight, size, and position）*
背景色（Backdrop color）
Zインデックス値（Z-index value）
補足CSSスタイル（Supplemental CSS styles）*

* ［詳細オプション］ をオンにする必要があります。

仕上がりスタイル

左側のパネルで仕上がり要素（タイトル、サブタイトル、段落、リンク）を選択し、対応するスタイルオプションを右側のパネルで開きます。以下を設定できます。

フォントファミリー（Font family）
フォントの太さ、サイズ、色、装飾（下線）（Font weight, size, color, and decoration (Underline)）
テキスト変換（Text transform）*
線の高さ（Line height）*
文字間隔（Letter spacing）*

* ［詳細オプション］ をオンにする必要があります。

注：［フォントファミリー（Font Family）］には、ブラウザのデフォルトのフォントが表示されます。アプリですでにフォントファミリーが定義されている場合は、 ［継承（Inherit］を選択してそれを使用するか、セカンダリ書体のフォント名を手動で入力します。

ボタンのスタイル

左側のパネルでボタン要素（［第1（Primary）］、［第2（Secondary）］、［第3（Tertiary）］）を選択し、右側のパネルでその設定を開きます。各ボタンには異なるデフォルトのスタイルとユーザーが定義できるホバースタイルがあります。このパネルを使用すると、以下のプロパティを設定できます。

デフォルトのスタイル

背景色（Background Color）
枠の幅、色、半径（Border width, color, and radius）
フォントファミリー（Font family）
フォントの太さ、サイズ、色（Font weight, size, color）
テキスト変換（Text transform）*
文字間隔（Letter spacing）*
パディング（Padding）

*［詳細オプション］をオンにする必要があります。

注：［フォントファミリー（Font Family）］ドロップダウンリストには、ブラウザのデフォルトのフォントが表示されます。アプリ内ですでにフォントファミリーを使用している場合は［継承（Inherit］を選択して使用します。スタイルに含まれている第2のフォントファミリーを使用したい場合は、そのフォント名を入力します。

ホバースタイル

背景色（Background Color）
枠の色（Border color）
フォントの太さと色（Font weight and color）

水平線のスタイル

水平線の要素を選択すると、ページの右側に［水平線のスタイル（Horizontal Line Style）］パネルが開きます。このパネルを使用すると、以下の線のプロパティと種類を設定できます。

色（Color）
太さ（Thickness）
タイプ（Type）（ウェブガイドのみ）
- 実線（Solid）
- 点線（Dotted）
- 破線（Dashed）

テーマ内の高度な CSS（補足スタイル）

テーマの一部となるCSSを追加するには、テーマ内の高度なCSSを使用します。これらのスタイルは、テーマが使用される場所に適用されます。これはウェブテーマでのみ利用可能です。

右側のパネルで［詳細オプション］をオンにして、［補足スタイル］にアクセスします。
ガイド間で再利用するためのブランドレベルのルールのみを追加してください。

/* ガイドのコンテナサイズ */._pendo-step-container-size{
}/* ガイドのバックドロップ */._pendo-backdrop{
}/* ガイドのコンテナスタイル */._pendo-step-container-styles{
}/* ガイドを閉じる"X" */._pendo-close-guide{
}

ヒント：作成者がテーマを適用または再適用するときにテーマの変更が予測できるように、これらのルールは最小限に抑えます。

CSSクラスをテーマに追加する

CSSクラスをガイドのコンテナレベルでガイドに追加すると、アプリケーションのスタイルシートのスタイルを継承できます。これはテーマ内で実行されるため、このクラスを多くのガイドに適用できます。［継承］オプションを使用すると、アプリケーション内で開発者がすでにコーディングしたスタイル設定をPendoで使用することができます。

CSS内で、新しく適用されたCSSクラスには、Pendoガイドコンテナに関連付けられたIDも含める必要があります。

サイズ
背景
スタイル
ガイド「X」を閉じます。

テーマにCSSクラスを追加する場合、ガイドがアプリから継承すべきCSSを引き出すために、Pendo IDではなくメインクラスをテキストボックスに追加します。

注：CSSへの変更は、ガイドのレイアウト選択には表示されません。

テーマにCSSクラスを追加する方法は次のとおりです。

CSSクラスのスタイルを設定します。
［ガイドコンテナスタイル］パネルで、［詳細オプション］をオンにします。
［補足スタイル（Supplemental Styles）］セクションを見つけて、CSSクラスの名前を入力します。

カラーモード

テーマには、ライトとダークの2つのカラーモードがあり、それぞれを個別に設定できます。これらのカラーモードを使用すると、同じテーマ内でガイドに異なるビジュアルスタイルを作成することができます。

カラーモードはすべてのテーマ要素で利用可能です。テーマエディターのライトタブとダークタブの両方で、各要素に対して個別のカラープロパティを設定できます。

テーマエディターでは、右パネルの上部にあるタブを使用して、カラーモードを切り替えます。ライトモードには利用可能なすべてのスタイルプロパティが含まれますが、ダークモードには色のプロパティのみが含まれます。各モードは個別にスタイルを設定する必要があります。

ダークモードを設定する際は、ダークモードセレクターフィールドに、ダークモードのスタイルを適用するタイミングを特定するCSSセレクターを入力する必要があります。このセレクターは、ガイドが読み込まれるときに訪問者のブラウザに表示されている必要があります。たとえば、<body> に適用されるクラスや、ダークモードがアクティブな場合はルート要素に適用されるクラスなどです。

CSSセレクターが検出されると、Pendoはダークモードスタイルを自動的に適用します。テーマエディターで両方のカラーモードを直接プレビューし、必要に応じてそれぞれを調整できます。

ヒント：ブラウザの開発者ツールを使用するか、開発チームに依頼して、アプリケーションのダークモードに適したCSSセレクターを確認してください。

テーマのドロップダウンでカスタムを選択することで、ガイドまたはブロックレベルでカラーモードのバリエーションを適用することもできます。これにより、ビジュアルデザインスタジオ（Visual Design Studio）で特定のガイドまたは要素に対してライトとダークの両方のスタイルを設定し、プレビューすることができます。

モバイルテーマのダークモード

モバイルガイドの場合、ダークモードはCSSセレクターではなく訪問者メタデータプロパティによって決定されます。

モバイルテーマのダークモードを設定するには以下の手順に従います。

モバイルガイドに使用するテーマを開くか作成します。
［ダーク］タブで、［ダークモード訪問者データプロパティ］ドロップダウンからプロパティを選択します。プロパティを選択していない場合、ダークモードスタイルは適用されません。
背景、タイトル、ボタンの色など、ダークモードのスタイルを選択します。
［保存］を選択します。

ガイドがこのテーマを使用し、ダークモードが選択されている場合、Pendoは選択された訪問者のプロパティをチェックします。プロパティが存在しtrueに設定されている場合、ダークテーマのスタイリングが適用されます。

モバイルガイドの場合、ダークモードはセッション開始時に渡されるメタデータに依存します。アプリは、age、country、role、dark_themeなどのオプションのプロパティとともにvisitorIdを送信します。dark_theme = trueなどのプロパティを渡すと、テーマ設定で同じプロパティを参照して、ダークモードが表示されるタイミングを制御できます。

モバイルガイドのダークモードの色をカスタマイズする

モバイルアプリに表示されるガイドのダークモードを設定する場合、ガイドコンテナの個々のコンポーネントの色を定義できます。

利用可能なオプションは次のとおりです。

背景色（Background Color）
枠の色（Border color）
閉じるボタンの色（Close Button Color）
背景色（Backdrop color）

色フィールドを選択して16進数の値を入力するか、ピッカーから色を選択します。これらの色は、選択した訪問者プロパティがダークモードのバリアントをトリガーしたときに適用されます。

サポートされているガイドと要素

ほとんどのガイドとリソースセンターの要素は、テーマで構成されている場合にカラーモードをサポートします。これには、オーバーレイガイドおよび埋め込みガイド、ボタン、テキスト、日付ブロックが含まれます。リソースセンターでは、ほとんどのモジュールでダークモードもサポートしています。

一部の要素とモジュールはサポートが制限されているか、追加の設定が必要です。

投票とアンケート調査およびタスクリスト。テーマによるスタイル設定はありません。これらはビジュアルデザインスタジオで直接カスタマイズできます。
NPS調査。一部の要素はテーマによってスタイル設定されていますが、ダークモードではすべての色プロパティが適用されるわけではありません。
リソースセンターのお知らせ。ダークモードの変更を適用するには、ビジュアルデザインスタジオでリソースセンターを開いて保存する必要があります。
水平線。この要素にはダークモードスタイルがまだ適用されていません。
画像。ダークモードでは画像が置き換えられたり調整されたりすることはありません。最良の結果を得るには、背景が透明な画像を使用してください。

テーマまたはテーマスタイルを適用する

さまざまなテーマやスタイルを用意できたら、次はビジュアルデザインスタジオでこれらのをガイドに適用していきます。この操作は、ご自身だけでなく、他のガイド作成者も可能です。

重要：テーマを更新しても、そのテーマを使用している既存のガイドは自動的に更新されません。変更を適用するには、ビジュアルデザインスタジオでガイドを開き、テーマを再適用して保存します。テーマを再適用すると、以前にカスタマイズされたステップや要素がカスタムテーマに切り替わることがあります。保存する前に、それらの要素を見直してください。

ガイドにテーマを適用する

ガイドステップでガイドコンテナの枠を選択して、コンテナ設定を開きます。
［スタイリング（Styling）］タブで、ドロップダウンメニューから［テーマ（Theme）］を選択します。管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。

新しいテーマをガイドに適用すると、ビルディングブロックのテーマ設定が上書きされます。たとえば、ダークテーマの第1ボタンがある場合に新しいライトテーマを適用すると、ボタンにはライトテーマで設定した第1ボタンスタイルが使用されます。

テキストブロックにテーマスタイルを適用する

［テーマスタイル（Theme Style）］ドロップダウンで［タイトル］、［サブタイトル］、または［段落］スタイルを選択すると、ガイドコンテナで選択したテーマから仕上がりのテーマスタイルが適用されます。

管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。

ボタンにテーマスタイルを適用する

［ボタンスタイル（Button Style）］ドロップダウンで［第1ボタン（Primary Button）］、［第2ボタン（Secondary Button）］、または［第3ボタン（Tertiary Button）］を選択すると、ガイドコンテナで選択したテーマからボタンテーマが適用されます。

個別のガイドまたは要素にカラーモードを適用する

ビジュアルデザインスタジオで、個別のガイドまたはビルディングブロックのカラーモードスタイルを設定できます。これは、ダークモードをテストしたり、グローバルテーマとは異なるユニークなスタイルを適用したい場合に便利です。

ビジュアルデザインスタジオで編集したいガイドまたはステップを開きます。
テーマのドロップダウンから［カスタム］を選択します。
ライトタブとダークタブを使用して、両方のカラースタイルを構成およびプレビューします。
選択したカラーモード設定を適用するために、ガイドを保存します。

ガイドまたは要素レベルで行われたカラーモードの変更は、その特定のガイドまたはステップの共通テーマを上書きします。

コードブロックでテーマのスタイルを上書きする

コードブロックを使用して、特定のガイドステップのテーマスタイルを上書きします。コードブロックのスタイルは追加したステップにのみ適用され、セレクターがより具体的な場合はテーマのルールを上書きできます。

これは、共通テーマを変更しない例外に最適です。また、ガイド間でスタイルの一貫性が崩れないように、慎重に使用する必要があります。

カスタムコードブロックの詳細については、カスタムコードでガイドをカスタマイズするを参照してください。

注：ガイドがテーマスタイルとコードブロックのオーバーライドを混在させる場合、一致するセレクターに対してはコードブロックが優先されます。

グローバルCSSでテーマスタイルを上書きする

グローバルCSSを使用して、アプリケーションレベルで全てのガイドのテーマスタイルを上書きします。

これは、カスタムコードを使用してスタイルを変更し、それをすべてのガイドにグローバルに適用したい場合に最適です。

注：共通のCSSがアプリに適用されている場合、テーマスタイルが上書きされる可能性があることをテーマページの上部にあるバナーが警告します。詳しくは、ビジュアルデザインスタジオでグローバルCSSを編集するを参照してください。

テーマを複製する

管理者やガイドテーマ権限を持つユーザーはテーマを複製できます。これは、アプリ間でテーマをコピーしたり、既存のテーマを変更して新しいテーマを作成したりする際に便利な機能です。

これを行うには、テーマにカーソルを合わせ、複製アイコンを選択します。

これにより、テーマに名前を付けるよう求めるダイアログが開きます。デフォルトの名前は［（元のテーマ名）のコピー（Copy of ...）］です。複数のアプリがある場合は、テーマの複製先のアプリも選択する必要があります。

テーマを削除する

管理者やガイドテーマ権限を持つユーザーは、デフォルトのテーマ以外のテーマを削除できます。

テーマを削除するには、以下の手順を実行します。

その上にカーソルを置き、削除（ゴミ箱）アイコンを選択します。
［テーマを削除（Delete Theme）］を選択して、サブスクリプションから削除することを確認します。

テーマを削除しても、ガイドには影響しません。ガイドテーマは［カスタム］に変わり、個別にガイドテーマを変更できるようになります。