MENU
  1. ホーム
  2. SWELL
  3. SWELLアコーディオンのカスタマイズ｜ステップと合わせて12種の貼るだけCSS

SWELLアコーディオンのカスタマイズ｜ステップと合わせて12種の貼るだけCSS

PR
SWELL

SWELLのステップとアコーディオンは、CSSを「追加CSS」に貼るだけで見た目を変えられます。ステップ6種・アコーディオン6種、合わせて12種類のデザインを、実際の表示画像とそのまま使えるCSSで並べました。貼る場所は、WordPressの管理画面の「外観」→「カスタマイズ」→「追加CSS」です。

画像はどれも、SWELLのCSSで実際に表示を確かめたものです。気に入ったデザインを1つ選び、CSSをコピーして貼ってください。

文字の大きさや余白だけを少し変えたいときは、SWELLのステップ・アコーディオンをCSSで調整する方法で、調整の方法とクラス名の調べ方をまとめています。

目次

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

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

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

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

「追加CSS」の入力欄にCSSを貼り、右側で見た目を確かめます
「追加CSS」の入力欄にCSSを貼り、右側で見た目を確かめます

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

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

1種類につき1つだけ貼る

ステップから1つ、アコーディオンから1つを選んで貼ります。同じ種類のデザインを2つ重ねて貼ると、指定がぶつかって見た目が崩れます。

追加CSSに貼ったデザインは、サイトの中のすべてのステップ（またはアコーディオン）に効きます。記事のHTML（ブロックの中身）は変わりません。

色の変え方

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

.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}
  • var(--color_main) は、SWELLのカスタマイザーで決めた「メインカラー」のことです。そのままにしておけば、サイトの色に合わせて変わります。
  • 好きな色にしたいときは、var(--color_main) を #2b7a78 のような色の番号に書きかえます。
  • アコーディオンのCSSでは、同じ場所が --acc-color という名前になっています。

うすい色は、この色に白をまぜて作っています（color-mix() という書き方）。Chrome・Safari・Edge・Firefoxの、ここ2〜3年のバージョンで使える書き方です。それより古いブラウザでは、うすい色の部分が表示されないことがあります。

画像について

画像は、moreo note の公開ページから SWELL（バージョン2.19.0）【SWELLアフィリ】のCSSと、ステップ・アコーディオンのHTMLを取り出して表示したものです。子テーマのCSSとサイト独自の追加CSSは外しています。色は moreo note のメインカラー（#e89d5f）なので、ご自身のサイトではメインカラーの色で表示されます。

画面の幅は720pxで撮っています。スマートフォンの幅（500px）でも崩れないことを、別に確かめています。

SWELLのステップのデザイン6種

ステップの番号には、SWELLが「ほかの指定より優先させる印」（!important）付きで色を付けています。そのため、番号の色を変えるデザインでは、CSSにも !important を付けています。消すと番号の色が変わらないので、そのまま貼ってください。

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

SWELLのステップ：SWELLの標準のステップ
SWELLの標準のステップ

比べるための、SWELLのままの見た目です。番号はメインカラーの丸で、番号の下に点線が入ります。

1. シンプル線

SWELLのステップ：シンプル線
シンプル線

番号の丸を白抜き（ふちだけ色）にして、タイトルの下に線を引きます。すっきりした見た目にしたいときに向いています。

/* ステップ：シンプル線 */
.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 番号：中を白にして、ふちだけ色を付ける */
.swell-block-step .swell-block-step__number {
  background-color: #fff !important;
  color: var(--step-color) !important;
  border: 2px solid var(--step-color);
  box-sizing: border-box;
}

/* タイトル：下に線を引く */
.swell-block-step .swell-block-step__title {
  border-bottom: 2px solid var(--step-color);
  padding-bottom: 0.4em;
}

2. 番号を丸バッジに

SWELLのステップ：番号を丸バッジに
番号を丸バッジに

「STEP」の文字を消して、数字だけの丸いバッジにします。まわりに薄い輪が付きます。番号の形を「四角」にしていても丸になります。

/* ステップ：番号を丸バッジに */
.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 番号：少し小さい丸にして、まわりに薄い輪を付ける */
.swell-block-step .swell-block-step__number {
  background-color: var(--step-color) !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 4px;
  left: 4px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color) 25%, #fff);
}

/* 「STEP」の文字を消して、数字だけを大きく見せる */
.swell-block-step .swell-block-step__number .__label {
  display: none;
}
.swell-block-step .swell-block-step__number::after {
  font-size: 18px;
  font-weight: 700;
}

