SWELLボタンの色を変更する方法【CSSカスタマイズも】

SWELLボタンの色を変えたいのに、思ったような色にならなかったり、どこで設定すればいいのか分からなかったりして、ちょっとモヤッとしていませんか。

一言でまとめると、SWELLボタンの色は「エディター設定の使い方」と「少しのCSS」と「配色ルール」の3つを押さえれば、デザイン初心者でも十分きれいで押したくなるボタンを作れるようになります。

SWELLボタンの色で迷う前に知っておきたい全体像

SWELLボタンとは？標準ボタンとの違いと役割

SWELLには、テーマ独自の「SWELLボタンブロック」が用意されています。

同じ「ボタン」でも、WordPress標準のボタンと比べると、デザインの自由度や色の管理の仕方がかなり違います。

ざっくり比較すると、次のようなイメージです。

項目	WordPress標準ボタン	SWELLボタンブロック
デザインパターン	シンプルで種類は少なめ	立体・キラッと・アウトラインなど複数
色の管理方法	ボタンごとに個別設定	SWELL設定で色セットを一括管理
丸み・影の設定	最低限の調整	丸み・影・グラデーションを細かく設定可能
クリック計測	標準機能ではなし	ボタンごとにクリック率を計測できる
カスタマイズのしやすさ	CSSの知識がある程度必要	設定画面だけでもかなり作り込める

私の感覚だと、標準ボタンは「素の部品」、SWELLボタンは「最初からある程度デザインされたパーツ」です。

だからこそ、SWELLボタンの色をきちんと整えてあげると、サイト全体の印象が一気にプロっぽく見えるようになります。

SWELLボタンの色設定の基本ルール

SWELLボタンの色は、ざっくり次のようなルールで決まっています。

• テーマのメインカラーとは別に、ボタン用の色をいくつか登録しておく
• ボタンブロックで「どの色セットを使うか」を選ぶ
• グラデーションや影などの効果が、その色セットに紐づいている
• 内部的にはCSS変数（例：--the-btn-colorなど）で色が指定されている

1つ1つのボタンで毎回色を直していくというより、「サイト全体で使うボタンの色パターンを先に決めておいて、その中から選ぶ」という考え方に近いです。

SWELLボタンの色を決める前に押さえたい配色の考え方

ボタンの色は、「なんとなく好きな色」で決めるより、役割ごとに色を決めておくと失敗しにくくなります。

例えば、こんな感じで役割を分けてみてください。

• メインボタン：申し込み・購入・資料請求など、絶対に押してほしいボタン
• サブボタン：詳細を見る・他のプランを見るなど、補足的なアクション
• 注意ボタン：削除・キャンセルなど、注意して押してほしいボタン

それぞれに合わせて、次のような色を当てはめると分かりやすいです。

• メインボタン：ロゴなどのブランドカラーの濃い色
• サブボタン：メインカラーを少し薄くした色、または落ち着いた中間色
• 注意ボタン：赤やオレンジなど、直感的に「注意」と分かる色

私もこの考え方にしてから、「このボタンは結局何をさせたいのか」が自分でもはっきりして、デザインの迷いがかなり減りました。

SWELLボタンの色を変える基本設定（エディター設定）

エディター設定でSWELLボタンの色を変更する手順

SWELLボタンの色は、テーマの管理画面からまとめて設定できます。

管理画面のメニューから「SWELL設定」→「エディター設定」→「ボタン」と進むと、ボタン専用の設定エリアが開きます。

この画面では、主に次のような項目を調整します。

• ボタンカラー（メイン＋プリセットの色）
• 角の丸み（どのくらい丸くするか）
• 影（シャドウ）の有無や強さ
• グラデーションのオン・オフ
• ホバー時（マウスを乗せたとき）の色やアニメーション

まずはここで、サイト全体のボタンの雰囲気をざっくり決めてしまうのがおすすめです。

メインカラー＋3色の設定とおすすめ配色例

SWELLでは、テーマのメインカラーとは別に、ボタン用に複数の色を登録できます。ここにどんな色を設定するかで、SWELLボタンの色の印象がほぼ決まります。

