SWELLのボタンブロックは、色と角の丸みを「エディター設定」で変えられます。設定にないボタンの形や、マウスを乗せたときの動きは、CSSを足すと変えられます。この記事では、「追加CSS」に貼るだけで使えるボタンのデザインを6種類、実際に動く見本とコピーできるCSSで紹介します。
色はSWELLのボタン設定で選んだ色をそのまま使うため、赤・青・緑の使い分けは変わりません。貼る場所は、WordPressの管理画面の「外観」→「カスタマイズ」→「追加CSS」です。
CSSを貼る場所は「外観」→「カスタマイズ」→「追加CSS」
WordPressの管理画面で「外観」→「カスタマイズ」を開くと、左側にメニューが並びます。いちばん下にある「追加CSS」を押します。
「追加CSS」を開くと、CSSを書く欄が出てきます。すでに何か書いてある場合は消さずに、いちばん下に貼ってください。
貼った内容は右側のプレビューで確かめられます。左上の「公開」ボタンを押すと、サイトを見に来た人の画面にも反映されます。
CSSを貼るときの注意点
ボタンのスタイルと色の設定は変えなくてよい
SWELLのボタンブロックには「ノーマル」「立体」「キラッと」「アウトライン」のスタイルがあり、色と角の丸みは「SWELL設定」→「エディター設定」の「ボタン」タブで決められます（SWELL公式の解説）。
この記事のCSSは、スタイルで付く飾り（キラッと光る動きや、立体の影など）を消してから、新しいデザインを描きます。4つのスタイルのどれを選んでいても、角の丸みの設定がちがっても、見た目は見本と同じになります。
貼るデザインは1つだけ
デザインは1つだけ選んで貼ります。2つ重ねて貼ると、指定がぶつかって見た目が崩れます。
追加CSSに貼ったデザインは、サイトの中のすべてのSWELLボタンに効きます。WordPress標準の「ボタン」ブロックには効きません。
色の変え方
どのCSSも、先頭近くにある次の1か所で色が決まります。
--btn-color: var(--the-btn-color); /* 色を変えるときはここだけ書きかえる */var(--the-btn-color)は、SWELLのボタン設定で決めた色（赤・青・緑のどれを選んだか）のことです。そのままにしておけば、ボタンごとに選んだ色で表示されます。- すべてのボタンを同じ色にしたいときは、
var(--the-btn-color)を#2b7a78のような色の番号に書きかえます。 - 見本のボタンは、SWELLのボタンの色「赤」（moreo note の設定）で表示しています。
SWELLボタンのCSSデザイン6種
どの見本も、この記事の中で実際に動きます。
標準（CSSを足していない状態）
マウスを乗せると動きます（スマートフォンはタップ）
CSSを貼る前の、スタイル「ノーマル」のボタンです。マウスを乗せると、ボタンの下に影が付きます。
1. 矢印付きの角丸ボタン
角を大きく丸め、右はしに矢印を付けたボタンです。マウスを乗せると、矢印が少し右へ動きます。申し込みや次のページへ進むボタンに向いています。
/* ボタン：角丸＋矢印 */
.swell-block-button .swell-block-button__link {
--btn-color: var(--the-btn-color); /* 色を変えるときはここだけ書きかえる */
background: var(--btn-color);
border: none;
border-radius: 999px;
box-shadow: none;
color: #fff;
font-weight: 700;
padding: 0.9em 3em;
overflow: visible; /* スタイル「キラッと」でもボタンの位置がずれないように */
}
/* SWELLのボタンのスタイル（キラッとなど）で付く飾りを消す */
.swell-block-button .swell-block-button__link::before {
content: none;
}
/* 右はしに矢印（＞）を付ける */
.swell-block-button .swell-block-button__link::after {
content: "";
position: absolute;
top: 50%;
left: auto;
right: 1.4em;
width: 0.5em;
height: 0.5em;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
background: none;
opacity: 1;
animation: none;
transform: translateY(-50%) rotate(45deg);
transition: right 0.25s;
}
/* マウスを乗せたとき：矢印が少し右へ動く */
.swell-block-button .swell-block-button__link:hover {
background: var(--btn-color);
box-shadow: none !important;
color: #fff;
transform: none;
}
.swell-block-button .swell-block-button__link:hover::after {
right: 1em;
}2. 枠線のボタン（マウスを乗せると塗りつぶし）
白地に色の枠線を引いたボタンです。マウスを乗せると色で塗りつぶされ、文字が白に変わります。1ページに何個もボタンを置く記事で、目立たせすぎたくないときに向いています。
/* ボタン：枠線（マウスを乗せると塗りつぶし） */
.swell-block-button .swell-block-button__link {
--btn-color: var(--the-btn-color); /* 色を変えるときはここだけ書きかえる */
background: #fff;
border: 2px solid var(--btn-color);
border-radius: 6px;
box-shadow: none;
color: var(--btn-color);
font-weight: 700;
transition: background-color 0.25s, color 0.25s;
overflow: visible; /* スタイル「キラッと」でもボタンの位置がずれないように */
}
/* SWELLのボタンのスタイル（キラッとなど）で付く飾りを消す */
.swell-block-button .swell-block-button__link::before,
.swell-block-button .swell-block-button__link::after {
content: none;
}
/* マウスを乗せたとき：色で塗りつぶし、文字を白に */
.swell-block-button .swell-block-button__link:hover {
background: var(--btn-color);
border-color: var(--btn-color);
box-shadow: none !important;
color: #fff;
transform: none;
}3. グラデーションのボタン
左から右へ、2つの色をグラデーションにしたボタンです。マウスを乗せると、少しだけ明るくなります。
/* ボタン：グラデーション */
.swell-block-button .swell-block-button__link {
--btn-color: var(--the-btn-color); /* 左の色 */
--btn-color2: var(--the-btn-color2); /* 右の色 */
background: linear-gradient(90deg, var(--btn-color), var(--btn-color2));
border: none;
border-radius: 999px;
box-shadow: none;
color: #fff;
font-weight: 700;
transition: opacity 0.25s;
overflow: visible; /* スタイル「キラッと」でもボタンの位置がずれないように */
}
/* SWELLのボタンのスタイル（キラッとなど）で付く飾りを消す */
.swell-block-button .swell-block-button__link::before,
.swell-block-button .swell-block-button__link::after {
content: none;
}
/* マウスを乗せたとき：少しだけ明るくする */
.swell-block-button .swell-block-button__link:hover {
background: linear-gradient(90deg, var(--btn-color), var(--btn-color2));
box-shadow: none !important;
color: #fff;
opacity: 0.85;
transform: none;
}右の色は var(--the-btn-color2) で、SWELLがボタンの色ごとに用意している2つ目の色です。好きな色にしたいときは、ここも色の番号に書きかえます。
4. 影で浮いて見えるボタン
ボタンの下に、同じ色のぼかした影を付けたボタンです。マウスを乗せると少し持ち上がり、影が広がります。
/* ボタン：ふんわり浮く影 */
.swell-block-button .swell-block-button__link {
--btn-color: var(--the-btn-color); /* 色を変えるときはここだけ書きかえる */
background: var(--btn-color);
border: none;
border-radius: 10px;
box-shadow: 0 6px 16px color-mix(in srgb, var(--btn-color) 40%, transparent);
color: #fff;
font-weight: 700;
transition: transform 0.25s, box-shadow 0.25s;
overflow: visible; /* スタイル「キラッと」でもボタンの位置がずれないように */
}
/* SWELLのボタンのスタイル（キラッとなど）で付く飾りを消す */
.swell-block-button .swell-block-button__link::before,
.swell-block-button .swell-block-button__link::after {
content: none;
}
/* マウスを乗せたとき：少し持ち上がり、影が広がる */
.swell-block-button .swell-block-button__link:hover {
background: var(--btn-color);
box-shadow: 0 10px 24px color-mix(in srgb, var(--btn-color) 45%, transparent) !important;
color: #fff;
transform: translateY(-3px);
}5. 影をずらしたボタン
白地のボタンをボタンの色の枠線で囲み、右下にうすい色の影をずらして付けたボタンです。マウスを乗せると影の位置へ沈み、背景にうすく色が付きます。
/* ボタン：ずらした影 */
.swell-block-button .swell-block-button__link {
--btn-color: var(--the-btn-color); /* 色を変えるときはここだけ書きかえる */
background: #fff;
border: 2px solid var(--btn-color);
border-radius: 6px;
box-shadow: 5px 5px 0 color-mix(in srgb, var(--btn-color) 45%, #fff); /* 影はボタンの色をうすくした色 */
color: var(--btn-color);
font-weight: 700;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
overflow: visible; /* スタイル「キラッと」でもボタンの位置がずれないように */
}
/* SWELLのボタンのスタイル（キラッとなど）で付く飾りを消す */
.swell-block-button .swell-block-button__link::before,
.swell-block-button .swell-block-button__link::after {
content: none;
}
/* マウスを乗せたとき：影の位置へ沈み、背景にうすく色が付く */
.swell-block-button .swell-block-button__link:hover {
background: color-mix(in srgb, var(--btn-color) 10%, #fff);
border-color: var(--btn-color);
box-shadow: 0 0 0 transparent !important;
color: var(--btn-color) !important; /* スタイル「アウトライン」でも文字を白にしない */
transform: translate(5px, 5px);
}6. 押し込み式のボタン
ボタンの下に、濃い色の段差を付けたボタンです。マウスを乗せると段差の分だけ沈み、押したような動きになります。
/* ボタン：押し込み式（下に段差） */
.swell-block-button .swell-block-button__link {
--btn-color: var(--the-btn-color); /* 色を変えるときはここだけ書きかえる */
background: var(--btn-color);
border: none;
border-radius: 8px;
box-shadow: 0 5px 0 color-mix(in srgb, var(--btn-color) 70%, #000);
color: #fff;
font-weight: 700;
transition: transform 0.15s, box-shadow 0.15s;
overflow: visible; /* スタイル「キラッと」でもボタンの位置がずれないように */
}
/* SWELLのボタンのスタイル（キラッとなど）で付く飾りを消す */
.swell-block-button .swell-block-button__link::before,
.swell-block-button .swell-block-button__link::after {
content: none;
}
/* マウスを乗せたとき：段差の分だけ沈む */
.swell-block-button .swell-block-button__link:hover {
background: var(--btn-color);
box-shadow: 0 0 0 transparent !important;
color: #fff;
transform: translateY(5px);
}CSSが反映されないときの確認方法
貼ったのに見た目が変わらないときは、次の順に確かめてください。
| 確かめること | どうするか |
|---|---|
| 「公開」を押したか | 追加CSSの画面で、左上のボタンが「公開済み」になっているか見る |
| SWELLのボタンブロックか | WordPress標準の「ボタン」ブロックではないか、ブロックの名前を見る |
| 古い表示が残っていないか（キャッシュ） | ブラウザで再読み込みし、キャッシュのプラグインがあればその画面でキャッシュを消す |
| ほかのCSSとぶつかっていないか | デザインを2つ貼っていないか、前に貼ったボタンのCSSが残っていないか見る |
まとめ
SWELLのボタンは、「追加CSS」にCSSを貼って「公開」を押すと、サイト全体でデザインが変わります。ボタンのスタイルや色の設定は、変えなくても見本と同じ見た目になります。
- デザインは1つだけ選んで貼る
- 色はSWELLのボタン設定の色を使う。固定したいときは先頭の
--btn-colorを書きかえる - 反映されないときは「公開」・ブロックの種類・キャッシュ・ほかのCSSの順に確かめる
見出しのデザインも変えたいときは、SWELLの見出しをカスタマイズする方法に同じ形でCSSをまとめています。まずは右側のプレビューで2〜3種類を貼りかえて見比べ、サイトに合うものが決まったら「公開」を押してください。
よくある質問
Q. 元の見た目に戻すにはどうしますか
追加CSSから、貼ったCSSを消して「公開」を押します。SWELLのボタンのスタイルで選んでいる見た目に戻ります。
Q. CSSに !important が付いているのはなぜですか
SWELLのスタイル「立体」は、マウスを乗せたときの影を、ほかの指定より優先させる印（!important）付きで消しています。そのままだと、この記事のデザインの影も消えてしまうため、影の指定にも !important を付けています。消すとスタイルによって見た目が変わるので、そのまま貼ってください。
Q. CSSの先頭で飾りを消しているのはなぜですか
SWELLのスタイル「キラッと」は、::before と ::after（ボタンの前後に付ける飾り）で光る動きを描いています。この記事のCSSは content: none; でその飾りを消してから、新しいデザインを描きます。ボタンのスタイルに左右されないのはそのためです。
AI活用とホームページ制作のご相談
「自分でやるのは難しそう」「まずは相談だけしたい」——どちらでも大丈夫です。
AI活用の進め方から、ホームページ制作・WordPress構築まで、まとめてご相談いただけます。
