Cocoonアコーディオン（トグル）をカスタマイズ！10種類のデザインでスッキリ魅せる

WordPressテーマ「Cocoon」のアコーディオンボックス、使っていますか？情報量が多いページでも、クリックひとつで内容を折りたためるとても便利な機能です。

ただし、デフォルトのデザインは1種類のみ。

「もっとバリエーションが欲しい」「左寄せで使いたい」と感じたことはないでしょうか。

そこでこの記事では、「できたらいいな」をコピペで実現！10種類のスタイルをサイドバーからワンクリックで切り替えできるカスタマイズ方法をご紹介します。

FAQスタイルにも対応。ページをシンプルかつスタイリッシュに仕上げられます。

完成コードは記事後半で有料公開中。

10種類のデザインを即導入でき、有料テーマのような操作性とデザイン性をCocoonで手に入れられるのが大きな魅力。このサイトでも愛用しているカスタマイズです。

こんなデザインが可能に！Cocoonアコーディオンボックスのカスタマイズ例

このカスタマイズでは、10種類のスタイルをサイドバーからクリックするだけで簡単に切り替え可能。シンプルなデザインをベースに汎用性を重視しています。

各スタイルの特徴・使用例・実際の表示サンプルを掲載しているので、導入の参考にしてください。

デフォルト

Cocoon標準のデザインです。

シンプル

• 枠で囲まれたシンプルデザイン
• 薄ベージュ系背景（変更可能）

白抜き（破線見出し）

• 背景なし、開くと見出し下に破線表示
• シンプルで見やすい

下線

• 外枠なし、見出しの下線だけ
• 最小限の装飾でスッキリ

ボタン風デザイン

• 角丸でボタンのような見た目
• 枠線と余白で押しやすく、視認性も◎

以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

Cocoonアコーディオン（トグル）ブロックの使い方｜基本操作

基本操作の手順 をステップごとに解説します。

Cocoonアコーディオン（トグル）ブロック｜カスタマイズの注意点と特徴

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
    

• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
  

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

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 10種類のデザインをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で完成形のアコーディオンボックスを導入したい方はぜひご活用ください。