エディターとWalkMeアプリでのテーマ設定
概要
テーマ設定は、コンソールからWalkMeエディターやWalkMeアプリにデザイン設定をもたらします。 テーマが各アイテムに適用される方法を表示および調整し、必要に応じて個々のエレメントを分離し、サーベイやアクションバーなどのWalkMeアプリをテーマ設定アプリから直接設計できます。
使用方法
WalkMeエディターでのテーマ設定
テーマ設定はすべてのエディタコンテンツに適用されます。 [Customize content style（コンテンツスタイルのカスタマイズ）]に移動して、バルーンとスマートチップにどのように影響するかを確認します。
バルーン
バルーンタブでは、バルーンに適用されたアクティブテーマを確認できます。
ハイライトの色をテーマの色に変更できます。
コンテンツがテーマの影響を受けないよう、テーマから切り離すこともできます。
例えば、テーマからハイライトの色を切り離すと、コンソールでテーマを変更しても、その色のままになります（この場合は - ピンクの Primary、Main）。
[Change template（テンプレートを変更）]をクリックして、利用可能なすべてのテンプレートを確認します。
テーマの異なるテキストと色タイプが異なるテンプレートに接続されている方法をよりよく理解するには、以下のマッピング：テーマとテンプレートの関係セクションを参照してください。
テーマの特定のテンプレートを変更する場合は、[Edit（編集）]アイコンをクリックします。
CSSコンソールが開きます。 バルーンのプロパティのいずれかを調整できます。
プライマリ色をセカンダリに置き換えるか、完全に変更できます-例えば、黒または白など。
テーマから来るCSS変数は、テーマのCSSの記事で見つけることができます。
編集したテンプレートを新規として保存し、[User Templates（ユーザーテンプレート）]タブに表示されます。
スマートウォークスルーステップ画面では、テーマの色からテキストパーツの色を選択できます。 テーマから継承されているため、タイポグラフィースタイルはここから変更できません。
別のテンプレートを変更することもできます。
スマートチップ
スマートチップタブには、スマートチップに適用されたアクティブテーマが表示されます。
[変更]アイコンをクリックして、スマートチップに持っていきたいアイコンを選択します。
アイコンの色とサイズを変更する[Edit（編集）]アイコンをクリックします。 テーマから任意の色を選択できます。
チップ自体の色を変更することもできます。
このデザインエレメントがテーマの影響を受けないようにするには、テーマからいずれかの値を切り離すこともできます。
ランチャー
ランチャーを作成すると、このテーマで利用可能なすべてのテンプレートから選択できます。
デザインドロップダウンでは、テーマから優先する色を設定できます。
テーマから切り離し、関係のない色を設定することもできます。
テーマから色を切り離すと、それを説明する専用のアイコンが表示されます。
いつでもテーマに戻すことができます。
ランチャーを作成したら、ランチャーオプション画面でテンプレートを変更できます。
ローカルランチャーのテキストは、ランチャーの[インタラクション]タブから変更できます。 これを行うには、「デフォルトのテンプレートテキストの代わりにカスタムテキストを使用します」と記載されたボックスにチェックを入れてください。 これで以下の表示テキストを編集できます。
[デザインを編集]をクリックして、タイポグラフィスタイルを変更するか、テーマから異なる色を選択します。
サーベイ
- サーベイはデフォルトでテーマに接続されています
- サーベイで利用できるテンプレートは1つだけです
エディタの変更
前
- エディタで色を選択したり、テンプレートのCSSを編集して確認したり、CSSのデザインをテンプレートとして保存したりすることができます
後
- 色とタイポグラフィの編集はテーマで行われます
- テーマに関連した新しいテンプレートがユーザーに提供されます
- グローバルバルーンテンプレートCSSを編集できます
前
- テキスト、背景、ボーダーの色を選択できます
後
- 色はテーマに由来するものであり、マッピングを変更したり、テーマから切り離したりすることができます
前
- アイコンは画像です。色は変更できません（ユーザーは異なる画像を1枚のみ選択できます）
- CSSで色を変更することはできません
後
- アイコンはHTMLです
- アイコンはテーマにリンクしており、テーマの色が変更された場合はその影響を受けます
- マッピングとアイコンのサイズを変更できます
前
- フォントファミリーを変更することはできません
後
- タイトルと本文に適用されたタイポグラフィが表示されます
- デザインはテーマに添付されています
前
- ランチャーのテキストを変更することはできません
- 異なるテキストを持つ新しいテンプレートのみ作成できます
後
- ローカルランチャーのテキストを変更するには、[カスタムテキストを使用]ボックスにチェックを入れる必要があります。
- ギャラリーが更新され、新しいテーマに接続されたテンプレートが利用可能になりました
ビジュアルデザイナーのテーマ設定
新しいテンプレート
新しいシャウトアウトを作成すると、新しいテンプレートが表示され、すべてがアクティブとして設定したテーマに表示されます。
色の横にあるテーマのアイコンにカーソルを合わせると、現在使用されているテーマを確認できます。
テーマの色とタイポグラフィスタイルを選択するか、テーマから切り離し、独自の色またはフォントプロパティを設定できます。
ボタン
ボタンのどのプロパティをテーマと関連付けるか、またはテーマから切り離すかを決めることができます 例えば、フォントを切り離し、独自のフォントを選択し、テキストの色と塗りつぶしをテーマに接続できます。
アクションバーのテーマ設定
テーマ設定アプリからアクションをデザインするには、以下の手順に従います：
- テーマを開く
- システムドロップダウンで、グローバルシステム → グローバルAIランチャーを選択します
- デフォルトのWalkMe(X)テーマとアクションのプレビューが画面の右側に表示されます
アクションにWalkMeまたはカスタマイズされたテーマを使用できます。
サーベイのテーマ設定
ポップアップサーベイは、システムテーマを継承します。 フルページのサーベイは、テーマ設定アプリから個別に設計できます。
フルページサーベイを設計するには：
-
テーマを開く
-
システムドロップダウンで、グローバル → グローバルサーベイを選択します。
-
デフォルトのテーマと、画面の右側に全画面表示のサーベイプレビューが表示されます。
-
色、タイポグラフィ、ボタンスタイルを設定できます。
