SWELLの見出しをカスタマイズ｜見出し2・3の貼るだけCSS10種

2026年10月12日2026年10月14日

SWELLの見出しは、CSSを「追加CSS」に貼るだけでデザインを変えられます。見出し2を6種・見出し3を4種、合わせて10種類のデザインを、実際の表示画像とそのまま使えるCSSで並べました。SWELLの見出し設定（帯・左線・ストライプなど）が何になっていても、CSSを貼ると画像と同じ見た目になります。

貼る場所は、WordPressの管理画面の「外観」→「カスタマイズ」→「追加CSS」です。気に入ったデザインを見出し2と見出し3から1つずつ選び、CSSをコピーして貼ってください。

CSSを貼る場所は「外観」→「カスタマイズ」→「追加CSS」

WordPressの管理画面で「外観」→「カスタマイズ」を開くと、左側にメニューが並びます。いちばん下にある「追加CSS」を押します。

「外観」→「カスタマイズ」を開くと、メニューのいちばん下に「追加CSS」があります

「追加CSS」を開くと、CSSを書く欄が出てきます。すでに何か書いてある場合は消さずに、いちばん下に貼ってください。

貼った内容は右側のプレビューで確かめられます。左上の「公開」ボタンを押すと、サイトを見に来た人の画面にも反映されます。

貼る前に知っておきたい3つのこと

SWELLの見出し設定はそのままでよい

SWELLには、CSSを書かずに見出しのデザインを選べる設定があります。「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」で、見出し2〜4のデザインを選べます（SWELL公式の解説）。

この記事のCSSは、その設定で付いた飾りを消してから、新しいデザインを描きます。設定を変えなくても、画像と同じ見た目になります。見出し設定がちがうSWELLのサイト6件から見出しの指定を取り出し、10種類すべてで見た目が変わらないことを確かめました。

見出し2・見出し3から1つずつ貼る

見出し2から1つ、見出し3から1つを選んで貼ります。同じ見出しのデザインを2つ重ねて貼ると、指定がぶつかって見た目が崩れます。

追加CSSに貼ったデザインは、サイトの中のすべての記事と固定ページの見出しに効きます。記事の本文は変わりません。

色の変え方

どのCSSも、先頭近くにある次の1か所で色が決まります。

  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */

var(--color_main) は、SWELLのカスタマイザーで決めた「メインカラー」のことです。そのままにしておけば、サイトの色に合わせて変わります。
好きな色にしたいときは、var(--color_main) を #2b7a78 のような色の番号に書きかえます。
見出し3のCSSでは、同じ場所が --h3-color という名前になっています。

SWELLの見出し2のデザイン6種

画像は、短い見出しと、2行になる長い見出しを並べて撮っています。

標準（CSSを足していない状態）

SWELLの見出し：CSSを足していない状態（見出し2は「帯」の設定） — CSSを足していない状態（moreo note の設定。見出し2＝帯）

比べるための、CSSを貼る前の見た目です。見出し2は塗りつぶしの帯に上下の線、見出し3は下線の左側だけ色が付く設定です。

1. 下線（左だけ色）

見出しの下に灰色の線を引き、左はしだけ色を付けます。背景がないので、文章になじむ控えめな見た目です。

/* 見出し2：下線（左だけ色） */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: none;
  border: none;
  border-bottom: 3px solid #e6e6e6;
  border-radius: 0;
  color: inherit;
  margin-left: 0; /* 文字の左はしを本文とそろえる */
  margin-right: 0;
  padding: 0 0 0.5em;
}
/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

/* 下線の左はしだけ色を付ける */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 4em;
  height: 3px;
  background: var(--h2-color);
}

2. 吹き出し

色の付いた角丸の帯に、下向きの三角を付けます。見出しから本文へ、目線が自然に下りていきます。

/* 見出し2：吹き出し */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: var(--h2-color);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 0.75em 1em;
}
/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

/* 下に三角のしっぽを付ける */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.5em;
  border: 10px solid transparent;
  border-top-color: var(--h2-color);
}

3. 左に線＋うすい背景

SWELLの見出し2：左に太い線を引き、うすい色の背景をしいたデザイン — 左に線＋うすい背景

左に太い線を引き、うすい色の背景をしきます。濃い色の帯より落ち着いた見た目です。SWELLの見出し設定にも似た形がありますが、CSSなら線の太さや背景の濃さを数字で変えられます。

/* 見出し2：左に線＋うすい背景 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: color-mix(in srgb, var(--h2-color) 10%, #fff);
  border: none;
  border-left: 6px solid var(--h2-color);
  border-radius: 0 6px 6px 0;
  color: inherit;
  padding: 0.7em 1em;
}

/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

4. カギ括弧

SWELLの見出し2：左上と右下にカギ括弧の形の線を付けたデザイン — カギ括弧

見出しの左上と右下に、カギ括弧の形の線を付けます。背景がないので、文章になじみながら見出しの区切りが分かります。

/* 見出し2：カギ括弧 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  margin-left: 0; /* 文字の左はしを本文とそろえる */
  margin-right: 0;
  padding: 0.6em 1em;
}

/* 左上と右下に、カギ括弧の形の線を引く */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border: none;
  box-sizing: border-box;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  top: 0;
  left: 0;
  border-top: 3px solid var(--h2-color);
  border-left: 3px solid var(--h2-color);
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  right: 0;
  bottom: 0;
  border-right: 3px solid var(--h2-color);
  border-bottom: 3px solid var(--h2-color);
}

5. 中央寄せ＋両側に線

