テーマを使用すると、ガイド作成者が視覚的に一貫性のあるガイドコンテンツを作成するために使用できる、レイアウトとビルディングブロックのデフォルトのフォーマットとスタイルを設定できます。
すべてのアプリケーションには、削除できないデフォルトのテーマがあります。テーマ構成は、どのガイドにも適用できます。管理者は、デフォルトテーマの名前を変更したり、再構成したりすることができます。
テーマを開く
アプリケーションのテーマの詳細を開くには、次の手順を実行します。
1. Adoptの左側のメニューから［ガイド（Guides）］に移動します。
2. ページの上部にある［テーマの管理（Manage Theme）］を選択します。
3. ドロップダウンメニューからテーマを構成するアプリケーションを選択し、モーダルの右下にある［編集（Edit）］を選択します。これにより、テーマを編集できる［テーマ設定（Theme Settings）］が開きます。
テーマを編集する
管理者ユーザーは、テーマを編集できます。テーマを編集しても、そのテーマを使用している既存のガイドには影響しません。唯一変更されるのは、既に編集済みのテーマを使用しているガイドステップが、［コンテナ設定（Container Settings）］のカスタムテーマに変更されることです。
ヒント：新しいテーマや編集済みのテーマを使用するように既存のガイドを更新する必要がある場合、ガイド作成者はAdopt Studioでそのガイドを開き、テーマを適用し、新しいスタイルで問題がないかガイドコンテンツを確認し、ガイドを保存して変更を適用します。
テーマを編集するには、まずテーマを見つけて開きます。すると、［テーマ設定］が開きます。右側のパネルでは、左側のパネルで選択した編集内容に応じて、特定のスタイルを編集します。左側のパネルには、編集可能な個々のテーマ要素が表示されます。
［テーマ名（Theme Name）］を編集するには、既存のテキストを選択して新しい名前を入力します。ガイドコンテナやタイポグラフィを編集するには、左パネルで該当する要素にカーソルを合わせ、要素の右上にある編集アイコンを選択します。
右側のパネルが変化し、その特定の要素に関するすべてのオプションが表示されます。スタイルに変更を加えると、プレビューが左パネルに表示されます。
右側のパネルの［詳細オプション（Advanced Options）］トグルでは、補足スタイル、行の高さ、文字間隔など、編集可能な追加のプロパティが表示されます。
ガイドコンテナのスタイル
使用可能なコンテナのスタイリングオプションを表示するには、左パネルでコンテナ要素にカーソルを合わせ、要素の右上にある編集アイコンを選択します。右側の［ガイドコンテナスタイル（Guide Container Styles）］パネルを使用して次のプロパティを設定します。
- 背景色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 境界線の幅：ピクセル（px）単位。
- 境界線の色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 境界線の半径（角丸）：スライダーで設定するか、ピクセル（px）で定義します。
- コンテナのパディング：コンテナの上、右、下、左を表す数字を使用して設定します。
- キャレットサイズ（コンテナに付属する三角形の矢印の幅と高さ）：ピクセル（px）単位で指定します。
- ドロップシャドウの色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 閉じるボタンの色とホバーの色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 閉じるボタンの太さ：細（Thin）、標準（Regular）、太（Bold）のいずれかを選択できます。
- バックドロップの色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- Z-Index値：UIで要素が重なっているコンテナの順序です。
［詳細オプション］をオンにすると、さらに次の項目を編集できます。
- ドロップシャドウの角度、距離、ぼかし、サイズ。
- 閉じるボタンのサイズと位置。
-
補足スタイル。これにより、コンテナ要素のスタイルにCSSを使用できます。
/* ガイドのコンテナサイズ */
._pendo-step-container-size{
}
/* ガイドのバックドロップ */
._pendo-backdrop{
}
/* ガイドのコンテナスタイル */
._pendo-step-container-styles{
}
/* ガイドを閉じる"X" */
._pendo-close-guide{
}
仕上がりスタイル
タイポグラフィのスタイリングオプションを表示するには、左パネルでタイトル（Title）、サブタイトル（Sub Title）、パラグラフ（Paragraph）、リンク（Link）要素にカーソルを合わせ、要素の右上にある編集アイコンを選択します。右側の［スタイル（Styles）］パネルを使用して次のプロパティを設定します。
- ［フォントファミリー］ドロップダウンメニューを使用すると、デフォルトのブラウザフォントが表示されます。アプリケーションのフォントの名前を入力することもできます。
- ［フォントの太さ］ドロップダウンメニューを使用すると、選択肢が100から900までの間隔で表示されます。
- ［フォントサイズ］ドロップダウンメニューを使用すると、標準的なフォントサイズのオプションが表示されます。フォントサイズの数値を入力することもできます。
- フォントの色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- ［フォントの文字装飾］ドロップダウンメニューからなし（none）と下線（underline）を選択できます。
［詳細オプション］をオンにすると、さらに次の項目を編集できます。
- テキスト変換：なし（none）、最初の文字のみ大文字（capitalize）、大文字（uppercase）、小文字（lowercase）を選択できます。
- 行の高さ：パーセンテージ（％）で表示します。
- 文字間隔：ピクセル（px）単位。
右側のスタイルパネルの下部にはカラーコントラストチェッカー（Color Contrast Checker）があり、選択したスタイルオプションのコントラスト比と、十分な色のコントラスト比に関するWCAG要件の比較値が表示されます。
ボタンのスタイル
各ボタンには異なるデフォルトのスタイルとユーザーが定義できるホバースタイルがあります。左パネルにある1次（Primary）、2次（Secondary）、3次（Tertiary）のボタンタイプにカーソルを合わせ、要素の右上にある編集アイコンを選択すると、使用可能なボタンのスタイリングオプションが表示されます。右側の［スタイル］パネルを使用して次のプロパティを設定します。
デフォルトのスタイル
- 背景色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 境界線の幅：ピクセル（px）単位。
- 境界線の色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 境界線の半径（角丸）：スライダーで設定するか、ピクセル（px）で定義します。
- ［フォントファミリー］ドロップダウンメニューを使用すると、デフォルトのブラウザフォントが表示されます。アプリケーションのフォントの名前を入力することもできます。
- ［フォントの太さ］ドロップダウンメニューを使用すると、選択肢が100から900までの間隔で表示されます。
- ［フォントサイズ］ドロップダウンメニューを使用すると、標準的なフォントサイズのオプションが表示されます。フォントサイズの数値を入力することもできます。
- フォントの色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- ［フォントの文字装飾］ドロップダウンメニューからなし（none）と下線（underline）を選択できます。
- ボタンのパディング：ボタンの上、右、下、左を表す数字を使用して設定します。
［詳細オプション］をオンにすると、さらに次の項目を編集できます。
- テキスト変換：なし（none）、最初の文字のみ大文字（capitalize）、大文字（uppercase）、小文字（lowercase）を選択できます。
- 文字間隔：ピクセル（px）単位。
ホバースタイル
- 背景色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 境界線の色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- ［フォントの太さ］ドロップダウンメニューを使用すると、選択肢が100から900までの間隔で表示されます。
- ［フォントサイズ］ドロップダウンメニューを使用すると、標準的なフォントサイズのオプションが表示されます。フォントサイズの数値を入力することもできます。
水平線
水平線のスタイリングオプションを表示するには、左パネルの［水平線（Horizontal line）］要素にカーソルを合わせ、要素の右上にある編集アイコンを選択します。右側の［スタイル］パネルを使用して次のプロパティを設定します。
- 線の太さ：ピクセル（px）単位。
- 線の色：16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
- 線の種類：実線、点線、破線、二重線から選択できます。