テーマを使用すると、ガイド作成者が使用できるレイアウトとビルディングブロックのフォーマットとスタイルを設定できるため、ガイドのスタイルが管理しやすくなります。ガイド作成者は、デフォルトのスタイルを持つテーマを使うと、視覚的に一貫したガイドコンテンツを迅速に作成できます。テーマは、ビジュアルデザインスタジオ（Visual Design Studio）でガイド内のコンテナとビルディングブロックを編集すると適用できます。
モバイルなどの各種プロダクトラインやガイドコンテンツに対して複数のテーマを設定できます。アプリ間でテーマを複製してブランド全体で統一感を出すことも、Pendoサブスクリプションの各アプリに独自のテーマを持たせることもできます。ライトボックス、ツールチップ、バナーに独自のテーマを持たせることで、各種顧客エンゲージメントキャンペーンで認識してもらえるイメージを作ることができます。
要件
- Pendo管理者ユーザーは、［テーマ（Themes）］ページにアクセスして、テーマの作成、複製、削除が可能です。
- ガイド作成権限を持つPendoユーザーは、テーマをビジュアルデザインスタジオのコンテナとビルディングブロックの設定でガイドに適用できます。
デフォルトのテーマ
各アプリにはデフォルトのテーマがあります。このテーマを削除することはできず、このテーマで設定したスタイルはビジュアルデザインスタジオでどのガイドにも適用できます。デフォルトのテーマの全スタイルは、設定と名前の変更ができます。デフォルトのテーマには、［削除（Delete）］ボタンがありません。
テーマを作成する
［ガイド］セクションで［テーマ］を選択します。［テーマ］ページには現在のテーマのリストが表示されます。［テーマ］にアクセスするのが初めてであれば、リストにはアプリケーション用に作成されたデフォルトのテーマが入力されています。
ページの右上にある［+ テーマを作成（+ Create Theme）］を選択します。
注：Pendoサブスクリプションで複数のアプリケーションを設定してある場合、新しいテーマに対して希望のアプリケーションを選択するように求められます。
ビジュアルデザインスタジオが新しいタブで開き、そこで新しいテーマの詳細を編集できます。
テーマを編集する
管理者はすべてのテーマを編集できます。テーマのスタイルを変更しても、そのテーマを使ったガイドへの影響はありません。そのテーマを使用するすべてのガイドステップが［コンテナ設定（Container Settings）］でカスタムテーマに変更されます。
ヒント：新しいテーマや編集済みのテーマを使用するようにガイドを更新する必要がある場合、ガイド作成者はそのガイドをビジュアルデザインスタジオで開き、テーマを適用し、新しいスタイルで問題がないかガイドコンテンツを確認し、ガイドを保存して変更を適用する必要があります。
[テーマ（Theme）]ページのテーマにカーソルを置いて、[テーマを編集（Edit Theme）]ボタンを表示します。
[テーマの編集（Edit Theme）]をクリックし、アプリのURLを入力してVisual Design Studioを起動します。
Visual Design Studioに2つのメインパネルが表示されます。
左のパネルには、ガイドコンテナ、仕上がり、ボタンの個々のテーマ要素があります。
右のパネルで、スタイルを編集する要素をクリックします。
スタイルに変更を加えると、プレビューが左のパネルに表示されます。
ヒント：右のスタイルパネルの[詳細オプション（Advanced Options）]を切り替えると、[補足スタイル（Supplemental Styles）]などその他のプロパティが表示されます。
ガイドコンテナのスタイル
[ガイドコンテナ（Guide Container）]をクリックして、ページの右側に[ガイドコンテナのスタイル（Guide Container Styles）パネルを表示します。
[ガイドコンテナスタイル（Guide Container Styles）]パネルを使って次のプロパティを設定します。
- 背景色（Background Color）
- 枠の幅（Border Width）
- 枠の色（Border Color）
- 枠半径（Border Radius）
- キャレットのサイズと寸法（Caret Size and Dimensions）
- 影の色（Drop Shadow Color）
- 影の角度（Drop Shadow Angle）*
- 影の長さ（Drop Shadow Distance）*
- 影のぼかし（Drop Shadow Blur）*
- 影のサイズ（Drop Shadow Size）*
- 閉じるボタンの色（Close Button Color）
- 閉じるボタンにカーソルを合わせたときの色（Close Button Hover Color）
- 閉じるボタンの太さ（Close Button Weight）
- *閉じるボタンのサイズ（Close Button Size）
- 閉じるボタンの位置（Close Button Position）*
- 背景色（Backdrop Color）
- Zインデックス値（Z-Index Value）
- 補足CSSスタイル（Supplemental CSS Styles）*
*[詳細オプション（Advanced Options）]をオンにする必要があります。
仕上がりスタイル
仕上がり要素（タイトル、サブタイトル、段落、リンク）をクリックして、ページの右側に[仕上がりスタイル（Typography Styles）パネルを表示します。
[仕上がりスタイル（Typography Styles）]パネルを使って次のプロパティを設定します。
- フォントファミリー名（Font Family Name） - このドロップダウンリストには、ブラウザのデフォルトのフォントが表示されます。アプリケーションのフォント名も入力することができ、フォントはガイドで継承されます。
- フォントの太さ（Font Weight）
- フォントのサイズ（Font Size）
- フォントの色（Font Color）
- フォントの装飾（下線）（Font Decoration (Underline))
- テキスト変換（Text Transform）*
- 線の高さ（Line Height）*
- 文字間隔（Letter Spacing）*
*[詳細オプション（Advanced Options）]をオンにする必要があります。
ボタンのスタイル
ボタン要素（第1、第2、第3）をクリックして、ページの右側に[ボタンのスタイル（Button Styles）]パネルを表示します。各ボタンには異なるデフォルトのスタイルとユーザーが定義できるホバースタイルがあります。
[ボタンのスタイル（Button Styles）]パネルを使って次のプロパティを設定します。
デフォルトのスタイル
- 背景色（Background Color）
- 枠の幅（Border Width）
- 枠の色（Border Color）
- 枠半径（Border Radius）
- フォントファミリー名（Font Family Name） - 注：このドロップダウンリストには、ブラウザのデフォルトのフォントが表示されます。アプリケーションのフォント名も入力することができ、フォントはガイドで継承されます。
- フォントの太さ（Font Weight）
- フォントのサイズ（Font Size）
- フォントの色（Font Color）
- フォントの装飾（下線）（Font Decoration (Underline))
- テキスト変換（Text Transform）*
- 線の高さ（Line Height）*
- 文字間隔（Letter Spacing）*
- パディング（Padding）
ホバースタイル
- 背景色（Background Color）
- 枠の色（Border Color）
- フォントの太さ（Font Weight）
- フォントの色（Font Color）
*[詳細オプション（Advanced Options）]をオンにする必要があります。
水平線のスタイル
［水平線の要素（Horizontal Line element）］をクリックすると、ページの右側に［水平線スタイル（Horizontal Line Style）］パネルが表示されます。
［水平線スタイル］パネルでは、次の線のプロパティと種類を設定できます。
- 色（Color）
- 太さ（Thickness）
- タイプ（Type）（ウェブガイドのみ）
- 実線（Solid）
- 点線（Dotted）
- 破線（Dashed）
補足スタイル
[ガイドコンテナスタイル（Guide Container Styles）]パネルでは、CSSを使ってコンテナ要素のスタイルを設定できます。
/* ガイドのコンテナサイズ */
._pendo-step-container-size{
}
/* ガイドのバックドロップ */
._pendo-backdrop{
}
/* ガイドのコンテナスタイル */
._pendo-step-container-styles{
}
/* ガイドを閉じる"X" */
._pendo-close-guide{
}
補足スタイルを編集するには、ビジュアルデザインスタジオを起動して、［ガイドコンテナスタイル（Guide Container Styles）］パネルで［詳細オプション（Advanced Options）］を切り替えます。切り替え後、このテーマがガイドで使用されるときに適用される未加工CSSスタイルにアクセスできます。
注：この機能はモバイルアプリケーションのテーマでは使用できません。
CSSクラスをテーマに追加する
CSSクラスをガイドのコンテナレベルでガイドに追加すると、アプリケーションのスタイルシートのスタイルを継承できます。これはテーマ内で実行されるため、このクラスを多くのガイドに適用できます。
注：CSSの変更は、ガイドのレイアウト選択では表示されません。
テーマにCSSクラスを追加する方法は次のとおりです。
- CSSクラスのスタイルを設定します。
- ［ガイドコンテナのスタイル（Guide Container Styles）］パネルで［詳細オプション（Advanced Options）］に切り替え、［補足スタイル（Supplemental Styles）］に、「my-class」などのCSSクラスの名前を入力します。
デザイナーでテーマを適用する
これで、複数のテーマ、複数の仕上がりやボタンのスタイルが揃ったので、Visual Design Studioでこれらのテーマやスタイルをガイドに適用することができます。
ガイドにテーマを適用する
[ガイドステップ（Guide Step）]で、[ガイドコンテナ（Guide Container）]の枠をクリックして、[コンテナ設定（Container Settings）]を開きます。
[テーマ（Theme）]ドロップダウンメニューでテーマを選択します。
- 管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。
新しいテーマをガイドに適用すると、ビルディングブロックのテーマ設定が上書きされます。たとえば、ダークテーマの第1ボタンがある場合に新しいライトテーマを適用すると、ボタンにはライトテーマで設定した第1ボタンスタイルが使用されます。
テキストブロックにテーマスタイルを適用する
［テーマスタイル（Theme Style）］ドロップダウンでタイトル、サブタイトル、段落のスタイルを選択して、ガイドコンテナで選択したテーマから仕上がりのテーマスタイルを適用します。
- 管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。
ボタンブロックにテーマスタイルを適用する
［ボタンスタイル（Button Style）］ドロップダウンで第1、第2、第3ボタンを選択して、ガイドコンテナで選択したテーマからのボタンテーマを適用します。
- 管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。
テーマを複製する
テーマはどれでも複製できます。アプリ間でテーマをコピーしたり、既存のテーマにいくつかの変更を加えて新しいテーマを作成したいときには、良い方法があります。
テーマにカーソルを合わせると[複製（Duplicate）]ボタンが表示されるので、[テーマを複製（Duplicate Theme）]をクリックします。
ポップアップが表示されたら、テーマの名前を入力します。デフォルト名は［（元のテーマ名）のコピー（Copy of ...）］です。複数のアプリがある場合は、テーマの複製先のアプリも選択する必要があります。
テーマを削除する
テーマにカーソルを合わせると[削除（Delete）]ボタンが表示されるので、[テーマを削除（Delete Theme）]をクリックします。デフォルトのテーマ以外ならどれでも削除できます。
テーマを削除するかどうかを確認するポップアップが表示されます。そのテーマを使用しているガイドには影響しません。
よくある質問
レイアウトとテーマはどのように連動するのですか？
Pendo管理者は、カスタマイズしたデフォルトのテーマを設定できます。ガイドの作成時、これらのテーマをデフォルトのレイアウトに適用できます。適用後、設定したガイドを使用して、レイアウトでガイドを作成できる他のPendoユーザー用にレイアウトとして保存できます。
すべてのガイドのテーマを一括して更新することはできますか？
現時点ではできません。テーマの一括処理を現在開発中です。
ガイドに適用されているテーマを削除したらどうなりますか？
ガイドには影響しません。ガイドのテーマはカスタムに変更されます。その後、ガイドにアクセスして、ガイドテーマを個別に更新することができます。
テーマに変更を加えると、そのテーマが適用されている全ガイドが更新されますか？
いいえ、テーマの一括処理は現在開発中です。現時点では、ガイドにアクセスして新しいテーマを再適用するか、ガイドを新しいテーマで保存し直す必要があります。
継承とは何ですか？
[継承（Inherit）]オプションを使用すると、アプリケーション内で開発者によってすでにコーディングされたスタイルオプションを引き込むことができます。
アプリで使用しているフォントファミリー名が表示されないのはなぜですか？
アプリケーション内ですでに使用しているフォントファミリーがある場合は、[継承（Inherit）]を選択してそのフォントファミリーを使用してください。スタイルに含まれている第2のフォントファミリーを使用したい場合は、そのフォント名を入力できます。
カスタムコードブロックをガイドに追加するとどうなりますか？
ターゲットクラスや要素IDがテーマの一般的なターゲットよりも具体的な場合、ガイドステップのコードブロックによってテーマのスタイルが上書きされます。コードブロックのスタイルはいずれもそのガイドステップのみに適用され、必要に応じてカスタマイズを追加するためのものです。