SWELLの見出し2：文字を中央に置き、両側に線を引いたデザイン — 中央寄せ＋両側に線

見出しを中央に置き、左右に線を引きます。見出しが長いと線が短くなるので、短い見出しが多いサイトに向いています。

/* 見出し2：中央寄せ＋両側に線 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  margin-left: 0; /* 文字の左はしを本文とそろえる */
  margin-right: 0;
  padding: 0;
  text-align: center;
}

/* 文字の左右に線を引く */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: "";
  position: static;
  flex: 1 0 1.5em;
  height: 2px;
  border: none;
  background: var(--h2-color);
}

6. ステッチ（点線の縫い目）

SWELLの見出し2：帯の内側に白い点線を付けたデザイン — ステッチ（点線の縫い目）

色の帯の内側に、白い点線を付けます。布を縫ったような、手づくり感のある見た目です。

/* 見出し2：ステッチ（点線の縫い目） */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h2-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: var(--h2-color);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 0.9em 1.2em;
  outline: 2px dashed rgba(255, 255, 255, 0.75); /* 内側の点線 */
  outline-offset: -7px;
}
/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

SWELLの見出し3のデザイン4種

見出し2のデザインと組み合わせて使えます。画像は見出し3と、その下の本文だけを撮っています。

1. 左に線

文字の左に太い線を引きます。どの見出し2とも合わせやすい形です。

/* 見出し3：左に線 */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h3-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: none;
  border: none;
  border-left: 5px solid var(--h3-color);
  color: inherit;
  padding: 0.2em 0 0.2em 0.7em;
}
/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

2. 点線の下線

見出しの下に、色の付いた点線を引きます。

/* 見出し3：点線の下線 */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h3-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: none;
  border: none;
  border-bottom: 2px dashed var(--h3-color);
  color: inherit;
  padding: 0 0 0.4em;
}
/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

3. 下に短い線

文字の下に、短い色の線を1本だけ引きます。飾りを最小限にしたいときに向いています。

/* 見出し3：下に短い線 */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h3-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  background: none;
  border: none;
  color: inherit;
  padding: 0 0 0.5em;
}

/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

/* 文字の下に、短い線を引く */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5em;
  height: 3px;
  border-radius: 2px;
  background: var(--h3-color);
}

4. マーカー風

SWELLの見出し3：文字の下半分に蛍光ペンのような色を引いたデザイン — マーカー風

文字の下半分に、蛍光ペンで引いたような色を付けます。色は文字の長さの分だけ付きます。

/* 見出し3：マーカー風 */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  --h3-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  width: fit-content; /* マーカーを文字の長さだけにする */
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--h3-color) 35%, #fff) 60%);
  border: none;
  color: inherit;
  padding: 0 0.2em;
}
/* SWELLの設定で付いた見出しの飾りを消す */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none;
}

CSSがうまく反映されないとき

貼ったのに見た目が変わらないときは、次の順に確かめてください。

確かめること	どうするか
「公開」を押したか	追加CSSの画面で、左上のボタンが「公開済み」になっているか見る
「追加CSS」に貼ったか	記事の編集画面や、別の設定欄に貼っていないか見る
古い表示が残っていないか（キャッシュ）	ブラウザで再読み込みし、キャッシュのプラグインがあればその画面でキャッシュを消す
ほかのCSSとぶつかっていないか	同じ見出しのデザインを2つ貼っていないか、前に貼った見出しのCSSが残っていないか見る

子テーマのstyle.cssに見出しのCSSを書いている場合も、ぶつかることがあります。子テーマを使っているときは、Claude CodeでSWELLを安全にカスタマイズする方法も参考にしてください。

まとめ

SWELLの見出しは、10種類のデザインから見出し2と見出し3を1つずつ選び、CSSを「外観」→「カスタマイズ」→「追加CSS」に貼って「公開」を押せば、サイト全体で変えられます。SWELLの見出し設定は変えなくても、画像と同じ見た目になります。

見出し2から1つ、見出し3から1つを選んで貼る
色は先頭の --h2-color ／ --h3-color の1か所で変える
反映されないときは「公開」・キャッシュ・ほかのCSSの順に確かめる

ステップやアコーディオンの見た目も変えたいときは、SWELLアコーディオンのカスタマイズに同じ形でCSSをまとめています。まずは右側のプレビューで2〜3種類を貼りかえて見比べ、記事に合うものが決まったら「公開」を押してください。

よくある質問

Q. 1つの記事だけ見出しを変えられますか

できます。CSSのそれぞれの指定の先頭に、.postid-123 のように記事のクラス名を足します。123は、その記事のIDに置きかえてください。

Q. 元の見た目に戻すにはどうしますか

追加CSSから、貼ったCSSを消して「公開」を押します。SWELLの見出し設定で選んでいるデザインに戻ります。

Q. セクション用見出しにも効きますか

SWELLの「セクション用見出し」には、この記事のCSSの飾りは付きません。撮影のときに、セクション用見出しを同じページに置いて確かめています。

Q. CSSの先頭が長いのはなぜですか

先頭の .post_content h2:where(…) は、SWELLが見出しの設定に使っているのと同じ書き方です。SWELLのブロック（よくある質問など）の中の見出しには効かないよう、除く条件が付いています。

SWELLの見出し設定は、::before と ::after（見出しの前後に付ける飾り）で線や帯を描いています。この記事のCSSは、まず content: none; でその飾りを消し、背景や線も none にしてから新しいデザインを描きます。SWELLの見出し設定に左右されないのはそのためです。