【SWELL】FAQブロックをアコーディオン化に変更するカスタマイズ

2025年2月8日2025年3月10日

ハシビィくん

FAQの項目が多すぎて冗長な感じがするっす！何かいい解決策はあるっすか？

カピーさん

SWELLの標準だと確かに長くなってしまうな。アコーディオン化して視認性を良くしてみよう。

WordPressテーマによっては、標準機能であるFAQの「アコーディオン」ですが、『SWELL』には実装されておりません。今回はそんなFAQブロックをアコーディオン化してみようというのが目的です。

SWELLでFAQブロックをアコーディオン化するカスタマイズ

SWELLには標準機能として「FAQブロック」が提供されています。今回は「FAQブロック」をカスタマイズしてアコーディオン化するというカスタマイズになります。

主なカスタム項目はCSSとJSが対象となります。

CSS（style.css）への入力

CSSに下記コードを入力してください。
※コメントアウト部分は解説パートです。

［外観→テーマエディター→style.css］から入力が可能です。※カスタマイズの追加CSSでも問題ありません。

/* FAQの質問部分のスタイル設定 */
.faq_q {
    background-color: var(--color_main); /* メインカラーを背景色として設定 */
    color: #fff; /* 文字色を白に設定 */
}

/* FAQの回答部分のスタイル設定（デフォルトは非表示） */
.faq_a {
    max-height: 0; /* 初期状態では高さを0にして非表示 */
    overflow: hidden; /* はみ出した部分を非表示にする */
    transition: max-height 0s; /* 高さの変更時にアニメーション効果を無効にする */
    padding: 0!important; /* パディングを強制的に0にする */
}

/* FAQの回答部分の開いた状態のスタイル */
.faq_a.open {
    max-height: fit-content; /* 内容に応じた高さに自動調整 */
    padding: 1em 1em 1em 3em!important; /* パディングを設定 */
    border: solid 1px var(--color_main); /* メインカラーの枠線を追加 */
}

/* SWELLテーマのFAQブロックに関するスタイル調整 */
.swell-block-faq .faq_q:before,
.swell-block-faq .faq_a:before {
    box-shadow: none; /* 影を削除 */
    left: 1px; /* 左端からの位置調整 */
}

/* SWELLのFAQブロック内で隣接する項目間の位置調整 */
.swell-block-faq .swell-block-faq__item+.swell-block-faq__item {
    position: relative; /* 相対位置指定 */
}

/* FAQの質問部分にアイコンを追加（デフォルト状態） */
.swell-block-faq__item .faq_q:after {
    content: "\e910"; /* icomoonフォントのアイコン（閉じた状態） */
    font-family: icomoon!important; /* icomoonフォントを使用 */
    color: #fff; /* アイコンの色を白に設定 */
    font-weight: bold; /* 太字設定 */
    position: absolute; /* 絶対配置 */
    right: 30px; /* 右端からの位置指定 */
    top: 50%; /* 質問テキストの中央に配置 */
    transform: translateY(-50%); /* 正確に中央揃え */
    font-size: 1.4em; /* アイコンサイズを1.4emに設定 */
}

/* 開いたFAQの質問部分のアイコン変更 */
.swell-block-faq__item.open .faq_q:after {
    content: "\e912"; /* icomoonフォントのアイコン（開いた状態） */
}

functions.php（JavaScript）の入力

外観＞テーマエディタ＞ functions.php から下記のコードを挿入します。※エラーが不安な場合はCode Snippetのプラグインに入力してください。

※コメントアウト部分は解説パートです。

<script>
// FAQの全アイテムを取得
const faqItems = document.querySelectorAll('.swell-block-faq__item');

for (const faqItem of faqItems) {
  // 各FAQアイテム内の質問要素と回答要素を取得
  const faqQuestion = faqItem.querySelector('.faq_q');
  const faqAnswer = faqItem.querySelector('.faq_a');

  // 初期状態で.openクラスを持っている場合、回答を表示
  if (faqItem.classList.contains('open')) {
    faqAnswer.classList.add('open');
  }

  // 質問部分をクリックしたときの処理
  faqQuestion.addEventListener('click', () => {
    faqAnswer.classList.toggle('open'); // 回答部分の表示・非表示を切り替え
    faqItem.classList.toggle('open'); // アイテム全体の状態を切り替え
  });
}
</script>