CSS
概要
Cascading Style Sheets（CSS）では、レイアウト、色、フォントを含むWalkMeコンテンツの外観をカスタマイズできます。
WalkMeのCSS機能では、スマートウォークスルーの手順、サーベイ、WalkMeメニューを含む特定のコンテンツタイプのカスタマイズが可能です。
CSSウェビナーでスタイリングを取得
ユースケース
CSSのユースケースには以下のようなものがあります。
- バルーンに画像またはロゴを挿入する
- 矢印の幅を変更するまたはバルーンから矢印を削除する
- [Next（次へ）]ボタンのテキストを変更する
使用方法
CSSは、マークアップ言語で書かれたドキュメントの書式を記述するために使用されるスタイルシート言語です。 CSSを記述する場合、Walkmeコンテンツの異なるコンポーネントまたはエレメントを参照する必要があります。
各WalkMeアイテムには、CSSでカスタマイズできるコンポーネント（エレメント）が多数含まれています。
例えば、次のクラスを使用して、バルーンのタイトルセクションを対象にすることができます。
- .walkme-custom-balloon-title
グローバルルールとローカルルール
CSSはグローバルまたはローカルで適用できます。 ローカルCSSコンソールを使用すると、個々のWalkMeアイテムを簡単にカスタマイズできます。 グローバルレベルでカスタマイズする場合は、WalkMeアイテムのIDを入力する必要があります。
ローカルレベルの例：.walkme-custom-balloon-title
グローバルレベルの例：#walkme-balloon-XXXXXXX.walkme-custom-balloon-title
ローカルCSSの編集
- アイテム設定メニューを開きます
- インタラクションタブに移動します
- CSSの編集をクリックします
- CSSコンソールにカスタムCSSを入力します。
- ［Save（保存）］をクリックします。
グローバルCSSの編集
- WalkMeエディタ設定メニューで［Edit global CSS（グローバルCSSを編集）］をクリックします
- CSSエディターにカスタムCSSを入力する
- ［Save（保存）］をクリックします。
- 公開設定をクリックします
検索と置換のショートカット
カスタムCSSコンソールでの検索と置換には、以下のキーボードショートカット（Windows / Mac）が利用できます。
- 検索：Ctrl-F / Cmd-F（Enterを押して次を検索、Shift-Enterで前を検索）
- 置換：Ctrl-R / Cmd-R
- 行にジャンプ：Ctrl-J / Cmd-J
以下の簡単なデモをご覧ください。
WalkMe IDの検索
- エディタでアイテムにカーソルを合わせます
- ［Options Menu（オプションメニュー）］をクリックします
- ［Copy ID（IDをコピー）］をクリックします
!Importantの使用
デフォルトでは、WalkMeのテーマデザインは、他のデザインの変更を上書きします。
CSSを適用するには、CSSルールに「!important」を含めてデフォルトのスタイリングを上書きする必要があります。
例：
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
代表的なCSSカスタマイズ
Smart Walk-Thrus
Surveys
WalkMeメニュー
ActionBot
クラシックシャウトアウト
WalkMe全般
グローバルWalkMeフォントを変更する
#walkme-player *,
.walkme-custom-balloon-outer-div *,
.wm-shoutout *,
.walkme-survey-balloon *,
.walkme-tooltip-outer-div *,
.walkme-custom-launcher-outer-div,
.walkme-icon-image-div.walkme-launcher-image-div * {
font-family: "Roboto",Tahoma,Arial,Verdana,sans-serif !important; /* 希望するフォントファミリールールをこちらに追加*/
}
Launchers
フォントを変更する
font-family: /*フォントはこちら*/ !important;
}
SmartTips
フォントを変更する
font-family: /*フォントはこちら*/ !important;
}
ツールチップを非表示にする
テクニカル情報
- ローカルCSSは、常にグローバルCSSを上書きします
- WalkMeコンテンツにCSSを追加すると、コンテンツが表示されているサイト上のCSSも影響を受ける場合があります
- 適切なインデントと空白がGlobal CSSに追加されない場合、Play（再生）モードでは公開または表示できませんが、Preview（プレビュー）モードでは表示されたままになります
- ベストプラクティスは、Visual Studio CodeやSublimeなどの統合開発環境（IDE）でコードをフォーマットし、フロートラッカーで最初にテストをすることです
- CSSの変更を有効にするには、設定の公開を実行する必要があります
- CSSを使用してテキストを変更する場合、翻訳が上書きされる可能性があることを覚えておいてください
- 以下の条件はサポートされておらず、エラーが発生する可能性があります。
- @import
- 式
- javascript
- -moz-binding
- -o-link
- 行動
- クラシックシャウトアウトのみがCSSをサポート
- CSSはシャドウドーム要素に影響しません