概要
テーマを使用すると、ガイド作成者が使用できるレイアウトとビルディングブロックのフォーマットとスタイルを設定することでガイドのスタイルが管理しやすくなります。視覚的に一貫したガイドコンテンツの容易な作成に必要なデフォルトのスタイルを、テーマを使ってガイド作成者に提供します。テーマは、Visual Design Studioでガイド内のコンテナとビルディングブロックを編集すると適用できます。
モバイルなどの各種製品ラインやガイドコンテンツに対して複数のテーマを設定できます。アプリ間でテーマを複製してブランド全体で統一感を出すことも、Pendoサブスクリプションの各アプリに独自のテーマを持たせることもできます。ライトボックス、ツールチップ、バナーに独自のテーマを持たせることで、各種顧客エンゲージメントキャンペーンで認識してもらえるイメージを作ることができます。
要件
- Pendo管理者ユーザーは、[テーマ（Themes）]ページにアクセスして、テーマを作成、複製、削除できる
- ガイド作成権限を持つPendoユーザーはテーマを、Visual Design Studioのコンテナとビルディングブロックの設定でガイドに適用できる
デフォルトのテーマ
各アプリにはデフォルトのテーマがあります。このテーマを削除することはできず、このテーマで設定したスタイルはVisual Design Studioでどのガイドにも適用できます。デフォルトのテーマのすべてのスタイルの名前を変更し、設定することができます。デフォルトのテーマを見分ける最も簡単な方法は、[削除（Delete）]ボタンのないテーマを見つけることです。
テーマの作成
[ガイド（Guide）]セクションで[テーマ（Theme）]をクリックします。[テーマ（Theme）]ページには現在のテーマのリストが表示されます。[テーマ（Theme）]にアクセスするのが初めてであれば、リストにはアプリケーション用に作成されたデフォルトのテーマが入力されています。
ページの右上にある[+テーマを作成（+ Create Theme）]をクリックします。
注：Pendoサブスクリプションで複数のアプリケーションを設定してある場合、新しいテーマに対して希望のアプリケーションを選択するように求められます。
Visual Design Studioが新しいタブで開き、そこで新しいテーマの詳細を編集できます。
テーマの編集
管理者はどのテーマでも編集できます。テーマのスタイルを変更しても、そのテーマを使ったガイドのどの部分にも影響しません。そのテーマを使用するすべてのガイドステップが[コンテナ設定（Container Settings）]でカスタムテーマに変更されます。
ヒント：新しいテーマや編集済みのテーマを使用するようにガイドを更新する必要がある場合は、ガイド作成者がそのガイドをVisual Design Studioで開き、テーマを適用し、新しいスタイルで問題がないかガイドコンテンツを確認し、ガイドを保存して変更を適用する必要があります。
[テーマ（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）]をオンにする必要があります。
補足スタイル
[ガイドコンテナスタイル（Guide Container Styles）]パネルでは、CSSを使ってコンテナ要素のスタイルを設定できます。
/* ガイドのコンテナサイズ */
._pendo-step-container-size{
}
/* ガイドのバックドロップ */
._pendo-backdrop{
}
/* ガイドのコンテナスタイル */
._pendo-step-container-styles{
}
/* ガイドを閉じる"X" */
._pendo-close-guide{
}
補足スタイルを編集するには、Visual Design Studioを起動して、[ガイドコンテナスタイル（Guide Container Styles）]パネルで[詳細オプション（Advanced Options）]を切り替えます。切り替え後、このテーマがガイドで使用されるときに適用される未加工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 [Original Theme Name]）"です。複数のアプリがある場合は、テーマの複製先のアプリも選択する必要があります。
テーマの削除
テーマにカーソルを合わせると[削除（Delete）]ボタンが表示されるので、[テーマを削除（Delete Theme）]をクリックします。デフォルトのテーマ以外ならどれでも削除できます。
テーマを削除するかどうかを確認するポップアップが表示されます。そのテーマを使用しているガイドには影響しません。
よくある質問
レイアウトとテーマはどのように連動するのですか？
Pendo管理者は、カスタマイズしたデフォルトのテーマを設定できます。ガイドの作成時、これらのテーマをデフォルトのレイアウトに適用できます。適用後、設定したガイドを使用して、レイアウトでガイドを作成できる他のPendoユーザー用にレイアウトとして保存できます。
すべてのガイドのテーマを一括して更新することはできますか？
現時点ではできません。テーマの一括処理を現在開発中です。
ガイドに適用されているテーマを削除したらどうなりますか？
ガイドには影響しません。ガイドのテーマはカスタムに変更されます。その後、ガイドにアクセスして、ガイドテーマを個別に更新することができます。
テーマに変更を加えると、そのテーマが適用されている全ガイドが更新されますか？
いいえ、テーマの一括処理を現在開発中です。現時点では、ガイドにアクセスして、新しいテーマを再適用するか、ガイドを新しいテーマで保存し直す必要があります。
継承とは何ですか？
[継承（Inherit）]オプションを使用すると、アプリケーション内で開発者によってすでにコーディングされたスタイルオプションを引き込むことができます。
アプリで使用しているフォントファミリー名が表示されないのはなぜですか？
アプリケーション内ですでに使用しているフォントファミリーがある場合は、[継承（Inherit）]を選択してそのフォントファミリーを使用してください。スタイルに含まれている第2のフォントファミリーを使用したい場合は、そのフォント名を入力できます。
カスタムコードブロックをガイドに追加するとどうなりますか？
ターゲットクラスや要素IDがテーマの一般的なターゲットよりも具体的な場合、ガイドステップのコードブロックによってテーマのスタイルが上書きされます。コードブロックのスタイルはいずれもそのガイドステップのみに適用され、必要に応じてカスタマイズを追加するためのものです。