SWELLでブログを書いていて、「ボタンの見た目がちょっと物足りない」「ほかのSWELLサイトと同じに見えてしまう」と感じていませんか。
この記事では、そのモヤモヤを解消しつつ、デザインとクリック率の両方をじわっと底上げできるボタンのカスタマイズ方法を、SWELLユーザー向けに分かりやすくまとめていきます。
一言でいうと、SWELLのボタンは「テーマ設定＋少しのCSS」を足すだけで、かなり見栄えが良くなり、行動してもらいやすい導線に変わります。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLボタンをカスタマイズすると何が変わる？この記事のゴール
まずは、SWELLのボタンで何ができるのか、そしてどこまでカスタマイズすると効果が出やすいのかをざっくり整理しておきます。全体のゴールを先に共有しておくと、このあと自分がどこまで手を入れるか決めやすくなります。
SWELLボタンの基本機能とメリット
SWELLには専用の「ボタンブロック」が用意されていて、装飾済みのボタンをポンっと挿入できます。難しいHTMLを書かなくても、ブロックエディターだけでかなりきれいなボタンが作れるのが大きなメリットです。
| 項目 | 内容 | こんなときに便利 |
|---|---|---|
| デザイン済みボタン | 色・角の丸み・影などがあらかじめ調整されたボタンを使える | CTAボタンやアフィリエイトリンク用のボタンをサクッと作りたいとき |
| アイコン追加 | テキストの前後に小さなアイコンを入れられる | 資料ダウンロードやメール送信など、ぱっと見で内容を伝えたいとき |
| リンク設定 | 通常のURLはもちろん、ASPで発行されたリンク先URLも設定できる | 商品ページや申込フォームへスムーズに誘導したいとき |
| 幅・配置の調整 | ボタン幅や中央寄せ・右寄せなどの配置をワンクリックで変更できる | スマホ表示も意識して、押しやすい位置にボタンを置きたいとき |
| 共通デザイン | テーマ側の設定から、ボタン全体の色や丸みの雰囲気をそろえられる | サイト全体で統一感のある世界観をつくりたいとき |
ざっくりまとめると、SWELLのボタンをきちんと整えておくと、次のような良いことがあります。
- サイト全体の印象が「ちゃんと作られたブログ」に近づく
- 読んでほしいページややってほしい行動に、目線を誘導しやすくなる
- 同じSWELLを使っているサイトとも、雰囲気で差をつけやすくなる
どんな人にSWELLボタンのカスタマイズがおすすめか
個人的に、「このあたりに当てはまる人はボタンを整える優先度が高いな」と感じています。
- アフィリエイト案件やサービス紹介など、クリックしてほしい導線が多い
- デザインは得意じゃないけれど、雰囲気はちょっとおしゃれにしたい
- CSSを一から書くのは不安だけど、コピペして少し直すくらいならできそう
逆に、「まずは記事数を増やすのが最優先」という段階なら、細かい装飾は無理にやらなくても大丈夫です。この記事は、次のステップとして「そろそろ見た目も整えたいな」というタイミングで、何度か読み返してもらうイメージで書いています。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
【基本編】SWELLボタンのカスタマイズ前に知っておきたいこと
ここから本格的にボタンをいじっていきますが、その前に軽く準備をしておくと安心です。いきなりCSSを書き始めると、「元に戻せない…」という怖さが出てくるので、まずは土台を整えましょう。
カスタマイズ前にバックアップしておきたいもの
ボタンに限らず、デザインを触るときは「あとから戻せる状態」を作っておくのが大事です。最低限、次の3つだけでもやっておくと気持ちが楽になります。
- 今のデザインを、PCとスマホそれぞれスクリーンショットしておく
- 可能であれば、SWELLやテーマ設定の状態をエクスポートしておく
- すでに追加CSSを書いている場合は、全文をメモアプリなどにコピーしておく
特に追加CSSは、「ちょっと書き足しただけ」のつもりで増えていきがちです。SWELLボタンをカスタマイズする前に一度コピーしておくと、いつでも元の状態に戻せるので安心感が違います。
子テーマと追加CSS、どちらに書くのがおすすめ？
ボタン用のCSSを書く場所としては、おおきく次の2パターンがあります。
- 外観 → カスタマイズ → 追加CSS
- 子テーマのstyle.css
ざっくり比較すると、こんなイメージです。
| 書く場所 | 特徴 | 向いているケース |
|---|---|---|
| 追加CSS | 管理画面からすぐ編集でき、反映も確認しやすい | まずはボタンだけ少し変えてみたい人、CSSにあまり慣れていない人 |
| 子テーマのstyle.css | ファイルとして管理できるので、大きめのカスタマイズに向いている | サイト全体のCSSを整理したい人、中〜上級者の人 |
私のおすすめは、「最初は追加CSSで試して、気に入ったカスタマイズだけあとで子テーマに移す」という流れです。こうしておくと、Swellでボタンをカスタマイズしながらも、いらなくなったCSSを片付けやすくなります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
【設定編】テーマ機能だけでできるSwellボタンのカスタマイズ
ここからは、CSSを触らずにできる範囲のカスタマイズを見ていきます。テーマの設定だけでも、ボタンの雰囲気はかなり変わるので、「まずはここから」が気楽でおすすめです。
SWELL設定からボタンの色・丸み・影を変える手順
SWELLでは、「エディター設定」などの画面からボタンの基本デザインをまとめて変更できます。細かい位置はテーマのバージョンによって少し違いますが、よく触る項目と意味を一覧にするとこんな感じです。
| 設定項目 | 何が変わるか | 考え方の例 |
|---|---|---|
| ボタンカラー | 背景色・文字色・ボーダーなど、ボタン全体の色 | ロゴやメインカラーと合わせると、サイト全体に統一感が出る |
| 角の丸み | 四角・少しだけ丸い・しっかり丸い、などの形 | やわらかい印象にしたいなら丸める、かっちり見せたいなら角を残す |
| 影（シャドウ） | ボタンが浮き上がって見えるかどうか | 目立たせたいCTAには影あり、シンプルにしたい箇所は影なしにする |
| ホバー時の色 | カーソルを乗せたときの色の変化 | 通常より少し暗くするか、ほんの少し明るくする程度がバランス良い |
ボタンの色を決めるときは、「サイト全体で何色まで使うか」を決めておくと迷いづらくなります。
- メインカラー：ボタンやリンク、強調したい部分に使う色
- サブカラー：注意書きや補足に使う色
この2〜3色を基準にしておけば、「なんとなくおしゃれな配色」にまとまりやすくなります。
ボタンサイズ・配置・ラベル文言の調整
ボタンは、サイズや配置だけでもかなり印象が変わります。SWELLのボタンブロックでは、よく次のようなパターンが使われます。
- 画面幅いっぱいに広げた、大きく目立つボタン
- 段落の下に置く、中央寄せの標準ボタン
- 本文の横にさりげなく置く、控えめなボタン
イメージとしては、次のように使い分けると分かりやすいです。
- 資料請求や無料相談など「本命の行動」→ 幅いっぱい＋サイズ大きめ
- 関連記事や内部リンク → 標準サイズ＋中央寄せ
ラベル（ボタンの文字）も、SWELLでボタンをカスタマイズするうえで重要なポイントです。
- 「詳しくはこちら」ではなく「〇〇の詳しい内容を見る」
- 「申し込む」ではなく「無料で〇〇に申し込む」
このように、「押したあとどうなるか」が一瞬で伝わる文にすると、クリックされやすくなります。
目的別おすすめボタンデザインパターン
テーマ設定だけでも、目的ごとにボタンの雰囲気を変えることができます。ざっくりですが、こんな方向性で考えると整えやすいです。
| 目的 | 配色・形のイメージ | 具体例 |
|---|---|---|
| アフィリエイトの申込ボタン | 明るめのメインカラー＋少し丸い角＋うっすら影 | オレンジやグリーン系で「今すぐ試してみる」といった文言 |
| お問い合わせ・相談ボタン | 落ち着いた色＋角をやや丸める＋影は控えめ | ネイビーやグレー系で「まずは相談してみる（無料）」など |
| 無料ダウンロード・資料請求 | メインカラー＋ホバー時に少し濃くなる | ブランドカラーのボタンで「資料をダウンロードする」など |
| 記事の続きを読む・内部リンク | 枠線のみのシンプルなボタン | 白背景にボーダーだけで「関連記事を読む」など |
このくらいの粒度で「自分のブログのルール」を決めておくと、その後のカスタマイズでも迷いにくくなります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
【実践編】記事内でのSWELLボタン活用とカスタマイズ例
ここからは、実際に記事の中でボタンをどう使うかを具体的に見ていきます。ブロックエディターの基本操作さえ分かっていれば、そんなに難しい作業ではありません。
ブロックエディターでSWELLボタンを挿入する手順
SWELLボタンブロックを使った、基本的な挿入の流れはこんな感じです。
| 手順 | 操作内容 | ポイント |
|---|---|---|
| 1 | プラスボタンから「SWELLボタン」ブロックを選ぶ | よく使うなら「よく使うブロック」に登録しておくと探す手間が減る |
| 2 | ボタンに表示したいテキストを入力する | 一目で内容が分かる短めの文章を意識する |
| 3 | 右側の設定パネルからリンク先URLを入力する | 新しいタブで開くかどうかもここで選べる |
| 4 | 必要に応じて、色・角の丸み・影などのスタイルを切り替える | サイト全体のルールから大きく外れないように調整する |
| 5 | スマホプレビューでボタンの見え方を確認する | テキストが長すぎて不自然な改行になっていないかチェックする |
最初のうちは「どこにボタンがあるんだっけ？」と探しがちですが、何度か挿入しているうちに、見出しを読むような感覚で自然と配置できるようになります。
クリックされるボタン文言の書き方
【稼げるキーワード教えます】
▼ ▼ ▼
意外と効果が大きいのが、ボタンに書くテキストです。デザインを変える前に、まずは文言を見直すだけでもクリック率が変わることがあります。
| よくある文言 | 少し直した文言 | 意識したいポイント |
|---|---|---|
| 詳しくはこちら | サービスの内容を詳しく見る | 「何について詳しく見るのか」をハッキリさせる |
| 資料ダウンロード | 〇〇の資料を無料ダウンロードする | 無料であることと、資料の中身をイメージさせる |
| お問い合わせ | 〇〇について相談してみる | どんな相談ができるのかを想像してもらう |
| 登録する | メールアドレスだけで登録する | 「大変そう」という不安を、手軽さの一言でやわらげる |
ボタンのテキストを書くときは、次の2つを意識すると書きやすくなります。
- このボタンを押すと、読者にどんなメリットがあるか
- 押したあと、どんな画面や状態に変わるのか
この2点を一言で表現できると、「とりあえず押してみようかな」と思ってもらいやすくなります。
CTA・アフィリエイト・内部リンクでの使い分け
同じSWELLのボタンでも、置く場所によって役割が変わります。ざっくり分けると、次の3つです。
- お問い合わせや申込などのCTAボタン
- アフィリエイトリンクのボタン
- 関連記事やプロフィールなどへの内部リンクボタン
それぞれ、次のようにデザインを変えるとメリハリが出ます。
- CTAボタン → 1記事につき1〜2個に絞り、色もサイズも一番目立たせる
- アフィリエイトボタン → サイトのメインカラーに寄せ、広告感を出しすぎない
- 内部リンクボタン → 枠線タイプなど控えめなデザインにして、本文となじませる
私も昔、アフィリエイトボタンだけ派手な色にしていたことがありましたが、かえって広告っぽさが強くなってしまい、離脱が増えた経験があります。ボタンをカスタマイズするときは、「押してほしい順番」に合わせて目立ち方を変える、と考えるとバランスが取りやすいです。
【CSS編】一歩進んだSWELLボタンのカスタマイズテクニック
ここからは、CSSでボタンの見た目をもう一歩だけおしゃれにする方法を紹介します。難しいコードは書かないので、「コピペしてちょっと直す」くらいの気持ちで読み進めてもらえればOKです。
まず覚えたいSWELLボタンのCSSセレクタ
ボタンをCSSでカスタマイズするときは、「どのボタンに効かせるか」を指定する必要があります。サイトによって細かいクラス名は違いますが、イメージとしては次のような形で指定することが多いです。
- 通常のボタン全体に当てたい場合：ボタンブロックに付いているクラス名（例：.c-btn など）を指定する
- アウトラインボタンだけ変えたい場合：アウトライン用のクラス名を確認して、そのクラスに対してCSSを書く
- 記事一覧の「もっと見る」ボタンだけ変えたい場合：MOREボタン専用のクラスを検証ツールで探して指定する
- フォームの送信ボタンを整えたい場合：プラグイン（Contact Form 7など）のクラス（例：.wpcf7-submit）に対してCSSを書く
クラス名はテーマのバージョンやプラグインごとに違うので、「右クリック → 検証」で実際のHTMLを確認してから書くのがおすすめです。
コピペで試せるデザインアレンジ3パターン
ここでは、ボタンのデザインを変えるときによく使う方向性を3パターン紹介します。実際にCSSを書くときも、この3つのうちどれに寄せるかを決めてから手を動かすと迷いにくいです。
| パターン | 見た目のイメージ | 向いている場所 |
|---|---|---|
| フラットボタン | 影なし・角は少し丸める・ベタ塗りの単色 | 情報発信系ブログの内部リンクや、シンプルなナビゲーション |
| 立体ボタン | うっすら影を付け、ホバー時に少しだけ浮き上がる | アフィリエイト商品や、申込などのメインCTAボタン |
| グラデーションボタン | 2色のやわらかいグラデーション＋ホバー時に色の向きが変わる | ランディングページ的な記事のメインボタンなど、ここぞという場面 |
立体ボタンにしたいときは、box-shadowで下方向にうっすら影を付けて、ホバー時に少しだけ上に動かすと「押せそう感」が出ます。グラデーションボタンは派手にしすぎると古い印象になりやすいので、淡い2色で控えめに使うと、今っぽい雰囲気になります。
MOREボタンやフォーム送信ボタンも統一する
意外と見落とされがちなのが、「MOREボタン」と「フォームの送信ボタン」です。ここだけ初期設定のままだと、せっかく整えたボタンデザインから浮いてしまいます。
- 記事一覧の「もっと見る」ボタン
- お問い合わせフォーム・資料請求フォームの送信ボタン
これらも、先ほどのクラス指定を使って、次のようなポイントをそろえておくと統一感が出ます。
- 背景色と文字色を、メインのボタンと同じ系統にする
- 角の丸みや影の有無も、基本のボタンに合わせる
- 文字サイズやフォントをそろえて、「同じサイトのボタン」に見せる
私のサイトでも、しばらくMOREボタンだけ初期のままだったのですが、他のボタンとトーンをそろえただけで、「まだ続きがあるんだ」と自然に気づいてもらえるようになりました。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
【改善編】クリック率を上げるSWELLボタンのカスタマイズの考え方
ここからは、見た目だけでなく「どれくらい押されているか」という視点でボタンを整えていく話です。難しい分析はしなくて大丈夫ですが、ざっくり数字を意識するだけでも改善のヒントが見つかります。
目線の流れを意識したボタン配置
読者の目線は、おおまかに「タイトル → アイキャッチ → 冒頭文 → 見出し → まとめ」と流れていきます。ボタンを置く位置を決めるときは、この流れのどこで押してもらいたいかを意識すると配置しやすくなります。
- 重要なCTAがある場合は、ファーストビュー付近に1つだけ置く
- サービスの説明やメリットを書いた直後にボタンを置く
- 記事の最後のまとめの下に、もう一度ボタンを置く
あちこちにボタンを並べると、読者は「結局どれを押せばいいの？」と迷ってしまいます。1記事につき「本命のボタンは1〜2個まで」と決めてしまうのも、分かりやすくておすすめです。
ボタンのクリック状況を見ながら少しずつ改善する
ボタンの効果を高めたいときは、「なんとなく」ではなく、簡単でいいので数字をちらっと見る習慣をつけると役に立ちます。アクセス解析ツールやリンク計測用のプラグインなどを使う場合、次のようなポイントを意識してみてください。
- ボタンのクリック数：ほとんど押されていないなら、配置や文言を見直す
- スクロールの深さ：読まれていない位置にボタンを置いていないか確認する
- デバイス別の反応：スマホだけクリックが少なければ、サイズや余白を見直す
- テキスト別の違い：ボタンの文言を変えてみて、反応が良いほうを採用する
私の感覚では、ボタンの色を少し変えるよりも、「置く位置」と「テキスト」を変えたほうが数字は動きやすいです。大がかりなA/Bテストをしなくても、1か所ずつ変えて様子を見るだけでも十分です。
ボタンが増えすぎたときの整理のコツ
記事数が増えてくると、「気づけばボタンだらけ」という状態になりがちです。そんなときは、次のルールで一度整理してみてください。
- まず「一番押してほしいボタン」を1つだけ決める
- それ以外のボタンは、色を控えめにするかテキストリンクに変える
- 同じページ内で、役割がほぼ同じボタンを複数置かない
例えば、「無料相談」と「資料ダウンロード」の2つのボタンが並んでいる場合、本命はどちらなのかを決めて、もう一方は本文中のリンクにする、という整理の仕方もあります。ボタンのカスタマイズは「足す」だけでなく、「減らす・そろえる」ことも大事だと覚えておくと、判断しやすくなります。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問｜SWELLボタンのカスタマイズで悩みがちなポイント
最後に、ボタンのカスタマイズについてよく聞かれる疑問を、Q&A形式でまとめます。
Q1. CSSが分からなくても、SWELLのボタンをカスタマイズできますか？
A1. できます。SWELLには、テーマ設定だけでボタンの色や角の丸みを変えられる機能が用意されています。最初は「色・角・影」の3つだけ整えて、そのあとで少しずつCSSを足していけば大丈夫です。
Q2. ボタンをカスタマイズすると、サイトが重くなったりしませんか？
A2. 一般的なCSSレベルのカスタマイズであれば、表示速度への影響はほとんど気にしなくて大丈夫です。ただし、アニメーションを多用したり、大きな画像をボタンに使ったりすると、読み込みが重くなることがあります。基本的には、シンプルなCSSで調整するのがおすすめです。
Q3. スマホ表示でボタンのレイアウトが崩れてしまいます。何をチェックすればいいですか？
A3. スマホでのボタン表示が崩れるときは、次の3点をチェックしてみてください。
- ボタンのテキストが長すぎて、何行にも分かれていないか
- 左右の余白が狭すぎて、指で押しにくくなっていないか
- 独自CSSで幅（width）や余白（padding）を固定値にしていないか
特に、pxで幅をガチっと固定していると、スマホ幅ではみ出したり、極端に小さくなったりしやすくなります。可能であれば、幅はautoや100%を使い、余白も少しゆとりを持たせておくと安心です。
まとめ｜今日からSWELLボタンをカスタマイズしてみよう
ここまでの内容を整理します
- SWELLのボタンは、テーマ設定だけでも「色・角・影」を整えることで印象が大きく変わる
- ボタンのテキストは、「押したあとのメリット」が一目で分かるように書き換えるとクリックされやすい
- CSSを使うときは、どのボタンに効かせるか（セレクタ）を確認し、フラット・立体・グラデーションなど方向性を決めてから追加する
- ボタンの数を増やしすぎず、本命となるボタンを1〜2個に絞ると、読者の迷いが減る
- アクセス解析などで数字を軽くチェックしながら、配置やテキストを少しずつ調整していくと、ムリなく改善を続けやすい
今日からできる最初の一歩としては、まず自分のブログを開き、今のボタンの色・形・テキストをスクリーンショットしてみてください。そのうえでSWELLの設定画面を開き、ボタンの色と角の丸みを「自分のサイトらしい雰囲気」に1回だけ調整してみるのがおすすめです。
それだけでも、サイト全体の印象は少し変わります。「もっと整えたいな」と感じたら、この記事のCSSのパートを開きながら、少しずつボタンのカスタマイズを足していきましょう。無理のないペースで続けていくだけでも、あなたのブログの見た目と成果は、じわじわと育っていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