よくある役割分担の例をまとめると、次のような感じです。

色の枠	役割	色の例	使いどころ
メインカラー	最重要のCTA	ブランドカラーの濃い色	購入・申し込みなどのボタン
ボタンカラー1	サブCTA	メインカラーを少し薄くした色	「詳しく見る」「他のプラン」など
ボタンカラー2	補助的なボタン	グレーやネイビーなど落ち着いた色	「戻る」「一覧に戻る」など
ボタンカラー3	注意ボタン	赤・オレンジ系	「削除」「解約」などのボタン

私の場合は、メインカラーをロゴの色に合わせて、その少し薄い色をボタンカラー1、グレー系をボタンカラー2にしておくことが多いです。

こうしておくと、どのページでも「一番大事なボタン」「補足的なボタン」「注意してほしいボタン」がパッと見で判別しやすくなります。

グラデーション・角・影・ホバー色の設定ポイント

ボタンタブでは、色以外にも「立体感」や「雰囲気」を変えるための設定ができます。

代表的な項目と、どう考えればいいかを表にまとめておきます。

項目	何が変わるか	設定の考え方
グラデーション	ボタンの色に明暗の変化がつく	メインCTAだけオンにすると自然に目立ちやすい
角の丸み	角ばったボタンか、丸いボタンかが変わる	やわらかい雰囲気なら丸める、ビジネス寄りなら控えめに
影（シャドウ）	ボタンが浮き上がって見えるかどうか	強すぎる影は安っぽく見えやすいので控えめに
ホバー時の色	マウスを乗せたときの色の変化	通常より少し暗くするか、ほんの少し明るくする程度が無難

特にホバー色は、変化が大きすぎるとチカチカしてしまう一方で、変化がなさすぎると「押せるボタン」だと気付きにくくなってしまいます。

同系色のまま、明るさや濃さをほんの少しだけ変えるくらいが、一番自然で失敗しにくいと感じています。

SWELLボタンの色を4色以上に増やすCSSカスタマイズ

SWELLボタンの色の仕組み（CSS変数 --the-btn-color を理解）

SWELLボタンの色は、CSS変数という仕組みでまとめて管理されています。

代表的なものを挙げると、例えば次のような変数があります。

• --the-btn-color：ボタンの基本となる色
• --the-btn-color2：グラデーションの2色目
• --the-btn-bg：背景として使われる色
• --the-solid-shadow：立体ボタンの影の色

エディター設定でボタンの色を変えると、内部的にはこれらのCSS変数の中身が書き換わります。

裏側の仕組みを一言でまとめると、「共通の変数で色を指定しておいて、ボタンの種類ごとにその変数の値だけ入れ替えている」というイメージです。

つまり、CSSでこの変数を上書きしてあげれば、SWELLボタンの色を自由に増やしたり、ボタンごとに変えたりできる、ということになります。

クラス名を付けて好きな色のボタンを追加する手順

4色以上のボタン色を使いたい場合は、「追加CSSクラス」とCSS変数を組み合わせる方法が分かりやすいです。

手順としては、次の4ステップです。

CSSのイメージは、例えばこんな感じです。

.orange-btn {
  --the-btn-color: #ff9900;
  --the-btn-color2: #ffbd4a;
  --the-btn-bg: var(--the-btn-color);
}

このように書いておくと、「追加CSSクラス」にorange-btnと入力したSWELLボタンだけ、オレンジ系の配色になります。

ポイントは、「SWELLボタンの色を変えるときは、基本的に--the-btn-colorなどのCSS変数をいじる」と覚えておくことです。

ボタン色をパターン化して記事執筆を楽にするコツ

ボタンの色を増やし始めると、「どのページでどの色を使ったか」がだんだん分からなくなってきます。

そこでおすすめなのが、色と役割をセットにして「パターン名」を付けてしまう方法です。

