スマートウォークスルーのCSS

Last Updated 7月 2, 2024

Download as PDF

概要

Cascading Style Sheets（CSS）を使用すると、レイアウト、色、フォントを含むスマートウォークスルーエレメントをカスタマイズできます。

CSSを記述する場合、スマートウォークスルーのさまざまなコンポーネントまたはエレメントへの参照が不可欠です。 この記事では、これらの高度なエレメントをパーソナライズするために利用可能なCSSオプションの概要について説明します。

デフォルトオプションを使用してスマートウォークスルーをカスタマイズするには、スマートウォークスルー：スタートガイドを表示します。

CSS

使用方法

スマートウォークスルーコンポーネント

各スマートウォークスルーには、CSSでカスタマイズできるコンポーネント（エレメント）が多数含まれています。 スマートウォークスルーは、ローカルとグローバルの両方でカスタマイズできます。

グローバルレベルで単一のスマートウォークスルーをカスタマイズする場合は、バルーンを識別するクラスの前にスマートウォークスルーIDを入力する必要があります。

ローカルレベルの例：

• .walkme-custom-balloon-title

グローバルレベルの例：

• #walkme-balloon-XXXXXXX.walkme-custom-balloon-title

スマートウォークスルーIDは、WalkMeエディタにあります：

1. エディタでスマートウォークスルーにカーソルを合わせます
2. ［Options Menu（オプションメニュー）］をクリックします
3. コピーIDを選択します

クラスの完全なリストについては、以下を参照してください。

!importantの使用

デフォルトでは、WalkMeのテーマデザインは、他のデザインの変更を上書きします。

CSSを適用するには、CSSルールに「!important」を含めてデフォルトのスタイリングを上書きする必要があります。

例：

#walkme-balloon-1760356 .walkme-custom-balloon-title {

color: #000 !important;

}

ローカルCSSの編集

1. スマートウォークスルーステップオプションメニューを開きます
2. インタラクションタブに移動します
3. CSSの編集をクリックします
4. CSSコンソールにカスタムCSSを入力します。
5. ［Save（保存）］をクリックします。

グローバルCSSの編集

1. WalkMeエディタ設定メニューで［Edit global CSS（グローバルCSSを編集）］をクリックします
2. CSSエディターにカスタムCSSを入力する
3. 以下のCSSで強調表示されているセクションをカスタマイゼーションに置き換える
4. ［Save（保存）］をクリックします。
5. 公開設定をクリックします

設定可能なスマートウォークスルーコンポーネント

一般的な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;
}