この記事は、WalkMeメニューとウィジェットでCSSを使用するための基本的な理解を提供するものであることに注意してください。 CSSの使用について事前に知識を身に着けておくことを推奨します。
Cascading Style Sheets（CSS）では、レイアウト、色、フォントなどのエレメントを含むドキュメントのルックアンドフィールをカスタマイズできます。 CSSを使用して、WalkMeメニューに高度なカスタマイズを適用できます。
CSSは、マークアップ言語で書かれたドキュメントの書式を記述するために使用されるスタイルシート言語です。 CSSを記述する際、WalkMeメニューの異なる構成要素やエレメントを参照する必要があります。
Custom CSS（カスタムCSS）ウィンドウに入力する際、WalkMeはセレクター、プロパティ、値のオートコンプリートオプションを表示します。 管理者バーからアクセスする［Customize（カスタマイズ）］メニューにグローバルCSSが追加されます。
Customize（カスタマイズ）メニューのCSSタブにルールを入力する前に、［Flow Tracker（フロートラッカー）］の［Custom CSS（カスタムCSS）］タブにCSSルールを挿入することで、それが機能するかどうかを確認できます。
WalkMeメニューは1つしかないため、グローバルにカスタマイズすることができます。 メニューのCSSルールは、#walkme-menuというIDで始まる必要があります。 このルールは、タイプ（#walkme-menu.walkme-penguin）によってさらに絞り込むことができます。 プレーヤーの追加コンポーネントをこのチェーンに追加できます。
例：
#walkme-menu.walkme-penguin .walkme-title（クラスの完全なリストについては、下記参照）。
デフォルトでは、WalkMeのテーマデザインはメニューに対する他のデザインの変更を上書きします。 CSSを適切に適用するには、デフォルトのスタイリングを上書きするよう、CSSルールに「!important」を含む必要があります。
例：
.walkme-out-wrapper {color: #000 !important; }
［Customize（カスタマイズ）］メニューの［Customize Player（プレーヤーをカスタマイズ）］タブには、選択可能な各種ウィジェットスタイルとテーマが表示されます。 CSSを追加する場合、次のクラスにはすべてのメニューオプションに関連したものと、一部のクラスにのみ表示されるものがあります。
| div | 編集可能な属性 | 適用可能なメニュースタイル |
|---|---|---|
| .walkme-out-wrapper | この要素は、WalkMeメニュー全体を囲む。 次を編集できます：
|
Danube Colorado Mississippi |
| .walkme-in-wrapper | この要素は、WalkMeメニュー全体を囲む。 次を編集できます：
|
Danube Colorado Mississippi |
| .walkme-title | このエレメントには、テキストが含まれています。 デフォルトの位置は絶対です。 次を編集できます：
|
Danube Colorado Mississippi |
| .walkme-bar | このエレメントには、テキストが含まれています。 次を編集できます：
|
Danube Mississippi |
| .walkme-question-mark | このエレメントの左側には疑問符が含まれています。 疑問符自体は文字であるため、次を使ってデザインできます。
|
Colorado |
| .walkme-arrow | このエレメントには、テキストの右側に矢印が含まれています。 デフォルトの位置は絶対です。 矢印は文字であるため、以下を使用してデザインできます。
|
Mississippi |
| #walkme-player | Zambezi三角形ウィジェットは画像です。 その色を変更するには、新しい画像をデザイン、アップロードして置き換える必要があります。 background-image: url(‘https://nowledge.walkme.com/download/thumbnails/6915638/puppy.png’) !important; |
Zambezi |
CSSでの変更内容をパブリッシュする
CSSの変更内容を反映させるには、パブリッシュする必要があります。
アカウントに適用できる変更内容であっても、パブリッシュメニューには反映されないものがあります。 これらには、以下のアイテムなどに加えられた変更内容が含まれます。
これは特定のWalkMeアイテムと関連のないアカウントに加えられたすべての変更が、新しいコンテンツや既存コンテンツをパブリッシュするとすぐにプッシュされるためです。 つまり、グローバルセグメントに変更を適用してから関連のないウォークスルーを公開した場合、セグメントへの変更内容が公開されることを意味します。
CSSに加えた変更をパブリッシュするには、次のように「設定のパブリッシュ」を実行します：
WalkMe WorldのTip Tuesday動画をもっと見るには、こちらをクリック。