パターン名	役割	色のイメージ
main-cta-btn	一番押してほしいボタン	ブランドカラーの濃い色＋やや強めのグラデーション
sub-cta-btn	サブの案内用ボタン	メインより少し薄めの色＋影は控えめ
info-btn	お知らせ・注意喚起用	黄色やオレンジ系＋文字は濃い色で視認性重視
danger-btn	削除・キャンセルなどの危険操作	赤系＋ホバー時にさらに濃くして注意を促す

このパターン名をそのままCSSクラスとして登録し、SWELLボタンの「追加CSSクラス」に入力して使っていけば、どのページでも同じルールで色を使い回せます。

私もこのやり方にしてから、「なんかこのページだけボタンの雰囲気が違うな」というズレがかなり減りました。

サイト全体でSWELLボタンの色とデザインを統一するコツ

カラーパレットとSWELLボタンの色の関係を理解する

SWELLには、文字色や背景色、ボタンなどで共通して使う「カラーセット（カラーパレット）」の設定があります。

ボタンだけ浮いて見えないようにするには、このカラーパレットとの関係を意識しておくと分かりやすいです。

カラーパレット	主な用途	ボタンとの関係
メインカラー	見出し・リンク・重要な強調	メインのSWELLボタンの色のベースにする
メインカラー淡色	背景や囲み枠など	サブボタンの背景や枠線と相性が良い
テキストカラー	本文の文字色	ボタン内テキストの見やすさに直結する
アクセントカラー	目立たせたいポイント	注意喚起系ボタンの色としても使いやすい

カラーパレットで決めた色を前提に、「このメインカラーをボタンのメイン色にしよう」「アクセントカラーは注意系ボタンに使おう」と決めておくと、自然と全体の統一感が出てきます。

プラグインのボタンもSWELLボタン風に揃えるアイデア

お問い合わせフォームや会員制プラグインなどを入れていると、そのプラグイン専用のボタンが表示されることがあります。

このボタンだけ角丸や色が違うと、どうしてもそこだけ浮いてしまうんですよね。

そんなときは、プラグイン側のボタンに対して、SWELLボタンと同じCSS変数を使って色を上書きしてあげると、きれいに揃えられます。

流れとしては、例えばこんな感じです。

• ブラウザの検証ツールで、プラグインのボタンに付いているクラス名を確認する（例：.submit、.smf-submitなど）
• そのクラスに対して、--the-btn-colorなどのCSS変数を指定する
• 必要に応じて、border-radiusや余白（padding）もSWELLボタンに合わせる

すべてのプラグインで完全に同じ見た目にできるとは限りませんが、「色だけでも揃える」「角丸だけでも合わせる」だけで、かなり統一感が出てきます。

PCとスマホで見やすいボタンサイズと色

ボタンの色を考えるときは、サイズや余白とのバランスもとても大事です。

特にスマホでは、「押しやすさ」と「見やすさ」がそのまま離脱率に影響してきます。

項目	PCで気をつけること	スマホで気をつけること
ボタン幅	必要以上に横長にしない	ある程度幅を広めにしてタップしやすくする
余白（padding）	左右に少し余裕を持たせる	上下の余白も広めにして指で押しやすくする
フォントサイズ	14〜16px前後が目安	やや大きめにして読みやすさ優先
色のコントラスト	背景とボタンをはっきり区別できるようにする	屋外の明るい場所でも読めるコントラストにする

実際に自分のスマホでサイトを開いて、親指で押してみると、「もう少し大きい方がいいな」「背景とボタンの色が近すぎるな」といった気付きが出てきます。

SWELLボタンの色を変えたときは、必ずスマホ表示も確認するクセをつけると安心です。

クリックされるSWELLボタンの色と文言の作り方

目的別にSWELLボタンの色を使い分ける

ページ内のボタンを全部同じ色にしてしまうと、ユーザーは「どれが一番大事なのか」を直感で判断しづらくなります。

目的ごとにSWELLボタンの色を変えてあげると、視線の流れも自然と整います。

目的	おすすめの色	テキスト例
購入・申し込み	ブランドカラーの濃い色	「今すぐ申し込む」「カートに入れる」
無料登録・資料請求	少し明るめで安心感のある色	「無料で資料を受け取る」
お問い合わせ	ブルーやグリーン系	「お問い合わせはこちら」
解約・削除	赤系	「アカウントを削除する」

