Webサイト制作所のWordPressテーマには、コンテンツ制作をサポートする便利なマイパターンが多数搭載されています。その中でも特に人気の「アコーディオンコンテンツ」は、クリックで開閉できる見やすいデザイン。FAQや詳細説明を整理したいときに最適なパターンです。
マイパターン「アコーディオン」
「アコーディオン」は、クリックやタップで開閉できるコンテンツです。
見出し（タイトル部分）をクリックすると、隠れていた内容がスライドして表示され、再度クリックすると閉じる構造になっています。
FAQ（よくある質問）や、長文の説明文、サービス詳細など、情報量が多いページをスッキリまとめたいときに最適です。
アコーディオン
| ボタン | 背景色・文字色をカラーピッカーでカスタム可能 見出しタグから段落タグに変更可能 |
| 隠れているコンテンツ | 背景色・文字色をカラーピッカーでカスタム可能 |
こちらをクリックすると隠れたコンテンツが表示されます
クリックやタップするボタンが見出しタグ（H1～H6）のアコーディオンコンテンツです。
こちらをクリックすると隠れたコンテンツが表示されます
クリックやタップするボタンが段落（Pタグ）のアコーディオンコンテンツです。
マイパターン「アコーディオン」の作成方法
STEP 1 アコーディオンを呼び出す 挿入したいところにマイパターン「アコーディオン」を呼び出す
- 「ブロックを追加」を選択
- 「すべて表示」を選択
- 「パターン」を選択
- 「マイパターン」を選択
- アコーディオンを選択
STEP 2 設定方法 アコーディオンの設定方法
ボタンのテキストを入力
ボタン部分を選択して、カーソル「｜」が点滅しているのを確認したら、「アコーディオン（ボタン）」を上書きします。
隠れているコンテンツのテキストを入力
開閉するコンテンツのテキストを選択して、カーソル「｜」が点滅しているのを確認したら新しいコメントを上書きします。
見出しタグの変更
見出しタグのデフォルト設定は「H2」です。変更する場合は「H2」を選択し変更します。
見出しではなくPタグに変更
「見出し」を選択し、ポップアップメニューの「段落」を選択するとPタグに変更できます。
アコーディオンは色々なカラーカスタマイズができます！
アコーディオン「ボタン部分」のカラーを変更
- ボタン部分を選択して、カーソル「｜」が点滅しているのを確認する
- 追加CSSクラスが「btn_1 ab_title」になっているのを確認し、色の「テキスト」「背景」から変更したい項目を選択
- カラーピッカーでおこのみのカラーに変更
アコーディオン「開閉するコンテンツ」の背景色を変更
- ボーダー部分を選択
- 色の「背景」を選択
- カラーピッカーでおこのみのカラーに変更