Cascading Style Sheets（CSS）では、レイアウト、色、フォントを含むバルーンの外観をカスタマイズできます。
WalkMeのCSS機能によって、ウォークスルーとウォークスルーステップを完全にカスタマイズできます。 CSSのカスタマイズウィンドウでルールを入力する前に、フロートラッカーの［Custom CSS（カスタムCSS）］タブにCSSルールを挿入することで、そのCSSルールが機能するかどうかを確認できます。
CSSのユースケースには以下のようなものがあります。
CSSは、マークアップ言語で書かれたドキュメントの書式を記述するために使用されるスタイルシート言語です。 CSSを記述する際には、WalkMeアプリに含まれるさまざまなコンポーネントまたはバルーンのエレメントを参照する必要があります。 Custom CSS（カスタムCSS）ウィンドウに入力する際、WalkMeはセレクター、プロパティ、値のオートコンプリートオプションを表示します。
CSSはリッチテキストエディターでローカルに追加することも、管理バーにあるカスタマイズメニューからグローバルに追加することもできます。 CSSのカスタマイズウィンドウでルールを入力する前に、フロートラッカーのCSSのカスタマイズタブでテストします。
各バルーンにはCSSでカスタマイズ可能なコンポーネントが多数含まれています。 例えば、「.walkme-custom-balloon-title」のクラス（クラスの完全リストについては以下を参照）を使用して、バルーンのタイトルセクションを対象にすることができます。
CSSはグローバルまたはローカルで適用できます。 ローカルCSSは他のすべてのデザインを上書きし、インタラクションタブにあるリッチテキストエディターから適用することができます。
グローバルCSSは、Editorの設定ドロップダウンからアクセスできます。
ローカルCSSエディタ（リッチテキストエディタ）を使用することで、単一のシャウトアウトを簡単にカスタマイズすることができます。
グローバルレベルで単一のシャウトアウトをカスタマイズする場合は、バルーンセクションを識別するクラスの前にシャウトアウトのID*を入力する必要があります。
ローカルレベルの例：.walkme-custom-balloon-title
グローバルレベルの例：#walkme-balloon-XXXXXXX.walkme-custom-balloon-title)
ウォークスルーの場合、IDは［Advanced Settings（詳細設定）］のWalk-Thru Settings Menu（ウォークスルー設定メニュー）で確認できます。
デフォルトでは、WalkMeのテーマデザインはバルーンまたはウォークスルーに対する他のデザインの変更を上書きします。 CSSが適用されるには、CSSルールはデフォルトのスタイリングを上書きするために「!important」を含む必要があります。
例：
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
| div | 編集可能な属性の例 | |
|---|---|---|
| 1 | .walkme-custom-side-border | このエレメントは左側のバルーンの境界線です。
|
| 2 | .walkme-custom-balloon-separator | このエレメントはバルーンの下3分の1にあるセパレーターです。
|
| 3 | .walkme-custom-balloon-title | このエレメントはバルーンのヘッダーです。
|
| 4 | .walkme-custom-balloon-content | このエレメントはバルーンのテキストです。
|
| 5 | .walkme-custom-balloon-subtext | このエレメントはステップ番号です。
|
| 6 | .walkme-custom-balloon-back-button | このエレメントは［戻る］ボタンです。
|
| 7 | .walkme-custom-balloon-next-button | このエレメントは［次へ］ボタンです。
|
.walkme-custom-balloon-close-button {
display:none !important;
}
.walkme-custom-side-border{
display: none !important;
}
.walkme-custom-side-border{
background-color: red !important;
}
#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper{
background-color: green !important;
}
#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
.walkme-custom-balloon-subtext {
display: none !important;
}
div#walkme-balloon-xxxxxxx
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text{
font-size: 0 !important;
}
div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text:before {
content: 'new text' !important;
visibility: visible !important;
font-size: 12px !important;
}
div.walkme-custom-walkthru-xxxxx.walkme-custom-simple-step {
z-index:0 !important;}
div.walkme-custom-walkthru-xxxxx.walkme-custom-balloon-arrow {
z-index:0 !important;}
div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable {
display: block !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable.walkme-invisible,
div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable.walkme-invisible {
display: none !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable {
border-bottom: none !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon {
height: 20px !important;
padding-top: 4px !important;
margin-left: 12px !important;
width: 26px !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text {
padding: 0 !important;
}
div.walkme-menu.walkme-penguin .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before {
content: "e60a";
}
div.walkme-menu.walkme-penguin .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before {
content:"e609";
}
カスタムCSSコンソールでの検索と置換には、以下のキーボードショートカット（Windows / Mac）が利用できます。
以下の簡単なデモをご覧ください。
CSSの変更内容を反映させるには、パブリッシュする必要があります。
アカウントに適用できる変更内容であっても、パブリッシュメニューには反映されないものがあります。 これらには、以下のアイテムなどに加えられた変更内容が含まれます。
これは特定のWalkMeアイテムと関連のないアカウントに加えられたすべての変更が、新しいコンテンツや既存コンテンツをパブリッシュするとすぐにプッシュされるためです。 したがって、最近グローバルセグメントのうち1つに変更を適用した後で関連のないWalk-Thruを公開した場合、セグメントに加えた変更も同様に公開されます。
CSSに加えた変更をパブリッシュするには、次のように「設定のパブリッシュ」を実行します。
注：エラーの場合、［SAVE（保存）］をクリックすると、CSSコンソールに以下の検証メッセージが表示されます。
また、有効になっている場合は、HTMLでも利用できます - アクセスはWalkMeの担当者にリクエストしてください。
