SWELLのステップ・アコーディオンをCSSで調整する方法｜文字サイズ・余白の変更例

SWELLのステップやアコーディオンは、CSSを追加すると、文字の大きさや余白、角の丸みなどを変更できます。

SWELL本体のファイルや、記事のHTMLを書き換える必要はありません。変更したい部分の「クラス名」を調べて、子テーマまたはWordPressの「追加CSS」にコードを書きます。

クラス名とは、ステップのタイトルやアコーディオンの本文など、変更する場所をCSSに伝えるための名前です。

この記事では、クラス名をChromeで確認する方法と、実際に使えるCSSを紹介します。後半では、Claude CodeにCSSの調整を依頼するときの伝え方もまとめます。

※SWELLの仕様はアップデートで変わることがあります。本記事はSWELL v2.19.0（2026年10月時点）で確認した内容です。

SWELLのステップ・アコーディオンは追加CSSで変更できる

ステップやアコーディオンの見た目を変えるときは、次の4つを守ります。

• 親テーマ（swell）のファイルは変更しない
• ブロックのHTMLも、原則として変更しない
• 公開画面で、変えたい部分のクラス名を確認する
• CSSは子テーマか、追加CSSに記述する

親テーマのファイルは、SWELLをアップデートすると新しいファイルに置き換わります。親テーマに加えた変更は、そのときに消えてしまいます。親テーマを変更せず子テーマに追加する理由は、Claude CodeでSWELLをカスタマイズする方法でも紹介しています。

CSSを書く場所を選ぶ

CSSを書く場所は、次の2つです。

子テーマのファイルを開けない場合でも、追加CSSなら管理画面から書けます。

moreo note の公開ページで読み込み順を確認したところ、子テーマのCSSと追加CSSは、どちらもSWELL本体のCSSより後に読み込まれていました。同じ強さの指定であれば、後から読み込まれる子テーマ・追加CSSの指定が反映されます。

変更したい部分のクラス名を調べる

クラス名は、テーマのファイルを開かなくても、公開画面で確認できます。ここではChromeの「開発者ツール」（表示中のページのHTMLやCSSを確認できる機能）を使います。

SWELL v2.19.0 のステップ・アコーディオンでは、次のクラス名が出力されていました。テーマ内のCSSと、moreo note の公開ページのHTMLの両方で確認しています。CSSに書くときは、クラス名の前に .（ドット）を付けます。

参考：ブログパーツのクラス名

ブログパーツは、外側の <div> に p-blogParts と、パーツのIDを示す data-partsID が付きます。特定のブログパーツだけを変えたいときは、.p-blogParts[data-partsID="865"] のようにIDまで指定します（865は例です）。

ステップの文字サイズと余白を変更する

ステップのタイトルを18pxにし、本文との間隔を12pxにする場合は、次のCSSを追加します。

/* ステップのタイトルを18pxにする */
.swell-block-step__title {
  --swl-fz--large: 1.125rem;
}

/* ステップのタイトルと本文の間を12pxにする */
.swell-block-step__title + .swell-block-step__body {
  margin-top: 0.75rem;
}

この例では、1.125rem が18px、0.75rem が12pxにあたります。SWELLの初期の状態では、タイトルの文字サイズは20px、本文との間隔は16pxでした。数字を変えれば、好みの大きさに調整できます。

SWELLでは、通常の font-size を書くだけでは文字サイズが変わらない場合があります。そのため、この例ではSWELLが文字サイズに使っている値（--swl-fz--large）を上書きしています。余白も、タイトルの下ではなく、本文の上の余白を変えています。

アコーディオンの角丸と余白を変更する

アコーディオンのタイトルの角を丸くし、本文の余白を広げる場合は、次のCSSを追加します。

.swell-block-accordion .swell-block-accordion__title {
  border-radius: 8px;
}

.swell-block-accordion .swell-block-accordion__body {
  padding: 1.5rem;
}

数値は、実際の画面で確認しながら調整してください。タイトルの角を丸くすると、開いたときに本文との境目も丸くなります。開いた状態と閉じた状態の両方を見て、違和感がないか確かめます。

クラス名を2つ重ねて書いているのは、アコーディオンのスタイルによっては、1つだけでは余白が変わらないためです。

1つのページやブロックだけに反映する

ここまでのCSSは、サイト内のすべてのステップ・アコーディオンに反映されます。1つのページだけを変えたいときは、範囲を限定します。方法は2つあります。

ページIDで限定する

投稿なら postid-◯◯、固定ページなら page-id-◯◯ というクラスが付くので、これをクラス名の前に足します。

/* 投稿ID 123 のページだけ */
.postid-123 .swell-block-step__title {
  --swl-fz--large: 1.125rem;
}

/* 固定ページID 40 のページだけ */
.page-id-40 .swell-block-step__title {
  --swl-fz--large: 1.125rem;
}

