何かを検索

CSS

Last Updated 3月 22, 2023
image_pdfDownload as PDF

概要

Cascading Style Sheets（CSS）では、レイアウト、色、フォントを含むバルーンの外観をカスタマイズできます。

WalkMeのCSS機能によって、ウォークスルーとウォークスルーステップを完全にカスタマイズできます。 CSSのカスタマイズウィンドウでルールを入力する前に、フロートラッカーの[Custom CSS（カスタムCSS）]タブにCSSルールを挿入することで、そのCSSルールが機能するかどうかを確認できます。

🎓 Digital Adoption Institute

ユースケース

CSSのユースケースには以下のようなものがあります。

  • バルーンに画像またはロゴを挿入する
  • サイトのウェルカムシャウトアウトをカスタマイズする
  • 矢印の幅を変更するまたはバルーンから矢印を削除する
  • [Next（次へ）]ボタンのテキストを変更する

使用方法

CSSは、マークアップ言語で書かれたドキュメントの書式を記述するために使用されるスタイルシート言語です。 CSSを記述する際には、WalkMeアプリに含まれるさまざまなコンポーネントまたはバルーンのエレメントを参照する必要があります。 カスタムCSSウィンドウに入力する際、WalkMeはセレクター、プロパティ、値のオートコンプリートオプションを表示します。

CSSはリッチテキストエディターでローカルに追加することも、管理バーにあるカスタマイズメニューからグローバルに追加することもできます。 CSSのカスタマイズウィンドウでルールを入力する前に、フロートラッカーのCSSのカスタマイズタブでテストします。

CSSウェビナーでStylinを取得します。

WalkMeコミュニティで会話に参加!

バルーンコンポーネントを設定する

各バルーンにはCSSでカスタマイズ可能なコンポーネントが多数含まれています。 例えば、「.walkme-custom-balloon-title」のクラス（クラスの完全リストについては以下を参照）を使用して、バルーンのタイトルセクションを対象にすることができます。

バルーンのグローバルルールとローカルルール

CSSはグローバルまたはローカルで適用できます。 ローカルCSSは他のすべてのデザインを上書きし、バルーンのインタラクションメニューにあるリッチテキストエディターから適用することができます。

グローバルCSSはカスタマイズメニューで追加できます。

ローカルCSSエディタ（リッチテキストエディタ）を使用することで、単一のシャウトアウトを簡単にカスタマイズすることができます。 グローバルレベルで単一のShoutOutをカスタマイズする場合は、バルーンセクションを識別するクラスの前にShoutOutのID*を入力する必要があります（例：ローカルレベルでは「.walkme-custom-balloon-title」、グローバルレベルでは「#walkme-balloon-XX.walkme-custom-balloon-title」）。

*ヒント：ウォークスルーの場合、IDは［Advanced Settings（詳細設定）］の［Walk-Thru Settings Menu（ウォークスルー設定メニュー）］で確認できます。

!importantの使用

デフォルトでは、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 このエレメントはバルーンのヘッダーです。
  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
4 .walkme-custom-balloon-content このエレメントはバルーンのテキストです。
  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
5 .walkme-custom-balloon-subtext このエレメントはステップ番号です。
  • text-align
  • font-color
  • font-size
  • font-family
  • 表示
6 .walkme-custom-balloon-back-button このエレメントは［戻る］ボタンです。
  • color
  • font-size
  • font-family
  • width
  • height
  • 背景
  • border-radius
7 .walkme-custom-balloon-next-button このエレメントは［次へ］ボタンです。
  • color
  • font-size
  • font-family
  • width
  • height
  • 背景
  • border-radius

代表的なCSSカスタマイズ

バルーンから［X］ボタンを削除する

.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-step-xxxxxxx{
display: none !important;
}

スマートウォークスルー:
 .walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}

［Next（次へ）］ボタンのテキストを変更する

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;
}

［Back（戻る）］ボタンのテキストを変更する

button.walkme-custom-balloon-button.walkme-custom-balloon-weak-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text

［Done（完了）］ボタンのテキストを変更する

button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text

グローバルWalkMeのフォントを変更する

#walkme-menu *,
#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-： “Roboto”,Tahoma,Arial,Verdana,sans-ser!important//*
}

ランチャーのフォントを変更する

.walkme-icon-image-div.walkme-launcher-image-div {
font-family: /*フォントはこちら*/ !important;
}

バルーンのフォントを変更する

.walkme-custom-balloon-title,
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text {
font-family: /*フォントはこちら*/ !important;
}

ウィジットのフォントを変更する

#walkme-menu.walkme-penguin,
#walkme-main .walkme-title {
font-family: /*フォントはこちら*/ !important;
}.walkme-menu.walkme-penguin .walkme-icon {
font-family: /*フォントはこちら*/ !important;
}

スマートチップのフォントを変更する

.walkme-tooltip-content-wrapper .walkme-tooltip-content {
font-family: /*フォントはこちら*/ !important;
}

スマートチップでツールチップを非表示にする

.walkme-tooltip-スマートチップ-XXXXX{
Display: none !important;
}div.walkme-custom-tooltip-arrow-top.walkme-custom-tooltip-item-YYYYY{
Display: none !important;
}

ウォークスルーのすべてのバルーンにZ-Indexの変更を適用する

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 / Macintosh）が利用できます。

  • 検索：Ctrl-F / Cmd-F（Enterを押して次を検索、Shift-Enterで前を検索）
  • 置換：Ctrl-R / Cmd-R
  • 行にジャンプ：Ctrl-J / Cmd-J

以下の簡単なデモをご覧ください。

CSSでの変更内容をパブリッシュする

CSSの変更内容を反映させるには、パブリッシュする必要があります。

アカウントに適用できる変更内容であっても、パブリッシュメニューには反映されないものがあります。 これらには、以下のアイテムなどに加えられた変更内容が含まれます。

これは特定のWalkMeアイテムと関連のないアカウントに加えられたすべての変更が、新しいコンテンツや既存コンテンツをパブリッシュするとすぐにプッシュされるためです。 したがって、最近グローバルセグメントのうち1つに変更を適用した後で関連のないウォークスルーをパブリッシュした場合、セグメントに加えた変更も同様にパブリッシュされます。

CSSへの変更をパブリッシュするには、：次のように「パブリッシュ」を実行します。

  1. 管理バーで［Publish（パブリッシュ）］をクリックします
  2. ［パブリッシュ］タブを開きます
  3. CSSの変更をパブリッシュするだけの場合は、すべてのアイテムを選択解除します。
  4. ［パブリッシュ]をクリックします

注意：エラーの場合、「保存」をクリックした後、次の検証メッセージがCSSコンソールに表示されます。

有効の場合、HTMLで利用できます – WalkMe連絡先からのアクセスをリクエストしてください

関連リソース

CSSのヒントとコツ動画

この記事は役に立ちましたか？

はい いいえ
はい
いいえ
ご意見ありがとうございます！

関連記事

×

アカウントタイプの選択

選ぶ
< 戻る

Mobile account login

Reset password Reset EU password
< 戻る