WordPressのプラグイン「BlockFlow」でWordPressサイトにアコーディオンを追加する方法をご紹介します。

BlockFlowとは？

WordPressのブロックエディタに、レスポンシブ対応した独自のブロックを20個以上追加することができるプラグインです。

2026年6月時点では、追加費用なし完全無料ですべての機能を使うことができます。

BlockFlowをインストール・有効化する

WordPress管理画面にログインして、プラグインを準備します。

「プラグイン」→「新規追加」をクリックして、検索欄で「BlockFlow」と検索します。

「今すぐインストール」→「有効化」をクリックします。

これでBlockFlowのブロックが使えるようになります。

アコーディオンブロックを追加する

固定ページにアコーディオンブロックを追加します。

投稿または固定ページの編集画面で以下の操作を行います。

「＋（ブロック追加）」をクリックして、「BLOCKFLOW」から「Accordion」を選択します。

そのままでもすぐに使えるアコーディオンが挿入されます。

表示設定をカスタマイズする

アコーディオンには「開閉タイトル」と「中身」を設定できます。

タイトルは、アコーディオンをブロックを選択した状態の右サイドバー「ペンアイコン（Settings）」→「Items」から設定します。

コンテンツ部分は、対象のアコーディオンを選択した状態の右サイドバー「ペンアイコン（Settings）」→「Text」から設定します。

その他にも、アコーディオンブロックを選択した状態で右側サイドバーの設定パネルよりアコーディオンの見た目や動作を細かく設定することができます。

上記のサンプルでは下記のスタイルを設定しています。

• General
  • Open Mode：Multiple
• Accordion Item
  • Gap：15px
  • Box Shadow：オン（パラメーターはデフォルト設定のまま）
• Header
  • Icon：NULL
  • Text Color：#FF6900
  • Title Icon：#FF6900
• Expand Icon
  • Color：#FF6900

プレビューで確認・公開

設定が完了したら「プレビュー」で動作を確認します。

まとめ

「BlockFlow」でWordPressサイトにアコーディオンを追加する方法をご紹介しました。

「BlockFlow」プラグインを使えば、コーディングを行わずにWebサイトにアコーディオンを作成できます。

初心者でも扱いやすいので、ぜひ活用してみてください。