質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。
目次
パーツ概要
ホームページの「よくあるご質問」で使うことを想定した開閉式（質問ブロックをクリックすると、回答ブロックがスルッと表示される！アコーディオンと呼ぶことが多い）の「FAQブロック」です。
SWELLのアコーディオンブロックそのままだと、行の先頭に、[ Q ]と[ A ]をいい感じに目立たせて表示することができないので、今回はSWELLのFAQブロックのCSSを参考にしてカスタマイズし作りました。
WordPressテーマ「SWELL」で手軽によくあるご質問ページを作りたい方はぜひコピペして使ってみていただきたいです。
使用するSWELLブロック
・アコーディオンブロック
コードエディターにコピペして使えるコード
<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"is-style-default"} -->
<div class="swell-block-accordion is-style-default"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down"} -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label"><strong>質問が入ります。質問が入ります。質問が入ります。</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><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>回答が入ります。回答が入ります。回答が入ります。</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item -->
<!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down"} -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label"><strong>質問が入ります。質問が入ります。質問が入ります。</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><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>回答が入ります。回答が入ります。回答が入ります。</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item -->
<!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down"} -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label"><strong>質問が入ります。質問が入ります。質問が入ります。</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><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>回答が入ります。回答が入ります。回答が入ります。</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item -->
<!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down"} -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label"><strong>質問が入ります。質問が入ります。質問が入ります。</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><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>回答が入ります。回答が入ります。回答が入ります。</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->デフォルトのデザインに変更を加える（行の先頭にQとAマークを挿入する）ために、以下のCSSを「カスタムCSS & JS」＞「CSS用コード」入力欄にコピペしてください。
.swell-block-accordion__title {
position: relative;
padding: 1.25em 1em 1.25em 4em;
}
.swell-block-accordion__title:before {
content: "Q";
position: absolute;
top: 50%;
left: 1em;
bottom: unset;
transform: translateY(-50%);
display: block;
border-radius: 9999px;
width: 2em;
text-align: center;
line-height: 2;
font-family: Arial,sans-serif;
font-weight: 400;
background-color: #d55656;
color: #fff;
}
.swell-block-accordion__body {
position: relative;
padding: 1.25em 1em 1.25em 4em;
}
.swell-block-accordion__body:before {
content: "A";
position: absolute;
top: 50%;
left: 1em;
bottom: unset;
transform: translateY(-50%);
display: block;
border-radius: 9999px;
width: 2em;
text-align: center;
line-height: 2;
font-family: Arial,sans-serif;
font-weight: 400;
background-color: #6599b7;
color: #fff;
}
