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

テーマを使用すると、ガイド作成者が使用できるレイアウトとビルディングブロックのフォーマットとスタイルを設定できるため、ガイドのスタイルが管理しやすくなります。ガイド作成者は、デフォルトのスタイルを持つテーマを使うと、視覚的に一貫したガイドコンテンツを迅速に作成できます。テーマは、ビジュアルデザインスタジオ（Visual Design Studio）でガイド内のコンテナとビルディングブロックを編集すると適用できます。

モバイルなどの各種プロダクトラインやガイドコンテンツに対して複数のテーマを設定できます。アプリ間でテーマを複製してブランド全体で統一感を出すことも、Pendoサブスクリプションの各アプリに独自のテーマを持たせることもできます。ライトボックス、ツールチップ、バナーに独自のテーマを持たせることで、各種顧客エンゲージメントキャンペーンで認識してもらえるイメージを作ることができます。

 

要件

• Pendo管理者ユーザーは、［テーマ（Themes）］ページにアクセスして、テーマの作成、複製、削除が可能です。
• ガイド作成権限を持つPendoユーザーは、テーマをビジュアルデザインスタジオ（Visual Design Studio）のコンテナとビルディングブロックの設定でガイドに適用できます。

デフォルトのテーマ

各アプリにはデフォルトのテーマがあります。このテーマを削除することはできず、このテーマで設定したスタイルはビジュアルデザインスタジオでどのガイドにも適用できます。デフォルトのテーマでは、すべてのスタイルの設定と名前の変更ができます。デフォルトのテーマには［削除（Delete）］ボタンがないので、簡単に見つけることができます。

 

テーマの作成

［ガイド（Guides）］セクションで［テーマ］を選択します。［テーマ］ページには現在のテーマのリストが表示されます。［テーマ］ページにアクセスするのが初めてであれば、リストにはアプリケーション用に作成されたデフォルトのテーマが入力されています。

 

ページの右上にある［+ テーマを作成（+ Create Theme）］を選択します。

 

注：Pendoサブスクリプションで複数のアプリケーションを設定している場合は、新しいテーマに必要なアプリケーションを選択します。

ビジュアルデザインスタジオが新しいタブで開き、そこで新しいテーマの詳細を編集できます。

テーマを編集する

管理者はすべてのテーマを編集できます。テーマのスタイルを変更しても、そのテーマを使用しているガイドには全く影響しません。そのテーマを使用するすべてのガイドステップが［コンテナ設定（Container Settings）］でカスタムテーマに変更されます。

ヒント：テーマが編集されても、そのテーマを使用している既存のガイドは、デザイナーからテーマが再適用されるまで更新されません。新しいテーマや編集済みのテーマを使用するようにガイドを更新する必要がある場合は、ガイド作成者がそのガイドをビジュアルデザインスタジオで開き、テーマを適用し、新しいスタイルで問題がないかガイドコンテンツを確認し、ガイドを保存して変更を適用する必要があります。

［テーマ］ページのテーマにカーソルを合わせると、［テーマを編集（Edit Theme）］ボタンが表示されます。

［テーマを編集（Edit Theme）］を選択し、アプリのURLを入力してビジュアルデザインスタジオを起動します。

ビジュアルデザインスタジオには、次の2つのメインパネルがあります：

• 左側のパネルには、［ガイドコンテナ（Guide Container）］、［仕上がり（Typography）］、［ボタン（Buttons）］の個々のテーマ要素があります。
• 右側のパネルで、スタイルを編集する要素を選択します。スタイルに変更を加えると、プレビューが左側のパネルに表示されます。

ヒント：右のスタイルパネルの［詳細オプション（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クラスを追加する方法は次のとおりです。

1. CSSクラスのスタイルを設定します。
2. ［ガイドコンテナのスタイル（Guide Container Styles）］パネルで［詳細オプション（Advanced Options）］に切り替え、［補足スタイル（Supplemental Styles）］に、「my-class」などのCSSクラスの名前を入力します。

ビジュアルデザインスタジオでテーマを適用する

複数のテーマ、複数の仕上がりやボタンのスタイルを設定したので、ビジュアルデザインスタジオでこれらのテーマやスタイルをガイドに適用できます。

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

1. ［ガイドステップ（Guide Step）］で、［ガイドコンテナ（Guide Container）］の枠を選択して、［コンテナ設定（Container Settings）］を開きます。
2. ［テーマ（Theme）］ドロップダウンメニューでテーマを選択します。

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

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

 

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

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

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

 

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

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

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

 

テーマを複製する

すべてのテーマは複製できます。これは、アプリ間でテーマをコピーしたり、既存のテーマに変更を加えて新しいテーマを作成したりする場合に最適な方法です。

テーマにカーソルを合わせると［複製（Duplicate）］ボタンが表示されるので、［テーマを複製（Duplicate Theme）］を選択します。

ポップアップが表示されたら、テーマの名前を入力してください。デフォルト名は"[元のテーマ名]のコピー（Copy of [Original Theme Name]）"です。複数のアプリがある場合は、テーマの複製先のアプリも選択する必要があります。

 

テーマを削除する

テーマにカーソルを合わせると［削除（Delete）］ボタンが表示されるので、［テーマを削除（Delete Theme）］を選択します。デフォルトのテーマ以外ならどれでも削除できます。

テーマを削除するかどうかを確認するポップアップが表示されます。そのテーマを使用しているガイドには影響しません。

 

よくある質問

レイアウトとテーマはどのように連動しますか？

Pendo管理者は、デフォルトのテーマをカスタマイズできます。ガイドの作成時に、これらのテーマをデフォルトのレイアウトとして適用できます。適用後、設定したガイドを使用して、レイアウトでガイドを作成できる他のPendoユーザー用にレイアウトを保存できます。

すべてのガイドのテーマを一括更新できますか？

現時点ではできません。テーマの一括処理を現在開発中です。

ガイドに適用されているテーマを削除したらどうなりますか？

ガイドには影響しません。ガイドのテーマは［カスタム（Custom）］に変更されます。その後、ガイドにアクセスして、ガイドのテーマを個別に更新できます。

テーマに変更を加えると、そのテーマが適用されている全ガイドが更新されますか？

いいえ、テーマの一括処理は現在開発中です。現時点では、ガイドにアクセスして新しいテーマを再適用するか、ガイドを新しいテーマで保存し直す必要があります。

継承とは何ですか？

［継承（Inherit）］オプションを使用すると、アプリケーション内で開発者がすでにコーディングしたスタイル設定を取り込むことができます。

アプリで使用しているフォントファミリー名が表示されないのはなぜですか？

アプリケーション内ですでに使用しているフォントファミリーがある場合は、[継承（Inherit）]を選択してそのフォントファミリーを使用してください。スタイルに含まれている第2のフォントファミリーを使用したい場合は、そのフォント名を入力できます。

カスタムコードブロックをガイドに追加するとどうなりますか？

ターゲットクラスや要素IDがテーマの一般的なターゲットよりも具体的な場合、ガイドステップのコードブロックがテーマのスタイルを上書きします。コードブロックのスタイルはいずれもそのガイドステップのみに適用され、必要に応じて追加でカスタマイズを行うためのものです。