Cocoonアコーディオン（トグル）をおしゃれにカスタマイズする方法｜7種類のデザインをワンクリック追加

Cocoonのアコーディオン（トグルボックス）は便利ですが、標準デザインは1種類のみです。

• デザインのバリエーションが少ない
• 左寄せにしたい
• ボタン風にしたい

そんなときは、エディタのスタイル機能を使って複数デザインを追加すると便利です。

この記事では、Cocoonのアコーディオンを7種類のデザインに切り替えられるカスタマイズ方法を紹介します。

記事後半でそのまま使える形で完成コードを公開しています。

7種類のデザインを手軽に導入でき、操作性もデザイン性も大幅アップ。

Cocoonアコーディオン（トグル）をカスタマイズするとどう変わる？｜選べる7種類のデザイン一覧

追加できるデザインは全部で7種類。

シンプル・白抜き・下線・ボタン風など、記事の雰囲気に合わせて使い分けられます。

使い方はとても簡単。アコーディオンボックスを選択し、サイドバーの「スタイル」から好きなデザインを選ぶだけです。

Cocoonデフォルト（比較用）

Before

最初に、Cocoon標準のアコーディオンボックスです。

After

見出しやボーダー、背景色はCocoon標準の設定で自由に変更できるので、サイトの雰囲気に合わせてアレンジできます。

また、左寄せタイプでは開閉方向が分かりやすい矢印アイコン「」「」を採用し、開閉時にはアイコンがなめらかに回転するアニメーションも追加しました。

シンプル

もっとも使いやすい定番デザインです。

やわらかな背景色と枠線で内容を囲むため、補足説明や注意書きなど幅広い用途に使えます。

左寄せ（シンプル）

シンプルデザインを左寄せにしたタイプです。

FAQや手順解説など、見出しを一覧で並べたい場面によく合います。

白抜き（破線見出し）

背景色を使わず、すっきりと見せたいときにおすすめです。

開いたときだけ破線で区切られるので、必要以上に目立たず自然に情報を補足できます。

左寄せ（白抜き）

シンプルさを保ちながら、より軽やかな印象で使えるデザインです。

本文の流れを邪魔したくない記事に向いています。

下線のみ

余計な装飾を省き、見出し部分だけに下線を付けたミニマルなデザインです。

テキスト中心の記事でも違和感なくなじみます。

左寄せ（下線のみ）

個人的によく使っているデザインです。

手順や補足情報を段階的に並べたいときに便利で、記事全体をすっきり見せられます。

ボタン風デザイン

ボタンのような見た目にしたい場合はこちら。

CTA前の補足説明やFAQなど、「ここはクリックできる」と伝えたい場面におすすめです。

Cocoonの装飾ブロック全体を一覧で確認したい方は、こちらの記事も参考にしてください。

Cocoonアコーディオンブロックの実装手順｜完成コードのご案内

今回紹介したデザインを一つずつ作ることもできますが、実際には細かな調整が必要になります。

そこで、このサイトで実際に使用している完成版コードをそのまま使える形でまとめました。

• 動作確認済み
• コピペで導入可能
• デザイン調整済み

すぐに導入したい方はこちらをご利用ください。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。