同じページの中で、「一番押してほしいボタン」と「補足的なボタン」の色を変えるだけでも、クリックされるボタンがかなりはっきりしてきます。

テキスト・アイコン・余白で押しやすさを上げる

ボタンの色だけでなく、中に書くテキストやアイコン、周りの余白もクリック率に影響します。

特にテキストは、「押したらどうなるのか」をきちんと伝えることが大事です。

• 「送信」だけでなく「お問い合わせ内容を送信する」のように、何をするボタンか分かるように書く
• 矢印アイコン（→）やカートアイコンなどを付けて、ボタンの意味を視覚的に補強する
• ボタンの上下に十分な余白を取り、周りのテキストと視覚的に分ける

色だけ変えてもクリックが増えないときは、「ボタンの中身」と「ボタン周りのスペース」を見直してみると、改善のヒントが見つかりやすいです。

効果測定で「なんとなく」から卒業する（クリック率の計測機能）

SWELLのボタンブロックには、ボタンごとのクリック数やクリック率を計測できる機能があります。これを使うと、「どの色とテキストの組み合わせが一番押されているか」を数字で確認できます。

流れとしては、次のようなイメージです。

私も、「お問い合わせ」という味気ないテキストを「無料で相談してみる」に変えただけで、クリック率がはっきり変わったことがあります。

勘だけに頼らず、数字を見ながらSWELLボタンの色やテキストを調整していくと、最終的な成果も出やすくなります。

SWELLボタンの色に関するよくある質問

Q1.SWELLボタンの色が思った通りに変わりません

A. SWELLボタンの色が変わらないときは、次のポイントを順番にチェックしてみてください。

• 「SWELL設定 → エディター設定 → ボタン」で設定した色を保存できているか
• キャッシュ系プラグインやブラウザのキャッシュが残っていないか
• 子テーマや追加CSSで、ボタンの色が上書きされていないか
• クラシックエディターのボタンではなく、SWELLボタンブロックを使っているか

特に、追加CSS側で--the-btn-colorなどを指定していると、エディター設定で変えた色よりも、そちらが優先されることがあります。

Q2.SWELLボタンの色をページごとに変えても大丈夫ですか

A. 技術的には問題ありませんが、基本的には「サイト全体でのルール」を先に決めておいた方が、見た目がまとまりやすいです。

ページごとにSWELLボタンの色がバラバラだと、ユーザーは「どのボタンが一番重要なのか」を直感で判断しづらくなります。

どうしてもページごとに変えたい場合は、例えば次のようなルールを決めておくと迷いにくくなります。

• メインCTAの色は、どのページでも同じにする
• キャンペーン用ボタンは、必ず特定の色（例：ゴールド系）にする
• 注意ボタンは、必ず赤系に統一する

そのうえで、CSSクラスとSWELLボタンの色を紐づけておけば、記事数が増えても管理しやすいです。

Q3.CSSが苦手でもSWELLボタンの色を増やせますか

A. 完全な初心者でも、最低限のコピペができれば、SWELLボタンの色は十分増やせます。

いきなり難しいことをやる必要はなく、次の順番で進めるのがおすすめです。

• まずはエディター設定で、メインカラーとボタン用の色をしっかり作り込む
• どうしても足りない部分だけ、サンプルコードをコピペして使う
• CSSを書く場所は「追加CSS」か「子テーマのstyle.css」のどちらかに統一する

最初からたくさん色を増やそうとせず、「特別な色のボタンを1パターンだけ作る」ところから始めると、挫折しにくいです。

SWELLボタンの色カスタマイズのまとめ

この記事のポイントをまとめておきます

この記事を読み終えたら、まずは「SWELL設定 → エディター設定 → ボタン」を開いて、メインカラーとボタン用の色を役割別に見直してみてください。

そのうえで、1つだけでいいので「特別な色のSWELLボタン」をCSSで追加してみると、サイトの印象も、自分のデザインの感覚もぐっと変わってくるはずです。