SWELL ボタンのCSS活用！プラグインまでデザイン統一する全手法

2025-11-27

こんにちは。hakubi code 代表のてらだです。

SWELLを使っていると、「ボタンのデザイン、もうちょっと自分好みにアレンジしたいな」とか「ブランドカラーに合わせて微調整したいけど、カスタマイザーの設定だけじゃ限界がある…」と感じること、ありますよね。

SWELLはノーコードでも素晴らしいサイトが作れる最強のテーマですが、他のサイトと差別化しようとすると、どうしてもCSSによるカスタマイズが必要になる場面が出てきます。特にボタン（CTA）は、読者が次のアクションを起こすための最も重要なパーツ。ここが「標準のまま」か「サイトの世界観に完璧に馴染んでいるか」で、クリック率やコンバージョン率は大きく変わってきます。

標準機能だけでは物足りず、グラデーションを複雑にかけたり、センター寄せの挙動を制御したり、あるいはSnow Monkey Forms やContact Form 7のような外部プラグインのデザインまでSWELL本体と統一したいと考えるのは、サイト運営者として非常に自然な考えです。

この記事では、現役のマークアップエンジニアである私が、SWELLの内部構造を解析した上で、コピペで使えてメンテナンスもしやすいCSSテクニックを徹底解説します。

SWELL標準ボタンの色やグラデーションをCSS変数を使って自在に操る方法
キラッと光るエフェクトやホバー時の動きを調整し、クリック率を高める手順
Contact Form 7などの外部プラグインをSWELLのデザインシステムに統合する技
スマホ表示でのユーザビリティを高め、SEO評価も意識したレスポンシブ対応

SWELLのボタンをCSSでカスタマイズする基本

SWELLのボタンブロックは非常に高機能で、SWELL設定から「ノーマル」「立体」「キラっと」「アウトライン」などのスタイルを選べますが、そこから一歩踏み込んだ「あなただけのデザイン」を作るには、CSSの知識が少しだけ必要になります。

ただ安心してください。難しい設計を一から考える必要はありません。SWELLが元々持っている美しい設計思想（CSS設計）を理解し、その一部を「上書き」するだけで、驚くほど簡単にカスタマイズが可能です。ここでは、SWELLのCSS構造を紐解きながら、コピペで即戦力となるカスタマイズコードを紹介していきます。

おしゃれなグラデーションに変更する

SWELLの標準設定でもグラデーションボタンは作れますが、色の変化する角度や、3色以上の複雑なグラデーションまでは設定できません。「もっとブランドカラーに合わせた繊細なグラデーションにしたい」という場合は、CSSで直接指定するのが正解です。

ここでは、特定のボタンにだけ適用できるクラス .custom-gradient-btn を作成し、SWELLのメインカラーと、あなたが指定した好きな色（ここでは例として水色）を滑らかに切り替えるコードを紹介します。

/* --- カスタムグラデーションボタンの設定 --- */
/* WordPressの「追加CSSクラス」に custom-gradient-btn と入れたボタンに適用 */