3. タイトルに背景色の帯

SWELLのステップ：タイトルに背景色の帯
タイトルに背景色の帯

タイトルの後ろに、うすい色の帯をしきます。どこからが次のステップか、見分けやすくなります。

/* ステップ：タイトルに背景色の帯 */
.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 番号の色 */
.swell-block-step .swell-block-step__number {
  background-color: var(--step-color) !important;
}

/* タイトル：うすい色の帯をしく */
.swell-block-step .swell-block-step__title {
  background: color-mix(in srgb, var(--step-color) 12%, #fff);
  border-radius: 6px;
  padding: 0.5em 0.8em;
}

4. カード風（影つき）

SWELLのステップ：カード風（影つき）
カード風（影つき）

1つのステップを、影の付いた白いカードにします。ステップ同士がはっきり分かれます。背景が白以外のサイトだと、カードがより目立ちます。

/* ステップ：カード風（影つき） */
.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  display: flex;
  flex-direction: column;
  gap: 1.25em; /* カードとカードの間 */
}

/* 1つのステップを白いカードにする */
.post_content .swell-block-step > .swell-block-step__item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 20px 20px 20px 84px;
}
.post_content .swell-block-step > .swell-block-step__item:last-child {
  padding-bottom: 20px;
}

/* 番号をカードの内側に置く */
.swell-block-step .swell-block-step__number {
  background-color: var(--step-color) !important;
  top: 20px;
  left: 20px;
}

/* SWELLの点線（番号の下の線）を消す */
.swell-block-step .swell-block-step__item::before {
  display: none;
}

/* スマートフォンの幅では、SWELLが本文を番号の下まで広げるので、タイトルの位置にもどす */
@media (max-width: 599px) {
  .swell-block-step .swell-block-step__body {
    padding-left: 48px;
  }
}

5. 左ボーダー

SWELLのステップ：左ボーダー
左ボーダー

丸い番号をやめて左に太い線を引き、タイトルの上に「STEP 01」と小さく出します。文字が多い手順でも、すっきり読みやすくなります。

/* ステップ：左ボーダー */
.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  display: flex;
  flex-direction: column;
  gap: 2em; /* ステップとステップの間 */
}

/* 1つのステップの左に太い線を引く */
.swell-block-step .swell-block-step__item {
  border-left: 4px solid var(--step-color);
  padding: 0 0 0 1.2em;
}

/* 丸い番号をやめて、「STEP 01」の小さな文字にする */
.swell-block-step .swell-block-step__number {
  position: static;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.3em;
  width: auto;
  height: auto;
  background: none !important;
  color: var(--step-color) !important;
  border-radius: 0 !important;
  font-weight: 700;
}
.swell-block-step .swell-block-step__number .__label {
  font-size: 13px;
}
.swell-block-step .swell-block-step__number::after {
  font-size: 13px;
}

/* タイトルの上の空きをつめる */
.swell-block-step .swell-block-step__title {
  min-height: 0 !important;
  margin-top: 0.2em;
}

/* SWELLの点線（番号の下の線）を消す */
.swell-block-step .swell-block-step__item::before {
  display: none;
}

/* スマートフォンの幅では、SWELLが本文を番号の下まで広げるので、タイトルの位置にもどす */
@media (max-width: 599px) {
  .swell-block-step .swell-block-step__body {
    padding-left: 48px;
  }
}

6. タイムライン風

SWELLのステップ：タイムライン風
タイムライン風

番号と番号を、色の付いたたての線でつなぎます。タイトルも同じ色になります。順番に進むことが伝わりやすい形です。

