【SWELL】アコーディオンブロックをFAQ風にカスタマイズ（CSSのみ）

2024年9月22日2024年11月21日

SWELLアコーディオンブロックをFAQ風（よくある質問）にカスタマイズしてみました。

実際に触れるようにアコーディオンブロックを配置しています。
またコピペで実装できるようにHTMLとCSSのコードも配置していますので活用して下さい。

SWELLでCSSとクラス名をどこに記述するか分からない場合は下記の記事を参考にしてください。

【SWELL】CSSとクラス名はどこに記述する？デザインをカスタマイズする方法

丸形アイコンのアコーディオンブロック

質問には「Q」、回答には「A」を表示した丸形アイコンのアコーディオンブロックです。

デフォルトスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion01 is-style-default"} -->
<div class="swell-block-accordion cclt-accordion01 is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion01 .swell-block-accordion__title,
.cclt-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion01 .swell-block-accordion__title::before,
.cclt-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.cclt-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

シンプルスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"cclt-accordion01 is-style-simple"} -->
<div class="swell-block-accordion cclt-accordion01 is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion01 .swell-block-accordion__title,
.cclt-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion01 .swell-block-accordion__title::before,
.cclt-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.cclt-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

囲い枠スタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"cclt-accordion01 is-style-border"} -->
<div class="swell-block-accordion cclt-accordion01 is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion01 .swell-block-accordion__title,
.cclt-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion01 .swell-block-accordion__title::before,
.cclt-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.cclt-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

メインカラースタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion01 is-style-main"} -->
<div class="swell-block-accordion cclt-accordion01 is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion01 .swell-block-accordion__title,
.cclt-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion01 .swell-block-accordion__title::before,
.cclt-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.cclt-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

枠線アイコンのアコーディオンブロック

質問には「Q」、回答には「A」を表示した枠線アイコンのアコーディオンブロックです。

デフォルトスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion02 is-style-default"} -->
<div class="swell-block-accordion cclt-accordion02 is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion02 .swell-block-accordion__title,
.cclt-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion02 .swell-block-accordion__title::before,
.cclt-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.cclt-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

シンプルスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"cclt-accordion02 is-style-simple"} -->
<div class="swell-block-accordion cclt-accordion02 is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion02 .swell-block-accordion__title,
.cclt-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion02 .swell-block-accordion__title::before,
.cclt-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.cclt-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

囲い枠スタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"cclt-accordion02 is-style-border"} -->
<div class="swell-block-accordion cclt-accordion02 is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion02 .swell-block-accordion__title,
.cclt-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion02 .swell-block-accordion__title::before,
.cclt-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.cclt-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

メインカラースタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion02 is-style-main"} -->
<div class="swell-block-accordion cclt-accordion02 is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion02 .swell-block-accordion__title,
.cclt-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.cclt-accordion02 .swell-block-accordion__title::before,
.cclt-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.cclt-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.cclt-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

QAテキストのみのアコーディオンブロック

質問には「Q」、回答には「A」のテキストのみを表示したアコーディオンブロックです。

デフォルトスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion03 is-style-default"} -->
<div class="swell-block-accordion cclt-accordion03 is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.cclt-accordion03 .swell-block-accordion__title,
.cclt-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.cclt-accordion03 .swell-block-accordion__title::before,
.cclt-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.cclt-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.cclt-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.cclt-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

シンプルスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"cclt-accordion03 is-style-simple"} -->
<div class="swell-block-accordion cclt-accordion03 is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.cclt-accordion03 .swell-block-accordion__title,
.cclt-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.cclt-accordion03 .swell-block-accordion__title::before,
.cclt-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.cclt-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.cclt-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.cclt-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

囲い枠スタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"cclt-accordion03 is-style-border"} -->
<div class="swell-block-accordion cclt-accordion03 is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.cclt-accordion03 .swell-block-accordion__title,
.cclt-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.cclt-accordion03 .swell-block-accordion__title::before,
.cclt-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.cclt-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.cclt-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.cclt-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

メインカラースタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion03 is-style-main"} -->
<div class="swell-block-accordion cclt-accordion03 is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.cclt-accordion03 .swell-block-accordion__title,
.cclt-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.cclt-accordion03 .swell-block-accordion__title::before,
.cclt-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.cclt-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.cclt-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.cclt-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

SWELLアイコンのアコーディオンブロック

質問に「SWELLアイコン」を表示させたアコーディオンブロックです。

参考サイト

SWELL公式サイトでアイコン一覧を確認する

CSS用のSWELLアイコン一覧を確認する – WAZA

デフォルトスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion04 \u002d\u002dbubble is-style-default"} -->
<div class="swell-block-accordion cclt-accordion04 --bubble is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion04 .swell-block-accordion__title,
.cclt-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.cclt-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.cclt-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.cclt-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.cclt-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.cclt-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

シンプルスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"cclt-accordion04 \u002d\u002dinfo is-style-simple"} -->
<div class="swell-block-accordion cclt-accordion04 --info is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion04 .swell-block-accordion__title,
.cclt-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.cclt-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.cclt-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.cclt-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.cclt-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.cclt-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

囲い枠スタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"cclt-accordion04 \u002d\u002dmegaphone is-style-border"} -->
<div class="swell-block-accordion cclt-accordion04 --megaphone is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion04 .swell-block-accordion__title,
.cclt-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.cclt-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.cclt-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.cclt-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.cclt-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.cclt-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

メインカラースタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"cclt-accordion04 \u002d\u002dlight-bulb is-style-main"} -->
<div class="swell-block-accordion cclt-accordion04 --light-bulb is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

↑のコードはエディター上で「Shift+Ctrl+Alt+M」の後にペースト

.cclt-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.cclt-accordion04 .swell-block-accordion__title,
.cclt-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.cclt-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.cclt-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.cclt-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.cclt-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.cclt-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

まとめ｜SWELLアコーディオンブロック一覧

SWELLテーマのアコーディオンブロックをFAQ形式にカスタマイズする方法を解説
CSSのみを使用して質問(Q)と回答(A)のアイコンを表示可能
CSSクラス（例: cclt-accordion01）を設定してデザインを調整
質問部分には「Q」、回答部分には「A」のアイコンを配置し視覚的にわかりやすく
色の変更やアイコンサイズの調整もCSSで簡単に実現
FAQデザインの統一感を高め、ユーザビリティ向上を図る手法を紹介

丸形アイコン

デフォルトスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

枠線アイコン

デフォルトスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

QAテキスト

デフォルトスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

SWELLアイコン

デフォルトスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

よかったらシェアしてね！

URLをコピーしました！