CSSを使用したWalkMeメニューのカスタマイズ

Last Updated 4月 8, 2024

Download as PDF

概要

以下の手順に従って、CSSエディタでWalkMeメニューのあらゆる面をカスタマイズすることができます。

デフォルトのオプションを使用してメニューをカスタマイズするには、「WalkMeプレーヤーメニュー：スタートガイド」をご覧ください。

始める前に、メニューでCSSを紹介するこの記事を参照してください。

使用方法

WalkMeエディターで「カスタマイズ」をクリックする
CSSをクリックする
CSSエディターにカスタムCSSを入力する
以下のCSSで強調表示されているセクションをカスタマイゼーションに置き換える

注

以下のCSSはすべてペンギンスタイルメニュー（#walkme-menu.walkme-penguin .walkme-title）用です。

WalkMeメニュー色のカスタマイズ

/* メニュー */
/* 横境界線別名左ストライプ */
div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-ltr div.walkme-main,
div.walkme-menu.walkme-penguin .walkme-override.walkme-direction-ltr div.walkme-main {
border-left-color: red !important;
}

右側のサイドバー（右から左のテキストを含む言語のテキストメニュー用）

/* サイドボーダー、別名右サイド*/ （ヘブライ語/アラビア語などのメニューの場合）
div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-rtl div.walkme-main,
div.walkme-menu.walkme-penguin .walkme-override.walkme-direction-rtl div.walkme-main {
border-right-color: red !important;
}

「ヘルプ」テキスト

#walkme-tabs .walkme-first-tab .walkme-tab-button-text {
color: *color* !important;
}

「アクション」テキスト

#walkme-main .walkme-category>.walkme-deployable-row .walkme-text .walkme-name {
color: *color* !important;
}

メニュータイトルの色

/*メニュータイトルの色の変更（「どのようにお手伝いしましょうか？」）*/
#walkme-title {
color: xxxxxxx !important;
}

検索バーをカスタマイズ

「検索」ボタンの静的な色を変更

/* 検索ボックス */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button {
background: red !important;
}

「検索」ボタンのホバー色を変更

/* ホバー時の検索ボックス - 異なる色、やや明るい、または暗いなどを選択 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button:hover {
background-color: red !important;
}

「検索」ボタンのクリック色を変更

/* クリックされた検索ボックス */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button:active,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button:active {
background-color: red !important;
}

拡大鏡アイコンを削除

/* 検索アイコンを削除 */

#walkme-menu.walkme-menu.walkme-penguin.walkme-california.walkme-theme-white-blue .walkme-search-box-button .walkme-search-box-button-image{
display: none !important;
}

進捗バーをカスタマイズ

色を変更

/* プログレスバー - 通常は明るい色 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-progress-bar-inner,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-progress-bar-inner {
background-color: LightCyan !important;
}

WalkMeメニューアイテムをカスタマイズ

アイコン色

/* WalkMeアイテムアイコン */
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-override div.walkme-deployable-icon.walkme-override,
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-override div.walkme-deployable-icon.walkme-override,
div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-override div.walkme-deployable-icon.walkme-override,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-override div.walkme-deployable-icon.walkme-override {
color: red !important;
}

ホバー時のアイテム名

/* ホバー時のWalkMeアイテム名 */
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > div.walkme-deployable-name,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > div.walkme-deployable-name {
color: red !important;
}

ホバー時のアイテム行

/* ホバー時の展開可能な行 - 別の色、できればメインの色に似た、より明るい色を選択 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable:hover {
background-color: red !important;
}

カテゴリのカラー

/* カテゴリー */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name {
color: red !important;
}

ホバー時のカテゴリ名

/* ホバー時のカテゴリー名 - 別の色を選択することも、同じ色にすることも可能 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name {
color: red !important;
}

ホバー時のカテゴリ行

/* ホバー時のカテゴリー行 - 別の色、できればメインの色に似た、より明るい色を選択 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category > .walkme-deployable-row:hover,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category > .walkme-deployable-row:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover {
background-color: red !important;
}

カテゴリの矢印

/* 矢印アイコン */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon {
color: red !important;
}

カテゴリアイテム名

/* カテゴリー項目名 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name {
color: red !important;
}

ヘルプセンター統合をカスタマイズ

チケットリンクの色を開く

/* Open a Ticket（チケットを開く）リンクの色 */
div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket,
div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket {
color: red !important;
}