/* ステップ：タイムライン風 */
.swell-block-step {
  --step-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 番号の色 */
.swell-block-step .swell-block-step__number {
  background-color: var(--step-color) !important;
}

/* 番号から次の番号まで、たての線でつなぐ */
.swell-block-step .swell-block-step__item::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23px;
  border-left: 2px solid color-mix(in srgb, var(--step-color) 45%, #fff);
}
.swell-block-step .swell-block-step__item:last-child::after {
  content: none;
}

/* タイトルを色付きに */
.swell-block-step .swell-block-step__title {
  color: var(--step-color);
}

/* スマートフォンの幅では、SWELLが本文を番号の下まで広げるので、線に重ならないようタイトルの位置にもどす */
@media (max-width: 599px) {
  .swell-block-step .swell-block-step__body {
    padding-left: 48px;
  }
}

SWELLのアコーディオンのデザイン6種

画像は、1つ目を開き、2つ目と3つ目を閉じた状態です。ブロックのスタイルは「標準」で撮っています。「シンプル」「ボーダー」「メイン」に切りかえても、CSSを貼ったあとは同じ見た目になることを確かめています。

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

SWELLのアコーディオン：SWELLの標準のアコーディオン
SWELLの標準のアコーディオン

比べるための、SWELLのままの見た目です（スタイル「標準」）。タイトルはうすい灰色で、右はしに矢印のアイコンが付きます。

1. 角丸＋余白

SWELLのアコーディオン：角丸＋余白
角丸＋余白

1つの項目を角の丸い箱にして、タイトルと本文の余白を広げます。やわらかい印象になります。

/* アコーディオン：角丸＋余白 */
.swell-block-accordion {
  --acc-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 1つの項目を角の丸い箱にする */
.swell-block-accordion .swell-block-accordion__item {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--acc-color) 25%, #fff);
  border-radius: 10px;
  overflow: hidden;
}
.swell-block-accordion .swell-block-accordion__item + .swell-block-accordion__item {
  margin-top: 0.75em;
}

/* タイトル：うすい色の背景と、広めの余白 */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__title {
  background: color-mix(in srgb, var(--acc-color) 10%, #fff);
  color: inherit;
  padding: 1em 1.25em;
}

/* 本文：広めの余白 */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__body {
  border: none;
  margin: 0;
  padding: 1.25em 1.5em;
}

2. 開閉アイコンを＋／−に

SWELLのアコーディオン：開閉アイコンを＋／−に
開閉アイコンを＋／−に

右はしの矢印を、丸の中の「＋」に変えます。開くと「−」になります。ほかの見た目はSWELLのままです。

/* アコーディオン：開閉アイコンを＋／− に */
.swell-block-accordion {
  --acc-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* もとの矢印アイコンを消す */
.swell-block-accordion .swell-block-accordion__icon i {
  display: none;
}

/* 白い丸の中に「＋」を出す */
.swell-block-accordion .swell-block-accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--acc-color);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
.swell-block-accordion .swell-block-accordion__icon::before {
  content: "+";
  color: var(--acc-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* 開いているときは「−」にする */
.swell-block-accordion .is-opened .swell-block-accordion__icon::before {
  content: "−";
}

3. 見出しに背景色

SWELLのアコーディオン：見出しに背景色
見出しに背景色

タイトルを濃い色の背景に白い文字にして、本文にうすい色をしきます。目立たせたいQ&Aに向いています。

/* アコーディオン：見出しに背景色 */
.swell-block-accordion {
  --acc-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 項目と項目の間を少しあける（スタイル「シンプル」でもくっつかないように） */
.swell-block-accordion .swell-block-accordion__item + .swell-block-accordion__item {
  margin-top: 0.5em;
}

/* タイトル：濃い色の背景に白い文字 */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__title {
  background: var(--acc-color);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
}

/* 開いているときは、下の角を四角にして本文とつなげる */
.swell-block-accordion .swell-block-accordion__item.is-opened .swell-block-accordion__title {
  border-radius: 6px 6px 0 0;
}

/* 本文：うすい色の背景 */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__body {
  background: color-mix(in srgb, var(--acc-color) 7%, #fff);
  border: none;
  border-radius: 0 0 6px 6px;
  margin: 0;
}

4. 枠線だけ

SWELLのアコーディオン：枠線だけ
枠線だけ

背景の色をなくして、項目を色の枠で囲みます。タイトルと本文の間には点線が入ります。

/* アコーディオン：枠線だけ */
.swell-block-accordion {
  --acc-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 1つの項目を色の枠で囲む */
.swell-block-accordion .swell-block-accordion__item {
  border: 1px solid var(--acc-color);
  border-radius: 6px;
}

/* 項目と項目の間を少しあける（スタイル「シンプル」でもくっつかないように） */
.swell-block-accordion .swell-block-accordion__item + .swell-block-accordion__item {
  margin-top: 0.5em;
}

/* タイトル：背景をなくす */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__title {
  background: none;
  color: inherit;
}

/* 矢印アイコンを枠と同じ色に */
.swell-block-accordion .swell-block-accordion__icon {
  color: var(--acc-color);
}

/* 本文：タイトルとの間に点線を引く */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__body {
  border: none;
  border-top: 1px dashed color-mix(in srgb, var(--acc-color) 50%, #fff);
  margin: 0 1em;
  padding: 1em 0;
}

5. Q&A風（Qマーク）

SWELLのアコーディオン：Q&A風
Q&A風

タイトルの前に「Q」、本文の前に「A」の丸を付けます。よくある質問のまとめに向いています。

CSSが「Q」「A」の丸を付けるので、タイトルや本文の先頭に「Q.」「A.」と書いている場合は、その文字を消してください。画像も、元の文章から「Q.」「A.」を外して撮っています。

/* アコーディオン：Q&A風 */
.swell-block-accordion {
  --acc-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* タイトル：うすい色の背景 */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__title {
  background: color-mix(in srgb, var(--acc-color) 10%, #fff);
  color: inherit;
  font-weight: 700;
}

/* タイトルの前に「Q」の丸を付ける */
.swell-block-accordion .swell-block-accordion__label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}
.swell-block-accordion .swell-block-accordion__label::before {
  content: "Q";
  flex: 0 0 auto;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background: var(--acc-color);
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin-top: -0.2em;
}

/* 本文の前に「A」の丸を付ける */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__body {
  position: relative;
  border: none;
  margin: 0;
  padding-left: 3.4em;
}
.swell-block-accordion .swell-block-accordion__body::before {
  content: "A";
  position: absolute;
  top: 0.9em;
  left: 1em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border: 2px solid var(--acc-color);
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  color: var(--acc-color);
  text-align: center;
  font-weight: 700;
}

6. 区切り線

SWELLのアコーディオン：区切り線
区切り線

背景も枠もなくして、項目と項目の間を線で区切ります。記事の文章になじむ、控えめな見た目です。

/* アコーディオン：区切り線 */
.swell-block-accordion {
  --acc-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
}

/* 項目と項目の間を線で区切る */
.swell-block-accordion .swell-block-accordion__item {
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acc-color) 35%, #fff);
  margin-bottom: 0;
}
.swell-block-accordion .swell-block-accordion__item:first-child {
  border-top: 1px solid color-mix(in srgb, var(--acc-color) 35%, #fff);
}
.swell-block-accordion .swell-block-accordion__item + .swell-block-accordion__item {
  margin-top: 0;
}

/* タイトル：背景をなくして、上下に余白 */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__title {
  background: none;
  color: inherit;
  font-weight: 700;
  padding: 1.1em 0.25em;
}

/* 矢印アイコンを色付きに */
.swell-block-accordion .swell-block-accordion__icon {
  color: var(--acc-color);
}

/* 本文：背景も枠もなし */
.swell-block-accordion .swell-block-accordion__item .swell-block-accordion__body {
  border: none;
  margin: 0;
  padding: 0 0.25em 1.25em;
}

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

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

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

キャッシュは、一度読んだページを保存しておき、次から速く表示する仕組みです。CSSを変えた直後は、保存されていた古い見た目が出ることがあります。

それでも変わらないときは、ほかのCSSのほうが優先されている可能性があります。理由とクラス名の調べ方は、SWELLのステップ・アコーディオンをCSSで調整する方法で説明しています。

まとめ

SWELLのステップとアコーディオンは、12種類のデザインから1つずつ選び、CSSを「外観」→「カスタマイズ」→「追加CSS」に貼って「公開」を押せば、サイト全体の見た目を変えられます。

  • ステップから1つ、アコーディオンから1つを選んで貼る
  • 色は先頭の --step-color ／ --acc-color の1か所で変える
  • 反映されないときは「公開」・キャッシュ・ほかのCSSの順に確かめる

まずは右側のプレビューで2〜3種類を貼りかえて見比べ、記事の雰囲気に合うものが決まったら「公開」を押してください。

よくある質問

Q. 1つの記事だけデザインを変えられますか

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

Q. 子テーマのstyle.cssに書いてもいいですか

書いても使えます。子テーマのCSSは wp-content/themes/swell_child/style.css にあります。管理画面だけで済ませたい場合は、追加CSSのほうが手軽です。

Q. ステップとアコーディオンのCSSを両方貼ってもいいですか

両方貼って使えます。指定している場所（クラス名）が別だからです。見た目が崩れるのは、ステップ同士・アコーディオン同士を2つ重ねたときです。

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

追加CSSから、貼ったCSSを消して「公開」を押します。SWELLの標準の見た目に戻ります。

AI活用とホームページ制作のご相談

「自分でやるのは難しそう」「まずは相談だけしたい」——どちらでも大丈夫です。

AI活用の進め方から、ホームページ制作・WordPress構築まで、まとめてご相談いただけます。

SWELL
CSS

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次