【SWELL】FAQブロックを開閉式(アコーディオン)にする

【SWELL】FAQブロックを開閉式(アコーディオン)にする

SWELLのFAQブロックを開閉式(アコーディオン)にしてみたカスタマイズです。

2つのコードをコピペするだけでOK!子テーマやfunctions.phpをいじらず、WordPressの管理画面内でカスタマイズが完結するようになっています。

滑らかに表示されるように、表示アニメーションにもこだわってみました。

完成するとこんな感じ

これはサンプルの質問です

回答を開閉式で表示することができます

文章が長い場合も表示崩れはありません。これはサンプルのテキストです。これはサンプルのテキストです。

文章が長い場合も表示崩れはありません。これはサンプルのテキストです。これはサンプルのテキストです。

FAQブロックは4つのスタイルから好きなデザインを選べる仕様になっていますが、どのスタイルを選択してもきれいに表示されます。

これはサンプルの質問です

回答を開閉式で表示することができます

文章が長い場合も表示崩れはありません。これはサンプルのテキストです。これはサンプルのテキストです。

文章が長い場合も表示崩れはありません。これはサンプルのテキストです。これはサンプルのテキストです。

サイト全体に適用する方法と、個別のページに適用する方法どちらも解説します!

CONTENTS

▾アイコンについて

アイコンの色はサイトのメインカラーになります。

カスタマイズを紹介した後で▾の色を変える方法や、別のアイコンにする方法も記載します。

バリエーション

これはサンプルの質問です

回答を開閉式で表示することができます

文章が長い場合も表示崩れはありません。これはサンプルのテキストです。これはサンプルのテキストです。

文章が長い場合も表示崩れはありません。これはサンプルのテキストです。これはサンプルのテキストです。

カスタマイズの諸注意

カスタマイズする際の注意事項
  • 作業前にバックアップを取ることを推奨します。
  • カスタマイズは自己責任でお願いします。

変更履歴等

  • SWELL 2.13.0 動作確認済み(2024/12/13)
CONTENTS