チケットリンクのホバーを開く

/* Open a Ticket（チケットを開く）リンクのホバーの色 */
div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket:hover ,
div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket:hover {
color: red !important;
}

WalkMeメニュータブをカスタマイズ

/* 選択されたタブ */
div.walkme-menu.walkme-penguin.walkme-override .walkme-tabs .walkme-tab-button.walkme-tab-button-selected span.walkme-tab-button-text,
div.walkme-menu.walkme-penguin .walkme-override .walkme-tabs .walkme-tab-button.walkme-tab-button-selected span.walkme-tab-button-text {
color: red !important;
}

「ヘルプ」タブの疑問符の色をカスタマイズ

/* クエスチョンマークの色 */
.walkme-tab-button-selected span.walkme-tab-button-image.walkme-icon-font.walkme-contains-walkthru.walkme-contains-shuttle.walkme-contains-content.walkme-visible.walkme-search.walkme-search-providers.walkme-override.walkme-css-reset{
color: red !important;
}

「タスク」タブのチェックマークの色

/* チェックマークの色 */
.walkme-tab-button-selected span.walkme-tab-button-image.walkme-icon-font.walkme-contains-task.walkme-visible.walkme-progress-bar.walkme-override.walkme-css-reset{
color: red !important;}

ホバー色

/* その他のホバー - ホバーの色をさらに薄くすると、より効果的 */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-tabs .walkme-tab-button:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-tabs .walkme-tab-button:hover,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category > .walkme-deployable-row:hover .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category > .walkme-deployable-row:hover .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover .walkme-deployable-icon {
background-color: red !important;
}

WalkMeウィジェットをカスタマイズする

Mississippiウィジェットの色を変更

/* Mississippi */
div.walkme-player.walkme-mississippi.walkme-override div.walkme-bar {
background-color: red !important;
}

Coloradoウィジェットの正方形の色を変更

/* Colorado */
div.walkme-player.walkme-colorado.walkme-override div.walkme-question-mark,
div.walkme-player.walkme-colorado.walkme-override * div.walkme-question-mark {
background: red !important;
}

変更しますか？色

/* ウィジェット？色 */
.walkme-player.walkme-colorado.walkme-allenby .walkme-question-mark:before, .walkme-player.walkme-colorado.walkme-allenby * .walkme-question-mark:before {
color: white !important;}

Coloradoウィジェットをすべて入力

/*フルカラーのColorado*/
#walkme-player .walkme-in-wrapper.walkme-override.walkme-css-reset
border-color: #5765D1 !important;
}
.walkme-player.walkme-colorado.walkme-theme-black-blue .walkme-question-mark.walkme-override.walkme-css-reset
{
background-color: #5765D1 !important
}
.walkme-player.walkme-colorado.walkme-theme-black-blue .walkme-in-wrapper,
.walkme-player.walkme-colorado.walkme-theme-black-blue * .walkme-in-wrapper {
background-color: #5765D1 !important;
}
.walkme-player.walkme-colorado.walkme-theme-black-blue,
.walkme-player.walkme-colorado.walkme-theme-black-blue * {
background-color: #5765D1 !important;
}
.walkme-player.walkme-colorado .walkme-title.walkme-override.walkme-css-reset,
.walkme-player.walkme-colorado .walkme-title.walkme-override.walkme-css-reset * {
background-color: #5765D1 !important;
}

注

Coloradoウィジェットがブラック&ブルーの配色に設定されている場合、このCSSは動作しません。

カリフォルニアの背景イメージを変更

#walkme-player.walkme-california {
background-image: url('urlHere') !important; 
}

Danubeウィジェットの色を変更

/* Danube */
div.walkme-player.walkme-danube.walkme-override div.walkme-bar,
div.walkme-player.walkme-danube.walkme-override * div.walkme-bar {
background: red !important;
}

Zambeziウィジェットイメージを変更

/* Zambezi - 新しいイメージ */
div.walkme-player.walkme-zambezi.walkme-override.walkme-position-major-bottom.walkme-position-minor-right_corner {
background-image: url('insert your URL here') !important;
}

前

後

注

Zambezi三角形ウィジェットは画像 - 色を変更するには、既存の画像に代わる新しい画像をデザインしてアップロードする必要がある
正しい位置クラスが選択されていることを確認する（「.walkme-position-minor-right_corner」）

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

はいいいえ

はい

いいえ

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