概要
この記事では、テーマ設定のCSS変数を使用して、WalkMeコンテンツの色とタイポグラフィをカスタマイズする方法について説明します。 組織のブランドに合わせて、カスタムCSSでこれらの変数を直接適用することができます。
Theming: Getting Started Guide
色
プライマリ＆セカンダリ
| CSS変数 |
説明 |
値の例 |
| --colors_primary_main |
主要メイン色 |
#ed5725 |
| --colors_primary_tint |
主要色合い |
#f17951 |
| --colors_primary_shade |
主要シェード色 |
#cb3f11 |
| --colors_secondary_main |
セカンダリメイン色 |
#fe997b |
| --colors_secondary_tint |
セカンダリ色合い |
#fead95 |
| --colors_secondary_shade |
セカンダリシェード色 |
#fd602f |
背景とベース
| CSS変数 |
説明 |
値の例 |
| --colors_background_main |
背景のメイン色 |
#fdede7 |
| --colors_background_tint |
背景の色合い |
#fdf1ec |
| --colors_background_shade |
背景シェードの色 |
#f6aa8e |
| --colors_base_black |
ベースブラック |
#000000 |
| --colors_base_white |
ベースホワイト |
#ffffff |
| --colors_base_transparent |
ベース透明 |
透明 |
テキストとリンク
| CSS変数 |
説明 |
値の例 |
| --colors_text_main |
テキストのメイン色 |
#212529 |
| --colors_text_tint |
テキストの色合い |
#49525a |
| --colors_text_shade |
テキストシェードの色 |
#1b1f22 |
| --colors_link_main |
リンクのメイン色 |
#2a1d8e |
| --colors_link_tint |
リンクの色合い |
#3b29c7 |
| --colors_link_shade |
リンクシェードの色 |
#221772 |
ステータス
| CSS変数 |
説明 |
値の例 |
| --colors_success_main |
成功のメイン色 |
#115f6a |
| --colors_success_tint |
成功の色合い |
#1b9bab |
| --colors_success_shade |
成功シェードの色 |
#0d4b54 |
| --colors_warning_main |
警告のメイン色 |
#f4a939 |
| --colors_warning_tint |
警告の色合い |
#f6ba60 |
| --colors_warning_shade |
警告シェードの色 |
#e38d0d |
| --colors_error_main |
エラーのメイン色 |
#c62437 |
| --colors_error_tint |
エラーの色合い |
#dd4557 |
| --colors_error_shade |
エラーシェードの色 |
#a01d2c |
| --colors_info_main |
情報のメイン色 |
#595959 |
| --colors_info_tint |
情報の色合い |
#7a7a7a |
| --colors_info_shade |
情報シェードの色 |
#474747 |
タイポグラフィ
フォントと本文
| CSS変数 |
説明 |
値の例 |
| --fonts_primary_font |
主要なフォントファミリー |
walkme-poppins |
| --fonts_secondary_font |
セカンダリフォントファミリー |
walkme-proxima-nova |
| --typography_body_font_family |
本文フォントファミリー |
var(--fonts_primary_font) |
| --typography_body_font_size |
本文のフォントサイズ |
14px |
| --typography_body_font_weight |
本文フォントウェイト |
標準 |
| --typography_body_font_style |
本文フォントスタイル |
標準 |
| --typography_body_text_decoration |
本文テキストの装飾 |
なし |
タイトルとサブタイトル
| CSS変数 |
説明 |
値の例 |
| --typography_title_large_font_family |
大きなタイトルフォントファミリー |
var(--fonts_primary_font) |
| --typography_title_large_font_size |
大きなタイトルフォントサイズ |
24px |
| --typography_title_large_font_weight |
大きなタイトルフォントウェイト |
太字 |
| --typography_title_large_font_style |
大きなタイトルフォントスタイル |
標準 |
| --typography_title_large_text_decoration |
大きなタイトルテキストの装飾 |
なし |
| --typography_title_font_family |
タイトルフォントファミリー |
var(--fonts_primary_font) |
| --typography_title_font_size |
タイトルフォントサイズ |
20px |
| --typography_title_font_weight |
タイトルフォントウェイト |
太字 |
| --typography_title_font_style |
タイトルフォントスタイル |
標準 |
| --typography_title_text_decoration |
タイトルテキストの装飾 |
なし |
| --typography_subtitle_font_family |
字幕フォントファミリー |
var(--fonts_primary_font) |
| --typography_subtitle_font_size |
字幕のフォントサイズ |
16px |
| --typography_subtitle_font_weight |
字幕のフォントウェイト |
太字 |
| --typography_subtitle_font_style |
字幕フォントスタイル |
標準 |
| --typography_subtitle_text_decoration |
サブタイトルテキストの装飾 |
なし |
ボタンテキスト
| CSS変数 |
説明 |
値の例 |
| --typography_button_text_font_family |
ボタンテキストフォントファミリー |
var(--fonts_primary_font) |
| --typography_button_text_font_size |
ボタンテキストのフォントサイズ |
16px |
| --typography_button_text_font_weight |
ボタンテキストのフォントウェイト |
太字 |
| --typography_button_text_font_style |
ボタンテキストフォントスタイル |
標準 |
| --typography_button_text_text_decoration |
ボタンテキスト装飾 |
なし |
| --typography_button_text_small_font_family |
小さなボタンテキストフォントファミリー |
var(--fonts_primary_font) |
| --typography_button_text_small_font_size |
小さなボタンテキストフォントサイズ |
16px |
| --typography_button_text_small_font_weight |
小さなボタンテキストフォントの重み |
太字 |
| --typography_button_text_small_font_style |
小さなボタンテキストフォントスタイル |
標準 |
| --typography_button_text_small_text_decoration |
小さなボタンテキスト装飾 |
なし |
ボタン
プライマリ
| CSS変数 |
説明 |
値の例 |
| --buttons_primary_default_text_color |
デフォルトのテキスト色 |
var(--colors_base_white) |
| --buttons_primary_default_fill_color |
デフォルトの塗りつぶし色 |
var(--colors_primary_main) |
| --buttons_primary_default_border_width |
デフォルトの境界線幅 |
0 |
| --buttons_primary_default_border_color |
デフォルトの境界色 |
var(--colors_base_transparent) |
| --buttons_primary_default_border_radius |
デフォルトのコーナー半径 |
100px |
| --buttons_primary_hover_text_color |
ホバーテキストの色 |
var(--colors_base_white) |
| --buttons_primary_hover_fill_color |
ホバー塗りつぶしの色 |
var(--colors_primary_shade) |
| --buttons_primary_hover_border_width |
ホバー境界線の幅 |
0 |
| --buttons_primary_hover_border_color |
ホバー境界線の色 |
var(--colors_base_transparent) |
| --buttons_primary_hover_border_radius |
ホバーコーナー半径 |
100px |
| --buttons_primary_clicked_text_color |
クリックされたテキストの色 |
var(--colors_base_white) |
| --buttons_primary_clicked_fill_color |
クリックされた塗りつぶし色 |
var(--colors_primary_shade) |
| --buttons_primary_clicked_border_width |
クリックされた境界線の幅 |
0 |
| --buttons_primary_clicked_border_color |
クリックされた境界線の色 |
var(--colors_base_transparent) |
| --buttons_primary_clicked_border_radius |
クリックされたコーナー半径 |
100px |
セカンダリ
| CSS変数 |
説明 |
値の例 |
| --buttons_secondary_default_text_color |
デフォルトのテキスト色 |
var(--colors_primary_main) |
| --buttons_secondary_default_fill_color |
デフォルトの塗りつぶし色 |
var(--colors_base_transparent) |
| --buttons_secondary_default_border_width |
デフォルトの境界線幅 |
1px |
| --buttons_secondary_default_border_color |
デフォルトの境界色 |
var(--colors_primary_main) |
| --buttons_secondary_default_border_radius |
デフォルトのコーナー半径 |
100px |
| --buttons_secondary_hover_text_color |
ホバーテキストの色 |
var(--colors_primary_shade) |
| --buttons_secondary_hover_fill_color |
ホバー塗りつぶしの色 |
var(--colors_base_transparent) |
| --buttons_secondary_hover_border_width |
ホバー境界線の幅 |
1px |
| --buttons_secondary_hover_border_color |
ホバー境界線の色 |
var(--colors_primary_shade) |
| --buttons_secondary_hover_border_radius |
ホバーコーナー半径 |
100px |
| --buttons_secondary_clicked_text_color |
クリックされたテキストの色 |
var(--colors_primary_shade) |
| --buttons_secondary_clicked_fill_color |
クリックされた塗りつぶし色 |
var(--colors_base_transparent) |
| --buttons_secondary_clicked_border_width |
クリックされた境界線の幅 |
1px |
| --buttons_secondary_clicked_border_color |
クリックされた境界線の色 |
var(--colors_primary_shade) |
| --buttons_secondary_clicked_border_radius |
クリックされたコーナー半径 |
100px |
テキストリンク
| CSS変数 |
説明 |
値の例 |
| --buttons_text_link_default_text_color |
デフォルトのテキスト色 |
var(--colors_primary_main) |
| --buttons_text_link_default_fill_color |
デフォルトの塗りつぶし色 |
var(--colors_base_transparent) |
| --buttons_text_link_default_border_width |
デフォルトの境界線幅 |
0 |
| --buttons_text_link_default_border_color |
デフォルトの境界色 |
var(--colors_base_transparent) |
| --buttons_text_link_default_border_radius |
デフォルトのコーナー半径 |
0 |
| --buttons_text_link_hover_text_color |
ホバーテキストの色 |
var(--colors_primary_shade) |
| --buttons_text_link_hover_fill_color |
ホバー塗りつぶしの色 |
var(--colors_base_transparent) |
| --buttons_text_link_hover_border_width |
ホバー境界線の幅 |
0 |
| --buttons_text_link_hover_border_color |
ホバー境界線の色 |
var(--colors_base_transparent) |
| --buttons_text_link_hover_border_radius |
ホバーコーナー半径 |
0 |
| --buttons_text_link_clicked_text_color |
クリックされたテキストの色 |
var(--colors_primary_shade) |
| --buttons_text_link_clicked_fill_color |
クリックされた塗りつぶし色 |
var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_width |
クリックされた境界線の幅 |
0 |
| --buttons_text_link_clicked_border_color |
クリックされた境界線の色 |
var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_radius |
クリックされたコーナー半径 |
0 |
サクセス
| CSS変数 |
説明 |
値の例 |
| --buttons_success_default_text_color |
デフォルトのテキスト色 |
var(--colors_base_white) |
| --buttons_success_default_fill_color |
デフォルトの塗りつぶし色 |
var(--colors_success_main) |
| --buttons_success_default_border_width |
デフォルトの境界線幅 |
0 |
| --buttons_success_default_border_colo |
デフォルトの境界色 |
var(--colors_base_transparent) |
| --buttons_success_default_border_radius |
デフォルトのコーナー半径 |
100px |
| --buttons_success_hover_text_color |
ホバーテキストの色 |
var(--colors_base_white) |
| --buttons_success_hover_fill_color |
ホバー塗りつぶしの色 |
var(--colors_success_shade) |
| --buttons_success_hover_border_width |
ホバー境界線の幅 |
0 |
| --buttons_success_hover_border_color |
ホバー境界線の色 |
var(--colors_base_transparent) |
| --buttons_success_hover_border_radius |
ホバーコーナー半径 |
100px |
| --buttons_success_clicked_text_color |
クリックされたテキストの色 |
var(--colors_base_white) |
| --buttons_success_clicked_fill_color |
クリックされた塗りつぶし色 |
var(--colors_success_shade) |
| --buttons_success_clicked_border_width |
クリックされた境界線の幅 |
0 |
| --buttons_success_clicked_border_color |
クリックされた境界線の色 |
var(--colors_base_transparent) |
| --buttons_success_clicked_border_radius |
クリックされたコーナー半径 |
100px |
警告
| CSS変数 |
説明 |
値の例 |
| --buttons_warning_default_text_color |
デフォルトのテキスト色 |
var(--colors_base_white) |
| --buttons_warning_default_fill_color |
デフォルトの塗りつぶし色 |
var(--colors_warning_main) |
| --buttons_warning_default_border_width |
デフォルトの境界線幅 |
0 |
| --buttons_warning_default_border_color |
デフォルトの境界色 |
var(--colors_base_transparent) |
| --buttons_warning_default_border_radius |
デフォルトのコーナー半径 |
100px |
| --buttons_warning_hover_text_color |
ホバーテキストの色 |
var(--colors_base_white) |
| --buttons_warning_hover_fill_color |
ホバー塗りつぶしの色 |
var(--colors_warning_shade) |
| --buttons_warning_hover_border_width |
ホバー境界線の幅 |
0 |
| --buttons_warning_hover_border_color |
ホバー境界線の色 |
var(--colors_base_transparent) |
| --buttons_warning_hover_border_radius |
ホバーコーナー半径 |
100px |
| --buttons_warning_clicked_text_color |
クリックされたテキストの色 |
var(--colors_base_white) |
| --buttons_warning_clicked_fill_color |
クリックされた塗りつぶし色 |
var(--colors_warning_shade) |
| --buttons_warning_clicked_border_width |
クリックされた境界線の幅 |
0 |
| --buttons_warning_clicked_border_colo |
クリックされた境界線の色 |
var(--colors_base_transparent) |
| --buttons_warning_clicked_border_radius |
クリックされたコーナー半径 |
100px |
エラー
| CSS変数 |
説明 |
値の例 |
| --buttons_error_default_text_color |
デフォルトのテキスト色 |
var(--colors_base_white) |
| --buttons_error_default_fill_color |
デフォルトの塗りつぶし色 |
var(--colors_error_main) |
| --buttons_error_default_border_width |
デフォルトの境界線幅 |
0 |
| --buttons_error_default_border_color |
デフォルトの境界色 |
var(--colors_base_transparent) |
| --buttons_error_default_border_radius |
デフォルトのコーナー半径 |
100px |
| --buttons_error_hover_text_color |
ホバーテキストの色 |
var(--colors_base_white) |
| --buttons_error_hover_fill_color |
ホバー塗りつぶしの色 |
var(--colors_error_shade) |
| --buttons_error_hover_border_width |
ホバー境界線の幅 |
0 |
| --buttons_error_hover_border_color |
ホバー境界線の色 |
var(--colors_base_transparent) |
| --buttons_error_hover_border_radius |
ホバーコーナー半径 |
100px |
| --buttons_error_clicked_text_color |
クリックされたテキストの色 |
var(--colors_base_white) |
| --buttons_error_clicked_fill_color |
クリックされた塗りつぶし色 |
var(--colors_error_shade) |
| --buttons_error_clicked_border_width |
クリックされた境界線の幅 |
0 |
| --buttons_error_clicked_border_color |
クリックされた境界線の色 |
var(--colors_base_transparent) |
| --buttons_error_clicked_border_radius |
クリックされたコーナー半径 |
100px |
