Snow Monkey Forms│ボタン等の見た目の調整まとめ

2024.06.242026.10.04

Snow Monkey Formsの操作ボタンを、対象フォームだけに適用するCSSで調整します。

自分でCSSで上書きする必要があります。

よくSWELLと組み合わせることが多いので、似たような見た目に修正してみました。

Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。

Snow Monkey Formsのボタン等の見た目の調整まとめ

対象フォームをグループブロックで囲み、追加CSSクラスに waza-smf-round、waza-smf-small、waza-smf-arrow のいずれか1つを指定します。対応するCSSだけを「外観 → カスタマイズ → 追加CSS」または子テーマのCSSに追加してください。

指定グループ内の確認・戻る・送信ボタンが対象です。クラスを付けていない別フォームには適用しません。戻すときは追加したCSSとグループのクラスを削除します。ボタンの送信処理は変更しません。

確認ボタン

最初は waza-smf-round を使う角丸ボタンです。色とフォーカス表示は末尾の見本で確認できます。

.waza-smf-round .smf-action .smf-button-control__control {
  box-sizing: border-box;
  max-width: 100%; min-width: 0; width: 100%;
  padding: 1em 1.5em; border: 2px solid #765400;
  border-radius: 80px; font-size: 1.2em; line-height: 1.5;
  background: #765400; color: #fff; white-space: normal;
  overflow-wrap: anywhere; cursor: pointer;
}
.waza-smf-round .smf-action .smf-button-control__control:hover:not(:disabled) { background: #513900; border-color: #513900; }
.waza-smf-round .smf-action .smf-button-control__control:focus-visible { outline: 3px solid #765400; outline-offset: 3px; }
.waza-smf-round .smf-action .smf-button-control__control:disabled { opacity: .55; cursor: not-allowed; }

小さいボタン（waza-smf-small）

.waza-smf-small .smf-action .smf-button-control__control {
  box-sizing: border-box;
  max-width: 100%; min-width: 0; width: 260px;
  padding: 1em 1.5em; border: 2px solid #765400;
  border-radius: 80px; font-size: 1em; line-height: 1.5;
  background: #765400; color: #fff; white-space: normal;
  overflow-wrap: anywhere; cursor: pointer;
}
.waza-smf-small .smf-action .smf-button-control__control:hover:not(:disabled) { background: #513900; border-color: #513900; }
.waza-smf-small .smf-action .smf-button-control__control:focus-visible { outline: 3px solid #765400; outline-offset: 3px; }
.waza-smf-small .smf-action .smf-button-control__control:disabled { opacity: .55; cursor: not-allowed; }

矢印付き（waza-smf-arrow）

.waza-smf-arrow .smf-action .smf-button-control__control {
  box-sizing: border-box;
  max-width: 100%; min-width: 0; width: 260px;
  padding: 1em 1.5em; border: 2px solid #765400;
  border-radius: 4px; font-size: 1em; line-height: 1.5;
  background: #765400; color: #fff; white-space: normal;
  overflow-wrap: anywhere; cursor: pointer;
}
.waza-smf-arrow .smf-action .smf-button-control__control:hover:not(:disabled) { background: #513900; border-color: #513900; }
.waza-smf-arrow .smf-action .smf-button-control__control:focus-visible { outline: 3px solid #765400; outline-offset: 3px; }
.waza-smf-arrow .smf-action .smf-button-control__control:disabled { opacity: .55; cursor: not-allowed; }
.waza-smf-arrow .smf-action .smf-button-control__control::after { content: " →"; }

実フォームの確認画面まで含めて見た目を確認する

スクロールできます

状態	確認すること
入力画面	Tabで確認ボタンへ移動し、3pxの枠が見えること。
確認画面	「戻る」と「送信」の両方に同じCSSが適用されること。
375px幅	ボタンがフォームをはみ出さないこと。
別フォーム	専用クラスがないフォームは元の色・幅で表示されること。

入力画面だけでなく、任意のテスト文字を入力して確認画面へ進みます。幅100%の例では、確認画面の「戻る」と「送信」もそれぞれ横幅いっぱいになります。横に2つ並べるデザインではなく、各ボタンの配置と余白を確認してください。

小さめ丸ボタンと矢印ボタンは、1280px・375pxの両方で幅260pxでした。Tabで3pxのフォーカス枠が表示され、専用クラスのない比較フォームは元の色のままでした。

ボタンの枠色・角丸だけを調整する場合は、CSS変数と適用範囲のガイドも参照してください。