IDは、編集画面のURLにある post=◯◯ の数字で確認できます。SWELLでは、このクラスが <body> ではなく、その内側の <div id="body_wrap"> に付いていました。body.postid-123 と記述すると当たらないので、body を付けずに記述します。

ブロックに独自のクラスを付ける

編集画面でステップブロック全体を選び、右側の設定の「高度な設定」→「追加CSSクラス」に、たとえば my-step と入力します。保存すると、外側の .swell-block-step に my-step が加わります。

.my-step .swell-block-step__title {
  --swl-fz--large: 1rem;
}

同じページの中でも、クラスを付けたステップだけが変わります。複数のページで同じ見た目にしたいときにも使えます。

CSSが反映されないときに確認すること

CSSを追加しても見た目が変わらないときは、次の順に確認します。

1. 公開画面を再読み込みして、もう一度見た目を確かめる
2. 開発者ツールの「Styles」で、追加した指定に打ち消し線が引かれていないか見る（引かれていれば、ほかの指定に負けています）
3. ステップのタイトルの文字サイズを、font-size ではなく --swl-fz--large で変えているか
4. ステップのタイトルと本文の間を、本文側の margin-top で変えているか
5. アコーディオンの本文の余白を、クラス名を2つ重ねて書いているか
6. ページIDで限定するときに、body.postid-◯◯ のように body を付けていないか

3〜6の理由は、それぞれの章で説明しています。

Claude CodeにCSSの調整を依頼する

Claude CodeにCSSの調整を頼むときは、「このブロックのHTMLを直して」ではなく、対象のクラス名・変更内容・変更しない範囲を伝えます。開発者ツールでコピーした対象のHTMLも一緒に渡します。

Claude Codeに以下のように伝えます。

このページにあるSWELLのステップブロックを、
子テーマのCSSで調整してください。

対象：
.swell-block-step__title

変更内容：
- 文字サイズを18pxにする
- タイトルと本文の間を12pxにする

対象のHTML（開発者ツールでコピーしたもの）：
（ここにステップ項目1つ分のHTMLを貼り付け）

条件：
- 親テーマのファイルは変更しない
- HTMLの構造は変更しない
- 指定したクラス以外へ影響を広げない
- 変更前に対象ファイルと差分を確認する

対象のHTMLは、開発者ツールの「Elements」パネルで swell-block-step__item の行を右クリックし、「Copy」（日本語表示では「コピー」）の中にある outerHTML のコピーを選ぶと取得できます。HTMLを渡すと、u-fz-l のように一緒に付いているクラスもClaude Codeが確認できるため、効かないCSSを足して終わることを減らせます。

Claude Codeが「完了しました」と答えたあとは、公開画面を再読み込みして、見た目が変わったかを自分の目で確認します。変わっていなければ、前述の「CSSが反映されないときに確認すること」を順に見ます。

ブロックの仕組みまで調べたい場合（詳しく調べたい人向け）

ここからは、ブロックの仕組みまで知りたい人向けの補足です。CSSを追加するだけなら、テーマ内のファイルを開く必要は通常ありません。

仕組みまで確認したい場合は、親テーマ（wp-content/themes/swell/）の次のファイルを読みます。開いて読むだけにとどめ、変更はしません。

アコーディオンは、項目が <details>、タイトルが <summary> というタグ（クリックで開閉する部分を作るHTMLのタグ）で出力されていました。

ステップとアコーディオンは、保存した時点のHTMLが記事の本文に書き込まれます。ブログパーツは、本文にはパーツのIDだけが保存され、表示するたびにPHP（WordPressの裏側で動くプログラム）がHTMLを組み立てます。ブログパーツの中身を直すと、そのパーツを置いたすべての記事に反映されるのは、この仕組みのためです。

ブロック名のフォルダは step・step-item・accordion・accordion-item・blog-parts です。ファイルの場所はSWELLのバージョンによって変わることがあります。SWELLのソースコードは著作物のため、この記事では転載していません。

まとめ

• SWELLのステップ・アコーディオンの文字サイズや余白、角の丸みは、SWELL本体のファイルも記事のHTMLも変更せず、CSSを追加して変更する
• 変更したい部分のクラス名は、公開画面をChromeの開発者ツールで開いて確認する
• CSSは子テーマか追加CSSに記述する。ステップのタイトルの文字サイズは --swl-fz--large で、本文との間隔は本文側の margin-top で変える
• 1ページだけ変えるときは .postid-◯◯・.page-id-◯◯ か、ブロックの「追加CSSクラス」で範囲を限定する
• Claude Codeには、対象のクラス名・変更内容・実際のHTML・変更しない範囲を渡す

まずは見た目を変えたいページを開き、開発者ツールで対象のクラス名を確認してから、子テーマか追加CSSに1か所だけ指定を足してみてください。