SWELLの見出しをCSSでカスタマイズする前に｜競合を防ぐ設定と安全な書き方

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

見出しへCSSを足したら、左線が二重になったり余白が広がったりすることがあります。SWELLの標準デザインと追加CSSが、同じ部分を装飾している可能性があります。

全部をCSSで作り直すより、標準設定で近い形を選び、足りない差分だけを追加する方が更新後の確認範囲を小さくできます。

確認範囲：2026年9月4日、SWELL 2.19.0でH2・H3・H4の個別デザイン欄を確認しました。掲載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追加の十分な理由になりません。自サイトの文字サイズ、本文幅、背景色が違えば、同じ数値でも読みやすさは変わります。

個別記事の装飾なら、テーマ全体の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など、テーマ本体の更新で上書きされない場所へ保存します。テーマファイルへ直接書く運用は避けます。

本番記事で試す前に、下書きや検証ページで見出し、目次、リンク位置を確認します。見た目だけでなく、目次のアンカー移動後に見出しが固定ヘッダーへ隠れないかも見ます。

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

クラスが付いていない

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

別の見出しにも効く

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

線が二重になる

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

色が変わらない

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

管理画面だけ違う

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

スマホだけ崩れる

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

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

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

変更後の品質チェック

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

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

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

変更日、対象、目的を短く記録しておくと、不要になったCSSを削除しやすくなります。見た目のためだけに同じプロパティを別セレクターへ重ねないでください。

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

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

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

追加CSSを減らしてブロックエディター中心に運用したい方は、Cocoonとの違いとSWELLが向く条件を確認できます。

公式情報

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