SWELLの見出しをCSSでカスタマイズ｜標準設定・最小コード・崩れた時の対処

※本記事にはプロモーションが含まれます。

SWELLの見出しは、標準設定で近い形を選び、不足する部分だけCSSで補うと管理しやすくなります。標準の線や背景に別の装飾を重ねると、二重表示や余白の崩れが起こるためです。まずH2・H3・H4のどれを変えるか決め、下書き1ページで変更を試しましょう。

確認範囲：2026年9月4日、SWELL 2.19.0でH2・H3・H4の個別デザイン欄を確認しました。掲載CSSの効果はサイトごとに異なるため、下書きと複数の画面幅で確認してください。

以下では、CSSが本当に必要かを判断し、競合しにくい追加方法と戻し方を説明します。

CSSを書く前に、H2・H3・H4の標準デザインを確認

SWELL公式によると、H2からH4のデザインはカスタマイザーの「投稿・固定ページ」内にある「コンテンツのデザイン」から選べます。

実画面では、見出し2・見出し3・見出し4のデザイン欄が分かれています。下部の「セクション見出し」と通常の見出し設定も別なので、対象を取り違えないようにしてください。

最初に、変えたいのがH2・H3・H4のどれかを決めます。本文の大きな区切りだけを強調したいならH2を調整し、下位の見出しは控えめにすると、読み進める際に階層を追いやすくなります。

公式マニュアルには、一部のコンテンツ設定が「SWELL設定」の「エディター設定」へ移動した案内もあります。古い解説と画面が違う場合は、現行マニュアルと実画面を優先します。

標準デザインで目的を満たせるならCSSは不要です。色や線を少し足すだけなら、その差分だけを追加します。

CSSが必要かを判断する

見出しの型を変える

先に試す場所：SWELLの見出しデザイン

CSSを使う条件：標準候補で目的を満たせない

サイト全体の色を揃える

先に試す場所：メインカラー・コンテンツ設定

CSSを使う条件：部分的な色だけ変えたい

特定の見出しだけ変える

先に試す場所：ブロックの追加CSSクラス

CSSを使う条件：個別の意味がある装飾が必要

余白を調整する

先に試す場所：見出し前後の本文構成

CSSを使う条件：実表示で過不足が確認できた

参考CSSは、そのまま全記事へ広げず、自分の本文幅で一つずつ確認してください。たとえば1行の見出しでは問題がなくても、スマホで2行になると線と文字が重なる場合があります。短文・長文・リンク入りの見出しを並べ、標準装飾との重なりと折り返しを見れば、必要な修正だけに絞れます。

個別記事の装飾なら、テーマ全体のH2を上書きせず追加CSSクラスを使うほうが安全です。

特定の見出しだけ変える最小CSS

変更したい見出しブロックの高度な設定で、追加CSSクラスへ heading-accent を付けます。そのうえで追加CSSへ次のような最小例を置きます。

.heading-accent { border-inline-start: 4px solid currentColor; padding-inline-start: 0.75em; }

currentColor は、その要素の文字色を線にも使います。独自の色コードを増やさず、サイト側の色変更に追従しやすい書き方です。

すでにSWELL標準の左線や背景がある場合は、この例でも二重になります。そのときはCSSを打ち消す前に、対象見出しの標準デザインを見直してください。

サイト全体の本文見出しへ適用するセレクターは、テーマや子テーマ、プラグインで変わる可能性があります。未確認のクラス名を記事からコピーして一括適用しないでください。

安全に追加する手順

CSSは「外観」の追加CSSなど、テーマ本体の更新で上書きされない場所へ保存します。テーマファイルへ直接書く運用は避けます。

検証ページには、短い見出し・2行になる見出し・リンクを含む見出しを置きます。PCとスマホで表示し、目次から移動して見出しが隠れないかまで確認すると、実際の記事で起きる崩れを見つけやすくなります。

編集画面だけの見た目と、公開ページの見た目は分けて記録します。同じ見出しを公開プレビューで確認し、「両方で反映しない」「公開側だけ崩れる」のどちらかを先に決めると、確認すべき設定を絞れます。

反映されない・崩れたときの切り分け

クラスが付いていない

ブロックの追加CSSクラスを確認する。

別の見出しにも効く

セレクターの範囲を狭める。

線が二重になる

SWELL標準デザインと同じ装飾を足していないか確認する。

色が変わらない

より強い既存ルールやインライン指定を開発者ツールで確認する。

管理画面だけ違う

公開側のCSS、キャッシュ、最適化を分けて確認する。

スマホだけ崩れる

固定幅、過大なpadding、長い英数字を確認する。

すぐに !important を足さないことが大切です。競合の原因が見えにくくなるため、まず適用先と読み込み順を確認し、必要性を説明できる場合だけ使います。

CSS最適化やキャッシュを使っているサイトでは、保存済みでも古いCSSが表示される場合があります。管理画面、ログイン中、ログアウト後の3つを比較してください。

変更後の品質チェック

装飾は見出しの意味を補助するものです。H2の文言が曖昧なら、色や線を増やす前に「その節で何が分かるか」を書き直します。

更新後に確認する範囲を小さく保つ

追加CSSが多いほど、SWELLやWordPressの更新後に確認する組み合わせが増えます。サイト全体の上書きは少数にし、個別クラスには用途が分かる名前を付けます。

調整を終えたら、CSSに変更日・対象・目的を残し、元へ戻せる範囲を明確にします。新しい上書きを増やす前に、同じ指定が既存CSSにないか確認してください。標準設定で足りる部分へ戻せれば、次のテーマ更新で確認する箇所も減らせます。

SWELLを利用中の方は、標準設定で整えたあと、必要な範囲だけへCSSを限定してください。

関連する設定は、スマホメニューの表示確認で確認できます。

SWELLをまだ利用していない方へ

CSS調整を減らすためにテーマを選び直す方は、CocoonとSWELLの編集機能・移行作業を比較する記事へ進んでください。見出し以外に繰り返し使う機能も含めて判断できます。

公式情報

• 見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法
• SWELL設定マニュアル