.custom-gradient-btn .swell-block-button__link {
    /* 1. ベースのグラデーション（通常時） */
    /* var(--color_main) と、お好みの色（#58d0e5）を混ぜています */
    background: linear-gradient(135deg, var(--color_main, #007cba) 0%, #58d0e5 100%) !important;

    /* 文字色と配置の調整 */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;

    /* 滑らかなアニメーションのための準備 */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* --- 2枚目の背景（ホバー時の色）を ::before で作る --- */
.custom-gradient-btn .swell-block-button__link::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* ホバー時のグラデーション（反転色） */
    background: linear-gradient(135deg, #58d0e5 0%, var(--color_main, #007cba) 100%);

    /* 最初は隠しておく */
    opacity: 0;

    /* 0.5秒かけてふわっと変化 */
    transition: opacity 0.5s ease;

    z-index: -1;
}

/* --- ホバー時の動作 --- */
.custom-gradient-btn .swell-block-button__link:hover {
    /* 本体は動かすだけ */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
}

/* ホバー時に2枚目の背景を表示 */
.custom-gradient-btn .swell-block-button__link:hover::before {
    opacity: 1;
}

使い方の手順

上記のCSSを「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けます。
記事編集画面で、デザインを変えたいSWELLボタンブロックを選択します。
右サイドバーの「高度な設定」＞「追加CSSクラス」に custom-gradient-btn と入力します。

CSSカスタムクラス追加ドキュメント。「追加 CSS クラス」見出し。赤い枠で「custom-gradient-btn」と「s-style-btn_nc」のクラス名がハイライト。下部に「複数クラスを半角スペースで区切ります。」の説明テキスト。WordPressのボタンスタイリング用カスタムCSSクラスの設定例

これで、指定したボタンだけが滑らかなグラデーションボタンに変わります。メインカラーを変更しても自動で追従してくれるので、メンテナンスも楽です。

このようになります！

SWELLのCSS変数を活用したスマートな記述

さきほどのコードでは、CSS変数（var(--color_main)）を活用しました。ここでは、SWELLのテーマ設定で決めた「メインカラー」を変数として取り込みつつ、アクセントカラーと混ぜ合わせる手法をとっています。

CSS変数の活用テクニック
コード内の var(--color_main) は、SWELLのカスタマイザーで設定したメインカラーを自動的に読み込む変数です。これを使ってコードを書いておけば、将来的にサイトのリニューアルでテーマカラーを「青」から「赤」に変更した際、このCSSを修正しなくても自動的にボタンの色が赤系に変わってくれます。メンテナンス性を考えると、直接カラーコード（#000000など）を書くより断然おすすめです。

グラデーションの記述方法については、以下の技術ドキュメントも参考になります。角度や色の分岐点を細かく調整したい方は一度目を通しておくと良いでしょう。

（出典：MDN Web Docs『linear-gradient() – CSS: カスケーディングスタイルシート』）

色やサイズを変更するコード記述

特定のボタンだけ色を変えたい場合、SWELLのエディタ設定でも個別に色は変更可能ですが、何十個もボタンがある場合、いちいち設定するのは手間ですよね。「共通のクラスを作って一括管理したい」というのが効率化の鍵です。

SWELLのボタン構造において、サイズや余白を決定しているのは、外枠のdivではなく、内側の a タグ（リンク要素）です。ここを理解していないと、「widthを指定したのに文字がはみ出した！」といったトラブルが起きます。

widthではなくpaddingでサイズを管理すべき理由

ボタンのサイズを変えるときは、固定幅（width: 300pxなど）を指定するよりも、padding（内側の余白）を調整するほうが、文字数に応じた柔軟で崩れにくいボタンになります。

ボタンの追加CSSクラスにmy-big-btnを入力し、下記のコードをカスタマイザーの追加CSSへ追加してみましょう。

/* 特定のクラス（例：my-big-btn）をつけたボタンの調整 */
.my-big-btn .swell-block-button__link {
    /* 背景色を強制的にオレンジに変更 */
    background: #ff9900;
  
    /* 文字色 */
    color: #ffffff;
  
    /* サイズ調整の肝：上下・左右の余白を広げる */
    padding: 1em 4em;
  
    /* 文字サイズも少し大きく */
    font-size: 1.5em;
  
    /* 丸みを調整 */
    border-radius: 4px;
}

大きさ・色の調整！

CSSが反映されない時の注意点
SWELLの標準スタイルは詳細度（優先順位）が高めに設定されています。もし上記のコードで背景色が変わらない場合は、background: #ff9900 !important; のように !important をつけて強制的に適用させる必要があるケースもあります。ただし、多用は禁物です。

ボタンの形状には心理的な効果もあります。「角丸（border-radius）」が大きいほど「親しみやすさ・安心感」を与え、「角ばっている（border-radius: 0）」ほど「厳格さ・信頼感」を与えます。サイトのトーンに合わせて調整してみてください。

ボタンを中央寄せにする配置設定

「CSSで自作ボタンを作ったのに、なぜか左に寄ってしまう…」という相談、本当によく受けます。これ、CSSの初学者が必ずぶつかる壁なんですよね。

SWELLのボタンブロックは、ボタン本体である a タグの外側を div.swell-block-button というラッパー要素が囲んでいます。配置（左寄せ・中央・右寄せ）は、ボタン自体ではなく、この「親要素（ラッパー）」が制御しています。

Flexboxを使った確実な中央寄せ

もしCSSだけで強制的に中央寄せにしたい場合は、親要素に対してFlexboxを指定するのが現代のCSSにおいて最も確実でスマートな方法です。

/* ボタンを強制的に中央寄せするクラス */
.center-btn-wrapper {
  display: flex;
  
  /* 左右中央揃え */
  justify-content: center;
  
  /* 上下中央揃え（必要に応じて） */
  align-items: center;
}

設定上は左揃えにしたボタンをグループで囲い、そのグループに対してcenter-btn-wrapperというクラス名を付与しました。

設定上は左揃えです。

基本的には、SWELLのエディタ画面でブロックを選択し、ツールバーに出てくる「配置を変更」アイコンから「中央揃え」を選ぶのが一番簡単で安全です。しかし、ショートコードで呼び出したボタンや、自作HTMLで書いたボタンの位置調整には、この display: flex; justify-content: center; の知識が絶対に役立ちます。

特にお問合せフォームプラグインの送信ボタンなどを中央揃えにしたい場合などに応用できますね！

外部機能にSWELLのボタンCSSを適用する

ここからが本題とも言える、少しマニアックですが非常に重要なセクションです。Contact Form 7やSnow Monkey Formsといったお問い合わせフォームプラグインの送信ボタンは、そのままだとブラウザ標準の「いかにもデフォルト」なデザインで表示されがちです。

せっかくSWELLで美しく整えたサイトなのに、一番重要な「送信ボタン」だけデザインが浮いていると、ユーザーは無意識に違和感を覚え、離脱の原因にもなりかねません。これらをSWELL風のデザインシステムに統合し、統一感を持たせるテクニックを公開します。

なお、お問い合わせフォーム自体の選び方や、各プラグインの特徴については、以下の記事でも詳しく解説しているので参考にしてください。

Contact Form 7のデザイン統一

世界中で使われている「Contact Form 7（CF7）」ですが、このプラグインが出力する送信ボタンのHTMLは <input type="submit"> という古い形式のタグです。一方、SWELLのボタンは <a> タグで作られています。

タグが違うため、SWELLのクラスを当ててもデザインが崩れたり、iPhone（iOS）で見ると勝手に丸っこいデザインに変換されたりしてしまいます。これを防ぐには、「リセットCSS」と「SWELL変数の適用」を組み合わせる必要があります。

↓Contact Form 7 の送信ボタン。まさに「デフォルト状態」ですね！

inputタグをSWELLボタンに擬態させる完全なCSS

↓SWELLボタンの「ノーマル」に似せてみました。

/* CF7の送信ボタンをSWELL化するためのセレクタ */
.wpcf7 input.wpcf7-submit {
  /* 【重要】ブラウザやOS（特にiOS）標準のスタイルを強制リセット */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  
  /* SWELL風スタイルを適用 */
  background-color: var(--color_main); /* ここでも変数を使用！ */
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  width: 100%;
  max-width: 200px;
  display: block;
  margin: 2em auto 0;
  padding: 10px 36px;
  border-radius: 80px;
  letter-spacing: 1em;
  text-indent: 1em;
  
  /* 動きの設定 */
  transition: opacity 0.3s, transform 0.2s, box-shadow 0.2s;
}

/* ホバー時の挙動：SWELLの動きを再現 */
.wpcf7 input.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

ポイント：appearance: none; の重要性
-webkit-appearance: none; を記述しないと、特にiPhoneのSafariで見た時に、グラデーションがかかった古いプラスチックのような質感のボタンになってしまいます。フラットなデザインにするためには必須のプロパティです。

ここでも var(--color_main) を使うのが最大のコツです。これで、サイトのテーマカラーをカスタマイザーで変更した時に、問い合わせフォームのボタンだけ色が古いまま取り残される…という「あるある事故」を完全に防げます。

Snow Monkey Formsの見た目調整

「Snow Monkey Forms」は、ブロックエディタで直感的にフォームが作れ、確認画面まで実装できる非常に優れたプラグインです。しかし、確認画面においては「戻るボタン」と「送信ボタン」の2つが並ぶため、デザインのヒエラルキー（階層構造）を意識する必要があります。

UXの鉄則として、「進む（送信）」は目立つ色、「戻る（修正）」は控えめな色にするべきです。両方同じ色だと、ユーザーが誤って「戻る」を押してしまうリスクが高まるからです。

↓これがデフォルト状態のボタンです！

送信ボタンと戻るボタンを明確に区別するCSS

↓SWELLになじみますね！

以下のCSSを使って、送信ボタンを「Primary（主役）」、戻るボタンを「Secondary（脇役・ゴーストボタン）」としてデザインし分けましょう。

/* 1. 送信ボタン（確認画面へ・送信する） */
.smf-button-control__control[type="submit"] {
    background: var(--color_main) !important;
    
    color: #fff !important;
    border-radius: 80px;
    padding: 12px 48px;
    border: none !important;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
		letter-spacing: .2em;
		text-indent: .2em;
    
    /* サイズ感調整 */
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

/* 送信ボタンのホバー時 */
.smf-button-control__control[type="submit"]:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* 2. 戻るボタン（背景透明・枠線あり） */
.smf-button-control__control[data-action="back"] {
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}

/* 戻るボタンのホバー時 */
.smf-button-control__control[data-action="back"]:hover {
    background: #f5f5f5 !important;
}

!important の使用はCSS設計において推奨されませんが、WordPressのプラグインスタイルをテーマ側から上書きする場合に限っては、詳細度の問題を手っ取り早く解決するための「必要悪」として許容されるケースが多いです。ここでは確実にデザインを反映させるために使用しています。

スマホで横幅いっぱいに表示させる

PCでは程よいサイズのボタンでも、スマートフォンの小さな画面で見ると「小さすぎて押しにくい」と感じることがあります。特にコンバージョンに関わるフォームの送信ボタンは、スマホでは「画面幅いっぱい（Full Width）」に広げるのがトレンドであり、ユーザビリティの観点からも推奨されます。

Googleもモバイルフレンドリーテストにおいて「タップターゲットのサイズ」を重要視しています。指でのタップ操作はマウスカーソルほど正確ではないため、ボタンを物理的に大きくすることは誤操作を防ぐ上で非常に重要です。

（出典：Google 検索セントラル『モバイルフレンドリーテストとモバイルユーザビリティレポート』）

メディアクエリを使ったレスポンシブ対応

以下のコードは、画面幅が600px以下（一般的なスマホサイズ）の場合にのみ適用されるスタイルです。

/* スマホ表示（600px以下）の時だけ適用 */
@media (max-width: 600px) {
    .wpcf7 input.wpcf7-submit,
    .smf-button-control__control[type="submit"],
    .smf-button-control__control[data-action="back"] {
        width: 100% !important;
        max-width: none !important;
        display: block;
        padding: 18px 0;
        font-size: 16px;
        margin-left: auto;
        margin-right: auto;
    }
}

このように、PCとスマホでボタンの形状を変えることで、それぞれのデバイスに最適化された操作感を提供できます。これが「レスポンシブデザイン」の真髄ですね。

CSSが効かない・反映されない原因

「記事の通りにコードをコピペして追加CSSに貼ったのに、全くデザインが変わらない！」…これは本当によくあるトラブルです。焦らなくて大丈夫です。原因の9割は以下の3つのどれかです。

原因	解説	対策
詳細度不足	既存のCSSの方が優先順位が高い状態。	セレクタを長くするか、`!important`を試す。
キャッシュ	ブラウザやサーバーに古いデータが残っている。	SWELL設定でキャッシュクリア、スーパーリロード。
記述ミス	HTML構造のアップデートに伴うセレクタ違い全角スペースや閉じ忘れがある。	実際のHTML構造を確認する。全角チェッカーなどで確認。`}`の忘れに注意。

特にSWELLは、サイトの表示速度を上げるために強力なキャッシュ機能を持っています。「SWELL設定」＞「キャッシュ機能」から「コンテンツのキャッシュをクリア」ボタンを押すだけで解決することも多いです。また、Chromeなら Ctrl + Shift + R（Macなら Cmd + Shift + R）でスーパーリロードを行うのも基本中の基本です。

もしどうしても反映されない場合は、以下の記事で「デベロッパーツール」を使った調査方法など、より深いトラブルシューティングを解説しているので、こちらを参考に原因を特定してみてください。