クラシックシャウトアウト向けCSS

概要

カスケーディングスタイルシート（CSS）では、フォント、背景、境界線などのエレメントを含む高度なカスタマイズをクラシックシャウトアウトに適用することができます。

CSSを使用してシャウトアウトをカスタマイズできます。

• ［Action（アクション）］ボタンと［Close（閉じる）］ボタン
• テキストヘッダーとリボン
• テキスト
• 「X」ボタン

新しいシャウトアウト用ビジュアルエディターをCSSなしで使用する方法の詳細については、「シャウトアウト：スタートガイド」を参照してください。

使用方法

カスケーディングスタイルシート（CSS）は、マークアップ言語で書かれたドキュメントの書式を記述するために使用されるスタイルシート言語です。 CSSを記述する際、クラシックシャウトアウトの各種コンポーネント（エレメントとも呼ばれる）を参照する必要があります。

Custom CSS（カスタムCSS）ウィンドウに入力する際、WalkMeはセレクター、プロパティ、値のオートコンプリートオプションを表示します。

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

各シャウトアウトには、CSSでカスタマイズできるコンポーネント（エレメント）が多数含まれています。

例えば、次のクラスを使用して、シャウトアウトのタイトルセクションを対象にすることができます。

• .wm-title

クラスのリスト全体を表示します。

グローバルCSSとローカルCSSの比較

CSSはグローバルまたはローカルで適用できます。 ローカルCSSコンソールを使用すると、個々のシャウトアウトを簡単にカスタマイズできます。

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

ローカルCSSの例：

• .wm-title

グローバルCSSの例：

• #wm-shoutout-XXXXX .wm-title

ローカルCSSの編集

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

グローバルCSSの編集

1. WalkMeエディタ設定メニューで［Edit global CSS（グローバルCSSを編集）］をクリックします
2. CSSエディターにカスタムCSSを入力する
3. ［Save（保存）］をクリックします。
4. 公開設定をクリックします

WalkMe IDの検索

1. エディタでアイテムにカーソルを合わせます
2. ［Options Menu（オプションメニュー）］をクリックします
3. ［Copy ID（IDをコピー）］をクリックします

!importantの使用

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

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

例：

#wm-shoutout-XXXXX .wm-title {

color: #000 !important;

}

設定可能なコンポーネント

一般的なCSSのカスタマイズ

シャウトアウトバルーンの幅を変更する

.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}

センターシャウトアウトリボン

#wm-shoutout-XXXXX .wm-main-ribbon.wm-template-main-bg,
.wm-ribbon-edge.left.wm-template-main-bg, .wm-ribbon-edge.right.wm-template-main-bg {

background-color: #XXXXXX !important;

}

シャウトアウトリボンの左端

#wm-shoutout-XXXXX .wm-ribbon-triangle.left.top.wm-main-border-right-color, .wm-ribbon-ripple.left.wm-main-border-right-color {
border-color: transparent #XXXXXX transparent transparent !important;
}

#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}

シャウトアウトリボンの右端

#wm-shoutout-XXXXX .wm-ribbon-triangle.right.top.wm-main-border-top-color, .wm-ribbon-ripple.right.wm-main-border-top-color.wm-main-border-left-color {

border-color: #XXXXXX transparent transparent !important;
}

#wm-shoutout-XXXXX .wm-ribbon-triangle.right.bottom.wm-main-border-left-color {

border-color: transparent transparent transparent #XXXXXX !important;

}

台形テンプレート

#wm-shoutout-XXXXX .wm-trapezoid {
border-top: 40px solid #XXXXXX !important;
}

#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}

正方形テンプレート

#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}