CSS変数の定義を調べるためのリファレンスです。下の長い一覧をそのまま追加CSSへ貼るのではなく、必要な変数やセレクターだけを対象フォームに限定して上書きします。一覧は 9.1.1 の配布CSSを基にしており、実測した限定例は 13.0.0 での結果です。
特定のフォームだけを調整する例
フォームを囲むWordPressのグループブロックに、追加CSSクラス waza-form-sample を設定します。追加CSS、または子テーマのCSSへ次の差分だけを保存してください。プラグインの配布CSSは編集しません。グループを使うことで、フォームブロック側の追加クラス反映に依存せず範囲を指定できます。
.waza-form-sample {
--_global--border-radius: 8px;
--_form-control-border-color-focus: #765400;
}
.waza-form-sample .smf-text-control__control::placeholder {
color: #666;
opacity: 1;
}
.waza-form-sample .smf-button-control__control:focus-visible {
outline: 3px solid #765400;
outline-offset: 3px;
}この例は角丸とフォーカス色、プレースホルダー色を変更します。変数が宣言されていても、対象要素がその変数を参照していなければ見た目は変わりません。開発者ツールの計算済みスタイルで上書き先を確認してください。
CSSだけを確認する見本
次は表示確認用のHTML見本です。Snow Monkey Formsの送信処理は接続しておらず、入力内容を送信・保存しません。Tabでボタンへ移動し、フォーカス枠を確認できます。
実フォームでCSS変数の適用先を確認する
スクロールできます
| 項目 | この例で確認した表示 |
|---|---|
| 入力欄の角丸 | 郵便番号・住所の5欄で8px。 |
| placeholder | placeholder属性を設定した郵便番号欄で#666。 |
| 入力欄のフォーカス | Tabで移動した欄の枠色が#765400。 |
| ボタンのフォーカス | 確認ボタンへTabで移動すると3pxの輪郭線。 |
| 対象外フォーム | 専用クラスがないフォームの角丸は元の3px。 |
CSS変数を設定したグループの中に実際のフォームを置き、入力欄をTabで移動します。角丸だけが変わったのか、フォーカス時の枠色まで変わったのかを区別して確認してください。
placeholderのCSSは、入力例の文字を新しく追加するものではありません。フォームの各フィールド設定でplaceholderを指定してから、その文字色を確認します。
上の限定例は、確認画面から戻って作り直された住所欄でも適用されました。下の長い一覧は参照用で、全項目・全状態を実測した結果ではありません。ボタン全体をデザインする場合は、3種類のフォーム限定ボタンCSSを使います。
確認と戻し方
適用先だけが変わり、別フォームやヘッダーなどが変わっていないことを確認します。入力、エラー、確認、送信完了の各画面は実フォームで別途検証してください。戻す場合は今回追加したCSSとグループの追加クラスを外します。
その他メモ
プレースホルダーの色を変更（上と同じく、対象フォームを囲んだグループの追加CSSクラス waza-form-sample で範囲を限定しています。全フォームに効かせたい場合だけ先頭のクラスを外してください）
.waza-form-sample .smf-text-control__control::placeholder {
color: #ADADAD;
opacity: 1;
}Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。
目次
Snow Monkey Formsで定義されている変数
Snow Monkey Formsは機能面は素晴らしいのですが、見た目の調整は設定項目が少ない&カスタマイズしにくいです。
無理やりCSSで上書きしてしまうのですが、もうちょっと変数とかわかっているとキレイにコーディングできそうだったので、調査してみました。
snow-monkey-forms/dist/css/fallback.css に記載されています。
:root {
/*────────────────────────────
■ グローバル設定
・背景色や角丸など、全体に関わる基本設定
─────────────────────────────*/
--_global--background-color: #0000; /* 背景色 */
--_global--border-radius: 3px; /* 角丸 */
/*────────────────────────────
■ カラーパレット
・テキストやボーダー、アクセントカラーなど
─────────────────────────────*/
--_color-black: #111; /* ブラック系 */
--_color-gray: #999; /* グレー */
--_dark-color-gray: #666; /* やや暗いグレー */
--_darker-color-gray: #444; /* さらに暗いグレー */
--_darkest-color-gray: #3b3b3b; /* 最も暗いグレー */
--_light-color-gray: #ccc; /* やや明るいグレー */
--_lighter-color-gray: #eee; /* さらに明るいグレー */
--_lightest-color-gray: #f7f7f7; /* 非常に明るいグレー */
--_color-text: #333; /* 基本のテキスト色 */
--_dark-color-text: #000; /* 濃いテキスト色 */
--_darker-color-text: #000; /* さらに濃いテキスト色 */
--_darkest-color-text: #000; /* 最も濃いテキスト色 */
--_light-color-text: #666; /* やや明るいテキスト色 */
--_lighter-color-text: #888; /* さらに明るいテキスト色 */
--_lightest-color-text: #919191; /* 非常に明るいテキスト色 */
--_color-white: #fff; /* 白 */
--_color-red: #e74c3c; /* アクセント用の赤 */
/*────────────────────────────
■ コンテナ・フォーム・トランジション設定
・フォーム部分のボーダー色やコンテナの幅、動きの速さなど
─────────────────────────────*/
--_global--container-margin: var(--_s1); /* コンテナ周りの余白 */
--_global--container-max-width: 1280px; /* コンテナの最大幅 */
--_list-item-indent: 1.5em; /* リストアイテムのインデント */
--_form-control-border-color: var(--_light-color-gray); /* フォームの境界線色 */
--_form-control-border-color-hover: var(--_color-gray); /* ホバー時の境界線色 */
--_form-control-border-color-focus: #85b7d9; /* フォーカス時の境界線色 */
--_global--transition-duration: .2s; /* アニメーションの時間 */
--_global--transition-function-timing: ease-out; /* イージング（動きの加減） */
--_global--transition-delay: 0s; /* トランジションの遅延時間 */
/*────────────────────────────
■ タイポグラフィ設定
・フォントファミリー、サイズ、行間などテキストに関わる設定
─────────────────────────────*/
--_half-leading: 0.3; /* 行間の補正値 */
--_global--line-height: calc(1 + var(--_half-leading)*2); /* 基本行高さ */
--_base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* ベースフォント */
--_global--font-family: var(--_base-font-family); /* 全体で使用するフォント */
--_base-font-size-px: 16px; /* ベースフォントサイズ（ピクセル単位） */
--_global--font-size-px: var(--_base-font-size-px); /* 基本フォントサイズ */
/*────────────────────────────
■ 見出しのマージン設定
・h1～h6 など各見出しの上下の余白調整
─────────────────────────────*/
--_margin-scale: 1; /* マージンの拡大・縮小スケール */
--_h1-margin-top: 0; /* h1 上余白 */
--_h1-margin-bottom: 1; /* h1 下余白 */
--_h2-margin-top: 2; /* h2 上余白 */
--_h2-margin-bottom: 1; /* h2 下余白 */
--_h3-margin-top: 1.5; /* h3 上余白 */
--_h3-margin-bottom: 1; /* h3 下余白 */
--_h4-margin-top: 1.25; /* h4 上余白 */
--_h4-margin-bottom: 1; /* h4 下余白 */
--_h5-margin-top: 1; /* h5 上余白 */
--_h5-margin-bottom: .5; /* h5 下余白 */
--_h6-margin-top: 1; /* h6 上余白 */
--_h6-margin-bottom: .5; /* h6 下余白 */
/*────────────────────────────
■ スペーシング（余白・パディング）の基準
・全体のスペース計算の基本となる値（行高さを利用）
─────────────────────────────*/
--_space-unitless: var(--_global--line-height); /* スペース計算の基準値 */
--_space: calc(var(--_global--line-height) * 1rem); /* 基本のスペース単位 */
/*────────────────────────────
■ その他設定
─────────────────────────────*/
--_page-effect-z-index: 1000000; /* エフェクト等で使用する z-index */
/*────────────────────────────
■ ハーモニックシーケンス（フォントサイズ・行間調整用）
・調和数列を利用して、サイズや行間のリズムを作成
─────────────────────────────*/
--_harmonic-sequence-base: 8;
--_min-harmonic-sequence-base: 9;
--_max-harmonic-sequence-base: var(--_harmonic-sequence-base);
--_line-height-slope: -0.16666;
--_font-size-level: 0;
/*────────────────────────────
■ マージン・パディング計算用数列（ms系）
・リズミカルな数列で余白の比率を設定
─────────────────────────────*/
--_ms-2: calc(var(--_space-unitless) / 3 * 1);
--_ms-1: calc(var(--_space-unitless) / 3 * 2);
--_ms0: 0rem;
--_ms1: calc(var(--_space-unitless) / 3 * 3);
--_ms2: calc(var(--_space-unitless) / 3 * 5);
--_ms3: calc(var(--_space-unitless) / 3 * 8);
--_ms4: calc(var(--_space-unitless) / 3 * 13);
--_ms5: calc(var(--_space-unitless) / 3 * 21);
--_ms6: calc(var(--_space-unitless) / 3 * 34);
--_ms7: calc(var(--_space-unitless) / 3 * 55);
/*────────────────────────────
■ レスポンシブなスペーシング（s系）
・ms系の値に rem 単位や clamp() を用い、画面幅に応じたサイズに調整
─────────────────────────────*/
--_s-2: calc(var(--_ms-2) * 1rem);
--_s-1: calc(var(--_ms-1) * 1rem);
--_s0: 0rem;
--_s1: calc(var(--_ms1) * 1rem);
--_s2: clamp(
calc(var(--_ms1) + var(--_ms2) * 0.28125) * 1rem,
calc(((var(--_ms2) - var(--_ms1) + var(--_ms2) * 0.28125) / 57.5 * -22.5
+ var(--_ms1) + var(--_ms2) * 0.28125) * 1rem
+ (var(--_ms2) - var(--_ms1) + var(--_ms2) * 0.28125) / 57.5 * 100vw),
var(--_ms2) * 1rem
);
--_s3: clamp(
calc(var(--_ms1) + var(--_ms3) * 0.28125) * 1rem,
calc(((var(--_ms3) - var(--_ms1) + var(--_ms3) * 0.28125) / 57.5 * -22.5
+ var(--_ms1) + var(--_ms3) * 0.28125) * 1rem
+ (var(--_ms3) - var(--_ms1) + var(--_ms3) * 0.28125) / 57.5 * 100vw),
var(--_ms3) * 1rem
);
--_s4: clamp(
calc(var(--_ms1) + var(--_ms4) * 0.28125) * 1rem,
calc(((var(--_ms4) - var(--_ms1) + var(--_ms4) * 0.28125) / 57.5 * -22.5
+ var(--_ms1) + var(--_ms4) * 0.28125) * 1rem
+ (var(--_ms4) - var(--_ms1) + var(--_ms4) * 0.28125) / 57.5 * 100vw),
var(--_ms4) * 1rem
);
--_s5: clamp(
calc(var(--_ms1) + var(--_ms5) * 0.28125) * 1rem,
calc(((var(--_ms5) - var(--_ms1) + var(--_ms5) * 0.28125) / 57.5 * -22.5
+ var(--_ms1) + var(--_ms5) * 0.28125) * 1rem
+ (var(--_ms5) - var(--_ms1) + var(--_ms5) * 0.28125) / 57.5 * 100vw),
var(--_ms5) * 1rem
);
--_s6: clamp(
calc(var(--_ms1) + var(--_ms6) * 0.28125) * 1rem,
calc(((var(--_ms6) - var(--_ms1) + var(--_ms6) * 0.28125) / 57.5 * -22.5
+ var(--_ms1) + var(--_ms6) * 0.28125) * 1rem
+ (var(--_ms6) - var(--_ms1) + var(--_ms6) * 0.28125) / 57.5 * 100vw),
var(--_ms6) * 1rem
);
--_s7: clamp(
calc(var(--_ms1) + var(--_ms7) * 0.28125) * 1rem,
calc(((var(--_ms7) - var(--_ms1) + var(--_ms7) * 0.28125) / 57.5 * -22.5
+ var(--_ms1) + var(--_ms7) * 0.28125) * 1rem
+ (var(--_ms7) - var(--_ms1) + var(--_ms7) * 0.28125) / 57.5 * 100vw),
var(--_ms7) * 1rem
);
/*────────────────────────────
■ マージン設定（レスポンシブ s系 × マージンスケール）
・外側の余白として利用（必要に応じて変更）
─────────────────────────────*/
--_margin-2: calc(var(--_s-2) * var(--_margin-scale));
--_margin-1: calc(var(--_s-1) * var(--_margin-scale));
--_margin0: 0rem;
--_margin1: calc(var(--_s1) * var(--_margin-scale));
--_margin2: calc(var(--_s2) * var(--_margin-scale));
--_margin3: calc(var(--_s3) * var(--_margin-scale));
--_margin4: calc(var(--_s4) * var(--_margin-scale));
--_margin5: calc(var(--_s5) * var(--_margin-scale));
--_margin6: calc(var(--_s6) * var(--_margin-scale));
--_margin7: calc(var(--_s7) * var(--_margin-scale));
/*────────────────────────────
■ パディング設定（レスポンシブ s系そのまま）
・内側の余白として利用
─────────────────────────────*/
--_padding-2: var(--_s-2);
--_padding-1: var(--_s-1);
--_padding0: 0rem;
--_padding1: var(--_s1);
--_padding2: var(--_s2);
--_padding3: var(--_s3);
--_padding4: var(--_s4);
--_padding5: var(--_s5);
--_padding6: var(--_s6);
--_padding7: var(--_s7);
}
Snow Monkey FormsのフォームのCSS
snow-monkey-forms/dist/css/app.css がベース。
フォーム：シンプルテーブルタイプ
/* アクション部分の上下マージン（シンプルテーブルも --_margin1 を使用） */
.smf-form--simple-table + .smf-action {
margin: var(--_margin1) 0;
text-align: center;
}
.smf-form--simple-table .smf-item {
margin-bottom: 0;
margin-top: 0;
padding: 1rem 0;
}
/* 区切り線内の列は左右のパディング無し（固定） */
.smf-form--simple-table .smf-item--divider .smf-item__col {
flex: 1 1 auto;
max-width: none;
}
/* ラベル部分の下パディング：--_padding-1 を利用 */
.smf-form--simple-table .smf-item__col--label {
padding-bottom: var(--_padding-1);
}
@media (min-width:640px) {
.smf-form--simple-table .smf-item {
display: flex;
}
.smf-form--simple-table .smf-item__col {
flex: 1 1 auto;
}
.smf-form--simple-table .smf-item__col--label {
flex: 0 0 14em;
max-width: 14em;
padding-bottom: 0;
padding-right: var(--_padding1); /* --_padding1 でラベルの右パディング調整 */
}
.smf-form--simple-table .smf-item__col--controls {
flex: 1 1 calc(100% - 14em);
max-width: calc(100% - 14em);
}
}フォーム：レタータイプ
/* アクション部分の上下マージン（レタータイプも --_margin1 を使用） */
.smf-form--letter + .smf-action {
margin: var(--_margin1) 0;
text-align: center;
}
.smf-form--letter .smf-item {
margin-bottom: 0;
margin-top: 0;
padding: 1rem 0; /* 固定値 */
}
/* ラベル部分の下パディング：--_padding-1 を変更すると、ラベル下の余白が変わる */
.smf-form--letter .smf-item__col--label {
padding-bottom: var(--_padding-1);
}
.smf-form--letter .smf-text-control__control {
max-width: 100%;
width: 100%;
}フォーム：ビジネスタイプ
/* フォーム下部のアクション部分（ボタンなど）の上下マージン */
.smf-form--business + .smf-action {
margin: var(--_margin1) 0; /* --_margin1 を変更すると、アクション部分の上下余白が変わる */
text-align: center;
}
/* 各項目の枠線設定（固定値） */
.smf-form--business .smf-item {
border: 1px solid #ddd;
margin-bottom: 0;
margin-top: 0;
}
/* 最初の項目以外は上のボーダーを非表示 */
.smf-form--business .smf-item:not(:first-child) {
border-top: none;
}
/* 区切り線アイテムの左右ボーダーを除去 */
.smf-form--business .smf-item--divider {
border-left: none;
border-right: none;
}
/* 区切り線内の各列：左右のパディングは固定（0） */
.smf-form--business .smf-item--divider .smf-item__col {
flex: 1 1 auto;
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* 各列の内側余白：ここで --_padding1 を利用
→ この値を変更すると、項目内の左右パディングが調整できる */
.smf-form--business .smf-item__col {
padding: var(--_padding1);
}
/* ラベル部分の背景色と下部ボーダー（固定値） */
.smf-form--business .smf-item__col--label {
background-color: #f7f7f7;
border-bottom: 1px solid #ddd;
}
/* 画面幅 640px 以上の場合のレイアウト調整 */
@media (min-width:640px) {
.smf-form--business .smf-item {
display: flex; /* 横並びにする */
}
.smf-form--business .smf-item__col {
flex: 1 1 auto;
}
.smf-form--business .smf-item__col--label {
border-bottom: none;
border-right: 1px solid #ddd;
flex: 0 0 14em;
max-width: 14em;
}
.smf-form--business .smf-item__col--controls {
flex: 1 1 calc(100% - 14em);
max-width: calc(100% - 14em);
}
}ボタン操作（アクションエリア）
/* ボタン内の左右パディング：--_padding1 を調整すると、ボタンの左右余白が変わる */
.smf-action .smf-button-control__control {
padding-left: var(--_padding1);
padding-right: var(--_padding1);
}
/* ボタン同士の間隔：--_margin-1 で調整 */
.smf-action .smf-button-control + .smf-button-control {
margin-left: var(--_margin-1);
}
/* ボタン内に配置する「送信中」アイコンは位置を絶対指定 */
.smf-action .smf-button-control__control {
position: relative;
}
.smf-action .smf-button-control__control .smf-sending {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
フィールドセット内の要素間余白
/* フィールドセット内の各要素の上マージン：--_margin-2 で調整 */
.smf-control-fieldset > * + * {
margin-top: var(--_margin-2);
}
コントロール説明文
/* 説明文の文字色は --_dark-color-gray を使用 */
.smf-control-description {
color: var(--_dark-color-gray);
margin-top: var(--_margin-2);
--_font-size-level: -1; /* タイポグラフィ用の微調整（詳細は全体設定参照） */
font-size: var(--_font-size); /* --_font-size を変更すると、説明文のフォントサイズも変わる */
line-height: var(--_line-height); /* 行間は --_line-height に依存 */
}エラーメッセージ
.smf-error-messages {
color: #cc3033; /* 固定色 */
margin-top: var(--_margin-2);
}
プログレス・トラッカー（進行状況表示）
.smf-progress-tracker {
display: flex;
flex-wrap: nowrap;
list-style: none;
margin-bottom: var(--_margin1); /* 下マージンは --_margin1 を利用 */
margin-left: 0;
padding-left: 0;
}
.smf-progress-tracker__item {
align-items: center;
display: flex;
flex: 1 1 auto;
flex-direction: column;
margin: 0;
position: relative;
width: 33.33333%;
}
/* 進捗バー（横線）の色は --_light-color-gray で指定 */
.smf-progress-tracker__item:after,
.smf-progress-tracker__item:before {
background-color: var(--_light-color-gray);
content: "";
display: block;
height: 1px;
position: absolute;
top: 12px;
}
.smf-progress-tracker__item:before {
left: 0;
right: 50%;
}
.smf-progress-tracker__item:after {
left: 50%;
right: 0;
}
/* 完了・入力中状態の表示切替 */
.smf-progress-tracker__item--complete:after,
.smf-progress-tracker__item--input:before {
display: none;
}
/* 番号の表示（丸い背景）には --_light-color-gray を使用 */
.smf-progress-tracker__item__number {
align-items: center;
background-color: var(--_light-color-gray);
border-radius: 100%;
color: #fff;
display: flex;
height: 24px;
justify-content: center;
letter-spacing: 0;
overflow: hidden;
position: relative;
width: 24px;
z-index: 1;
}
/* 番号下のテキストは --_light-color-gray で色指定 */
.smf-progress-tracker__item__text {
color: var(--_light-color-gray);
margin-top: 0.5em;
}
/* 進行状況に応じた背景・文字色：--_color-text を利用 */
[data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number,
[data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
[data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__number {
background-color: var(--_color-text);
font-weight: 700;
}
[data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text,
[data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
[data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__text {
color: var(--_color-text);
font-weight: 700;
}送信中アイコン（アニメーション）
@keyframes smf-sending {
0% { transform: rotate(0deg); }
to { transform: rotate(1turn); }
}
.smf-sending[aria-hidden=true] {
visibility: hidden;
}
.smf-sending:before {
animation: smf-sending 2s ease-out 0s infinite;
border: 1px solid #00000080;
border-radius: 100%;
border-top-color: #0000;
content: "";
display: block;
height: 10px;
width: 10px;
}システムエラー・その他
.smf-system-error-status-text {
color: var(--_color-gray); /* --_color-gray を変更するとエラー時の文字色が変わる */
--_font-size-level: -1;
font-size: var(--_font-size);
line-height: var(--_line-height);
}
.snow-monkey-form[data-screen=loading] {
visibility: hidden;
}
.smf-form [data-invalid="1"] {
border-color: #d98585;
}ボタンのスタイル（システムエラー／アクション）
.smf-action .smf-button-control__control {
background-color: var(--_lighter-color-gray); /* --_lighter-color-gray でボタン背景色を調整 */
background-image: linear-gradient(180deg, #fff, var(--_lighter-color-gray));
border-radius: var(--_global--border-radius); /* --_global--border-radius でボタンの角丸を調整 */
color: var(--_color-text); /* --_color-text でボタンの文字色を変更 */
cursor: pointer;
display: inline-block;
padding: var(--_padding-2) var(--_padding-1); /* 上下余白は --_padding-2、左右余白は --_padding-1 で調整 */
text-decoration: none;
--_border-radius: var(--_global--border-radius);
--_border-color: var(--_form-control-border-color); /* --_form-control-border-color で初期のボタン枠色を指定 */
border: 1px solid var(--_border-color);
border-radius: var(--_border-radius);
outline: 0;
--_transition-duration: var(--_global--transition-duration); /* アニメーションの時間 */
--_transition-function-timing: var(--_global--transition-function-timing); /* イージング設定 */
--_transition-delay: var(--_global--transition-delay);
transition: border var(--_transition-duration) var(--_transition-function-timing) var(--_transition-delay);
}
.smf-action .smf-button-control__control:hover {
--_border-color: var(--_form-control-border-color-hover); /* ホバー時の枠色：--_form-control-border-color-hover を調整 */
}
.smf-action .smf-button-control__control:active,
.smf-action .smf-button-control__control:focus,
.smf-action .smf-button-control__control:focus-within,
.smf-action .smf-button-control__control[aria-selected=true] {
--_border-color: var(--_form-control-border-color-focus); /* フォーカス時の枠色：--_form-control-border-color-focus を調整 */
}
/* ボタン内の input や textarea は枠線無しに */
.smf-action .smf-button-control__control > input,
.smf-action .smf-button-control__control > textarea {
border: none;
outline: none;
}この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
9.1.1のapp.cssでは、ボタンの後方にあるpadding一括指定が、先の左右padding指定を上書きします。実際に採用される値はCSSの順序と詳細度で確認してください。参照：開発元のソース、照合した公式9.1.1配布版。13.0.0 での同じ上書き関係は照合していません。
よくある質問：Snow Monkey FormsのCSSを書くための変数ガイド
この記事は、何のための資料ですか？
記事では、Snow Monkey FormsのCSS変数の定義を調べるためのリファレンスです。下の長い一覧をそのまま追加CSSへ貼るのではなく、必要な変数やセレクターだけを対象フォームに限定して上書きします。
特定のフォームだけを調整するには、どうしますか？
記事では、フォームを囲むWordPressのグループブロックに追加CSSクラスを設定し、追加CSS、または子テーマのCSSへ差分だけを保存します。プラグインの配布CSSは編集しません。グループを使うことで、フォームブロック側の追加クラス反映に依存せず範囲を指定できます。この例は角丸とフォーカス色、プレースホルダー色を変更します。
CSS変数を上書きしても、見た目が変わらないことはありますか？
記事では、変数が宣言されていても、対象要素がその変数を参照していなければ見た目は変わりません。開発者ツールの計算済みスタイルで上書き先を確認してください。
どんな変更が確認できましたか？
記事の表では、入力欄の角丸は郵便番号・住所の5欄で8px、placeholder属性を設定した郵便番号欄でplaceholder色が#666、Tabで移動した欄の枠色が#765400、確認ボタンへTabで移動すると3pxの輪郭線です。対象外の、専用クラスがないフォームの角丸は元の3pxでした。
記事の変数一覧は、どの版のものですか？
記事では、一覧は9.1.1の配布CSSを基にしており、実測した限定例は13.0.0での結果です。変数名・初期値・セレクターが変わっている可能性があるため、お使いの版のCSSまたは開発者ツールの計算済みスタイルで必ず現物を確認してください。
ボタンのpaddingが、効かないことがありますか？
記事では、9.1.1のapp.cssでは、ボタンの後方にあるpadding一括指定が、先の左右padding指定を上書きします。実際に採用される値はCSSの順序と詳細度で確認してください。
設定したあとの確認と、元に戻す方法は？
記事では、適用先だけが変わり、別フォームやヘッダーなどが変わっていないことを確認します。入力、エラー、確認、送信完了の各画面は実フォームで別途検証してください。戻す場合は今回追加したCSSとグループの追加クラスを外します。記事のCSS見本は表示確認用のHTML見本で、Snow Monkey Formsの送信処理は接続していません。最新は公式で確認してください。
