テーマを使用すると、ガイドのレイアウトとビルディングブロックのフォーマットやスタイルを設定できるため、ガイドのスタイルを管理しやすくなります。ガイド作成者は、デフォルトのスタイルを持つテーマを使うと、視覚的に一貫したガイドコンテンツを迅速に作成できます。テーマは、ビジュアルデザインスタジオ（Visual Design Studio）でガイド内のコンテナとビルディングブロックを編集すると適用できます。
Pendo管理者は、カスタマイズしたデフォルトのテーマを設定できます。ガイド作成者は、ガイドの作成時にこれらのテーマをデフォルトのレイアウトに適用できます。適用後、設定したガイドを使用して、レイアウトでガイドを作成できる他のPendoユーザー用にレイアウトとして保存できます。レイアウトの詳細については、ガイドのレイアウトを参照してください。
モバイルなどの各種プロダクトラインやガイドコンテンツに対して複数のテーマを設定できます。さらに、アプリケーション間でテーマを複製してブランド全体で統一感を出すことも、Pendoサブスクリプションの各アプリケーションに独自のテーマを持たせることもできます。多様な顧客エンゲージメントキャンペーンに合わせて、ライトボックス、ツールチップ、バナーのそれぞれに独自のテーマを設定できます。
管理者は、カスタマイズしたデフォルトのテーマを設定できます。ガイド作成者は、ガイドの作成時にこれらのテーマをデフォルトのレイアウトに適用できます。適用後、設定したガイドを使用して、レイアウトでガイドを作成できる他のPendoユーザー用にレイアウトとして保存できます。レイアウトの詳細については、ガイドのレイアウトを参照してください。
要件
- Pendo管理者ユーザーは、［テーマ（Themes）］ページにアクセスして、テーマの作成、複製、削除が可能です。
- ガイド作成権限を持つPendoユーザーは、テーマをビジュアルデザインスタジオのコンテナとビルディングブロックの設定でガイドに適用できます。
デフォルトのテーマ
各アプリケーションにはデフォルトのテーマがあり、削除することはできません。テーマ内のすべてのスタイルは、必要に応じて名前の変更や構成を行い、ビジュアルデザインスタジオで任意のガイドに適用できます。デフォルトのテーマを見分ける最も簡単な方法は、テーマにカーソルを合わせることです。［削除（Delete）］ボタンが表示されなければ、それがデフォルトのテーマです。
テーマの作成
テーマを作成するには、左側のナビゲーションから［ガイド（Guides）］>［テーマ］に移動します。［テーマ］ページには、現在のテーマが一覧表示されています。初めて［テーマ］ページにアクセスした場合、このリストにはアプリケーション用に作成されたデフォルトのテーマが表示されています。
- ページの右上にある［+テーマを作成（+ Create Theme）］を選択します。
- サブスクリプションで複数のアプリケーションを設定している場合は、新しいテーマに必要なアプリケーションを選択します。
ビジュアルデザインスタジオが新しいタブで開き、そこで新しいテーマの詳細を編集できます。
テーマを編集する
管理者はテーマを編集できます。テーマのスタイルを変更しても、そのテーマを使ったガイドのどの部分にも影響しません。テーマのスタイルを変更すると、そのテーマを使用しているすべてのガイドステップがコンテナ設定で［カスタム（Custom）］テーマに変更されます。
ヒント：テーマが編集されても、そのテーマを使用している既存のガイドは、ビジュアルデザインスタジオからテーマが再適用されるまで更新されません。新しいテーマや編集済みのテーマを使用するようにガイドを更新する必要がある場合は、ガイド作成者がそのガイドをビジュアルデザインスタジオで開き、テーマを適用し、新しいスタイルで問題がないかガイドコンテンツを確認し、ガイドを保存して変更を適用する必要があります。
［テーマ］ページのテーマにカーソルを合わせると、［テーマを編集（Edit Theme）］ボタンが表示されます。
［テーマを編集（Edit Theme）］を選択し、アプリのURLを入力してビジュアルデザインスタジオを起動します。
ビジュアルデザインスタジオには、以下の2つのパネルがあります。
- 左側のパネルには、［ガイドコンテナ（Guide Container）］、［仕上がり（Typography）］、［ボタン（Buttons）］の個々のテーマ要素があります。
- 右側のパネルで、ガイドコンテナのスタイルを編集する要素を選択します。スタイルに変更を加えると、プレビューが左側のパネルに表示されます。
ヒント：右側のスタイルパネルの［詳細オプション（Advanced Options）］をオンにすると、［補足スタイル（Supplemental Styles）］などの追加のプロパティが表示されます。
ガイドコンテナのスタイル
［ガイドコンテナ］を選択すると、ページの右側に［ガイドコンテナのスタイル（Guide Container Styles）］パネルが表示されます。このパネルを使用すると、以下のプロパティを設定できます。
- 背景色（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）*
*［詳細オプション］をオンにする必要があります。
仕上がりスタイル
仕上がり要素（［タイトル（Title）］、［サブタイトル（Sub Title）］、［段落（Paragraph）］、［リンク（Link）］）を選択すると、選択した要素に対応したスタイルのパネルがページの右側に表示されます。このパネルを使用すると、以下のプロパティを設定できます。
- フォントファミリー（Font family）
- フォントの太さ、サイズ、色、装飾（下線）（Font weight, size, color, and decoration (Underline)）
- テキスト変換（Text transform）*
- 線の高さ（Line height）*
- 文字間隔（Letter spacing）*
*［詳細オプション］をオンにする必要があります。
注：［フォントファミリー（Font Family）］ドロップダウンリストには、ブラウザのデフォルトのフォントが表示されます。アプリ内ですでに使用しているフォントファミリーがある場合は、［継承（Inherited）］を選択してそのフォントファミリーを使用してください。スタイルに含まれている第2のフォントファミリーを使用したい場合は、そのフォント名を入力してください。
ボタンのスタイル
ボタン要素（［第1（Primary）］、［第2（Secondary）］、［第3（Tertiary）］）を選択すると、選択した要素に対応した［ボタンのスタイル（Button Styles）］パネルがページの右側に表示されます。各ボタンには異なるデフォルトのスタイルとユーザーが定義できるホバースタイルがあります。このパネルを使用すると、以下のプロパティを設定できます。
デフォルトのスタイル
- 背景色（Background Color）
- 枠の幅、色、半径（Border width, color, and radius）
- フォントファミリー（Font family）
- フォントの太さ、サイズ、色（Font weight, size, color）
- テキスト変換（Text transform）*
- 文字間隔（Letter spacing）*
- パディング（Padding）
*［詳細オプション］をオンにする必要があります。
注：［フォントファミリー（Font Family）］ドロップダウンリストには、ブラウザのデフォルトのフォントが表示されます。アプリ内ですでに使用しているフォントファミリーがある場合は、［継承（Inherited）］を選択してそのフォントファミリーを使用してください。スタイルに含まれている第2のフォントファミリーを使用したい場合は、そのフォント名を入力してください。
ホバースタイル
- 背景色（Background Color）
- 枠の色（Border color）
- フォントの太さと色（Font weight and color）
水平線のスタイル
水平線の要素を選択すると、ページの右側に［水平線のスタイル（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{
}
補足スタイルを編集するには、［ガイドコンテナスタイル］パネルの［詳細オプション］をオンにします。これにより、このテーマがガイドで使用されるときに適用される未加工CSSスタイルにアクセスできるようになります。
注：この機能はモバイルテーマでは使用できません。
CSSクラスをテーマに追加する
CSSクラスをガイドのコンテナレベルでガイドに追加すると、アプリケーションのスタイルシートのスタイルを継承できます。これはテーマ内で実行されるため、このクラスを多くのガイドに適用できます。［継承］オプションを使用すると、アプリケーション内で開発者がすでにコーディングしたスタイル設定をPendoで使用することができます。
注：CSSの変更は、ガイドのレイアウト選択では表示されません。
テーマにCSSクラスを追加する方法は次のとおりです。
- CSSクラスのスタイルを設定します。
- ［ガイドコンテナスタイル］パネルで、［詳細オプション］をオンにします。
- ［補足スタイル（Supplemental Styles）］セクションを見つけて、CSSクラスの名前を入力します。
カスタムコードブロックを使用する
ターゲットクラスや要素IDがテーマの一般的なターゲットよりも具体的な場合、ガイドステップのコードブロックがテーマのスタイルを上書きします。コードブロックのスタイルはいずれもそのガイドステップのみに適用され、必要に応じて追加でカスタマイズを行うためのものです。カスタムコードブロックの詳細については、カスタムコードでガイドをカスタマイズするを参照してください。
ビジュアルデザインスタジオでテーマを適用する
さまざまなテーマやスタイルを用意できたら、次はビジュアルデザインスタジオでこれらのテーマやスタイルをガイドに適用していきます。この操作は、ご自身だけでなく、他のガイド作成者も可能です。
ガイドにテーマを適用する
- ガイドステップでガイドコンテナの枠を選択して、コンテナ設定を開きます。
- ［テーマ（Theme）］ドロップダウンメニューでテーマを選択します。
-
- 管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。
新しいテーマをガイドに適用すると、ビルディングブロックのテーマ設定が上書きされます。たとえば、ダークテーマの第1ボタンがある場合に新しいライトテーマを適用すると、ボタンにはライトテーマで設定した第1ボタンスタイルが使用されます。
テキストブロックにテーマスタイルを適用する
［テーマスタイル（Theme Style）］ドロップダウンで［タイトル］、［サブタイトル］、または［段落］スタイルを選択すると、ガイドコンテナで選択したテーマから仕上がりのテーマスタイルが適用されます。
- 管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。
ボタンにテーマスタイルを適用する
［ボタンスタイル（Button Style）］ドロップダウンで［第1ボタン（Primary Button）］、［第2ボタン（Secondary Button）］、または［第3ボタン（Tertiary Button）］を選択すると、ガイドコンテナで選択したテーマからボタンテーマが適用されます。
- 管理者またはガイドを最初から作成できるユーザーは、［カスタム（Custom）］を選択できます。ここでは、すべてのスタイル設定が表示され、テーマを上書きしてガイドの外観をさらにカスタマイズできます。
テーマを複製する
管理者はテーマを複製できます。これは、アプリ間でテーマをコピーしたり、既存のテーマを変更して新しいテーマを作成したりする際に便利な機能です。
複製したいテーマにカーソルを合わせ、［テーマを複製（Duplicate Theme）］アイコンを選択します。
これにより、テーマに名前を付けるよう求めるダイアログが開きます。デフォルトの名前は［（元のテーマ名）のコピー（Copy of ...）］です。複数のアプリがある場合は、テーマの複製先のアプリも選択する必要があります。
テーマを削除する
管理者はデフォルトテーマ以外のテーマを削除することができます。削除したいテーマにカーソルを合わせ、 ［テーマを削除（Delete Theme）］アイコンを選択します。
これにより、テーマを削除するかどうかを確認するダイアログが開きます。
テーマを削除しても、ガイドには影響しません。ガイドテーマは［カスタム］に変わり、個別にガイドテーマを変更できるようになります。