WordPress標準アコーディオン・Cocoonトグル・詳細ブロックを比較｜違いと設定方法を解説

「普段は閉じていて、クリックしたときだけ内容が開く表示にしたい！」
そう思って「アコーディオン」と検索してみると、プラグインを紹介する記事ばかりで困ってしまいました。
WordPress 6.9では標準の「アコーディオン」ブロックが追加されました。また、Cocoonには「アコーディオン（トグル）」が用意されており、WordPress標準の「詳細」ブロックも利用できます。
どれもクリックすると内容を開閉できますが、設定方法やデザイン、使いやすさには違いがあります。
この記事では、3種類の違いや設定方法、実際に使って感じた特徴を画像付きでわかりやすく紹介します。

アコーディオンとは

WordPress 6.9から使える標準の開閉ブロックです。

アコーディオン（トグル）より設定項目が多く、タイトル位置を左寄せ・中央寄せなどから選べます。

デザインにこだわりたい方におすすめです。

cocoon設定で「目次の表示」にチェックを入れていると目次に出ます。

アコーディオン（トグル）とは

こちらもCocoonで使える開閉ブロックです。

アコーディオンより設定がシンプルで、初心者でも使いやすいのが特徴です。

見た目もすっきりしていて、簡単に設置できます。

cocoon設定で「目次の表示」にチェックを入れていても目次に出ません。

詳細ブロックとは

詳細ブロックはWordPress標準のブロックです。

テーマに関係なく利用でき、シンプルに開閉表示を作れます。

cocoon設定で「目次の表示」にチェックを入れていても目次に出ません。

詳細ブロック｜ここをクリックしてみて

ここに詳細を書きます
もう一度「ここをクリックしてみて！」をクリックすると隠れます

3種類の違いを比較

項目	WordPressアコーディオン	Cocoonアコーディオン（トグル）	詳細
見出しレベル設定	〇（H2〜H6）	×	×
Cocoonの目次表示	〇	トグルは見出しとして設定できないため、目次表示の対象にはなりません（※Cocoon設定に依存する場合あり）	×
設定のしやすさ	普通	簡単	とても簡単
ブロック構造	複雑（親子）	シンプル	シンプル

※目次への表示はCocoonの仕様や設定により異なる場合があります。

私の環境ではアコーディオンはブロックの移動がうまくできず、少し扱いにくく感じました。一方でトグルはスムーズに移動できたためリライトが多い記事では扱いやすいと感じました。

アコーディオンの設定方法

① ブロックを追加

② 「アコーディオン」を選択

③ タイトルを入力

④ 本文を入力

⑤ デザインを設定

⑥ 完成

アコーディオン（トグル）の設定方法

①「＋」を押す

②「アコーディオン」と検索

③見出しを入力

④本文を入力

⑤色・背景色を変更

⑥完成

詳細ブロックの設定方法

①「＋」

②「詳細」を追加

③タイトル入力

④本文入力

⑤必要なら「初期状態で開く」をON

どれがおすすめ？

※用途によって使いやすさが変わるため、実際の操作感も含めて選ぶのがおすすめです。

アコーディオン

• デザインにこだわりたい
• タイトル位置なども調整したい

実際のアコーディオンブロックですクリックしてみて👇

アコーディオン（トグル）

• 簡単に設置したい
• 設定はシンプルな方がいい

実際のアコーディオン（トグル）ブロックですクリックしてみて👇

詳細ブロック

• WordPress標準機能を使いたい
• テーマ変更後も使える方法を選びたい
• シンプルな補足説明に使いたい

実際の詳細ブロックですクリックしてみて👇

これが詳細ブロックです

私が本当に使いたかったのは、この「詳細」ブロックでした。最初は「アコーディオン」で検索していたため、なかなか見つけられませんでした。折りたたみ機能をシンプルに使いたい方には、一番使いやすいブロックだと思います。こちらも右側の設定ボックスで色の変更は可能です。
目次には出ません。

🔧 削除の正しい考え方（Cocoonアコーディオン系）

WordPressは基本的にどのブロックも「削除」自体は同じですが、
“選択のしやすさ”が違うので難しく感じることがあります。

🧩 削除手順（基本）

① ブロックをクリックして選択

アコーディオン部分の「タイトル」または枠内をクリック

② ブロック全体を選択する

左上にある👇を使います

• 六つの点（ドラッグハンドル）
• または「親ブロックを選択」

👉 ここが重要ポイント

③ 削除する方法

どれか1つでOKです👇

• キーボード：Delete または Backspace
• ツールバーの「︙」→ 削除
• 右クリック → 削除（環境による）

アコーディオンは親子構造のため、削除する際にブロックの選択が分かりにくく、少し手間取りました。一方でトグルや詳細ブロックはシンプルな構造で、削除もスムーズに行えました。

まとめ

3種類を実際に使ってみると、それぞれ特徴がはっきり違いました。
デザイン・操作性・シンプルさなど、目的に応じて使い分けるのが一番使いやすいと感じました。

• 細かく設定したいなら「アコーディオン」
• 簡単に設置したいなら「アコーディオン（トグル）」
• シンプルに使いたいなら「詳細」ブロック
  

今回の記事では目次についても触れましたが、設定方法は別の記事で画像付きで詳しく紹介しています👇

スクリーンショットを見やすくしたい方は、画像をクリックで拡大表示する方法も参考にしてください👇

置くだけでパソコンが充電できるスタンド👇

ハブ付き ノートPCスタンド タブレットスタンド