【Snow Monkey】ボタンを「ピル型（カプセル型・角丸）」にするカスタマイズ

Snow Monkeyのボタンはデフォルトでも角丸がついていますが、もっと丸みを強くして「ピル型」にしたいケースがあります。

設定方法は３通りあります。

• 1つのボタンだけ変えたい（CSSなし）→ 管理画面で設定
• 1つのボタンだけ変えたい（CSS使用）→ クラスを追加して指定
• サイト全体のボタンを統一したい → CSSで全体に適用

用途に合わせて使い分けてくださいね。

ピル型ボタンが効果的な場面

ピル型ボタンは、次のような場面で特に映えます。

CTAボタン

「お問い合わせはこちら」「無料相談を申し込む」など、ユーザーにアクションを促すボタンは、ピル型にすることで視線を集めやすくなります。
角が丸いぶん柔らかい印象になり、クリックへの心理的なハードルも下がります。

女性向け・ナチュラル系デザイン

コスメ・ライフスタイル・子育て系など、やわらかいトーンのサイトではピル型がデザインに馴染みやすいです。
カクカクした角より、全体の雰囲気と統一しやすくなります。

シンプルなフラットデザイン

ボーダーレスなフラットデザインのサイトでは、ピル型ボタンがアクセントとして機能します。
影や装飾を使わなくても、形だけで存在感を出せます。

方法① 管理画面で設定する（単発・ボタンごと）

1つのボタンだけピル型にしたい場合は、ブロックエディターのサイドバーから設定できます。

１） Snow Monkeyのボタンを設置

２） ボタンブロックを選択

３） 右サイドバーの「ブロック」タブを開く

４） 枠線 → 角丸のスライダー（画面下部にあり）を右端まで動かす（または数値を 9999 に設定）

スクリーンショットを見ながら設定できるので、CSSに慣れていない方にもおすすめです。

border-radius: 9999px は大きな値を指定することでどんなボタンサイズでも完全な丸みになる定番の書き方です。.smb-btn__label への padding-inline は、ピル型にしたときに文字がボタンの端に詰まって見えるのを防ぐための調整です。

方法② CSSクラスを追加して個別に指定する

「このボタンだけピル型にしたい」という場合にCSSで対応する方法です。

まずCSSを追加し、適用したいボタンにクラスを付与します。

1） ボタンにクラスを付与する

１） ピル型にしたいボタンブロックを選択

2） 右サイドバーの「ブロック」タブを開く

3） 一番下の「高度な設定」を展開する

4） 「追加CSSクラス」にpill-btnと入力する

.pill-btn .smb-btn {
  border-radius: 9999px;
}
.pill-btn .smb-btn .smb-btn__label {
  padding-inline: 10px;
}

3） 表示を確認する

設定後、表示を確認して、CSSが反映されていれば完成です。

方法③ CSSで設定する（サイト全体に適用）

サイト全体に適用する場合

サイト内のすべてのボタンをまとめてピル型にしたい場合はCSSで設定します。

.smb-btn {
  border-radius: 9999px;
}
.smb-btn__label {
  padding-inline: 10px;
}

カスタマイズ → 追加CSS、My Snow MonkeyのCSS設定、子テーマの style.css のいずれかに貼り付けるだけでOKです。

まとめ

ピル型ボタンは管理画面またはCSSのどちらでも実現できます。

• 1箇所だけ変えたいなら管理画面
• サイト全体を統一したいならCSS

と使い分けるのがおすすめです。