Cocoonのアコーディオン（トグル）ブロックをカスタマイズ！複数デザインをサイドバーで切り替える方法

アコーディオンボックスを活用することで、情報量の多いページでもスッキリ整理できます。Cocoonテーマにもこの機能が標準搭載されておりとても便利ですが、デフォルトのアコーディオンは１種類のデザインのみ。

特に左寄せデザインとか、見た目にバリエーションがほしいな。

そこで今回は、10種類のデザインを切り替えられるカスタマイズをご紹介します。

サイドバーからスタイルを変更でき、クリック操作だけで簡単に見た目を切り替え可能！さらに、アイコン変更やFAQスタイルの追加にも対応しています。

• Cocoon タブブロック
• Cocoon ブログカード
• Cocoon 白抜きボックス
• Cocoon タブ見出しボックス
• Cocoon ラベルボックス
• Cocoon アイコンボックス
• Cocoon アコーディオン（トグル）
• Cocoon 新着記事・人気記事ブロック

About me

この記事を書いた人

はるみです

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー45（2025年4月現在）
• 2023年～有料記事公開
  • →累計400件（月間約20件）購入いただいています

実装サンプル｜Cocoonアコーディオン（トグル）ボックスのカスタマイズ

当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。汎用性を重視してシンプルなデザインを適用しています。

シンプル 1

コンテンツ

シンプル 2

コンテンツ

下線のみ

コンテンツ

ボタン風

コンテンツ

左｜シンプル 1

コンテンツ

左｜シンプル 2

コンテンツ

左｜下線のみ

コンテンツ

FAQ 1

回答を入力する

FAQ 2

回答を入力する

FAQ 3

回答を入力する

中央寄せスタイル（基本スタイル）

デフォルト

Cocoonのデフォルトのデザインです。

スタイル1｜シンプル 1（外枠あり）

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

スタイル2｜シンプル 2（破線見出し）

• シンプルな装飾の見出しデザイン。
• 背景なし、開くと見出し下に破線が表示

スタイル3｜下線のみ

• 外枠なし、見出しの下線だけでスッキリ
• 装飾を最小限にしたい方におすすめ

スタイル4｜ボタン風デザイン

• 角丸でボタンらしい見た目に
• 押しやすく、枠線＋余白もあり

左寄せバリエーション（統一感アップ）

• 中央寄せスタイル（1～4）に対応した左寄せ版。
• 特徴：ボタンの「」と「」アイコンが右端に固定表示されます。
• レイアウトの統一感を出したい場合におすすめ。

よりすっきりと、綺麗に見えます。

スタイル5｜左寄せ：シンプル 1

スタイル6｜左寄せ：シンプル 2（破線）

スタイル7｜左寄せ：下線のみ

FAQスタイル

• 左寄せスタイル（5〜7）をベースにした「Q&A風」。
• アイコンを「」「」に変更。
• 使用例： ちょっとした「よくある質問」等に便利です。

スタイル8｜FAQ 1（シンプル）

スタイル9｜FAQ 2（破線見出し）

スタイル10｜FAQ 3（下線のみ）

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

以下のステップで、誰でも簡単にアコーディオンブロックを活用できます。

これで、おしゃれ＆便利なアコーディオンコンテンツの完成です！ブログ記事・FAQ・ステップ解説など、さまざまな場面で活用してみてください。

Cocoonアコーディオン（トグル）ブロックの追加カスタマイズ

Cocoonのアコーディオン（トグル）ブロックをカスタマイズする方法について紹介します。必要に応じてブロック単位で追加できるカスタマイズ例を掲載しています。

使い方

1. CSSを設定する（一度設定すれば繰り返し使えます）
2. アコーディオン（トグル）ブロックを選択する
3. サイドバー「高度な設定」→「追加CSSクラス」にクラスを入力する

「追加CSSクラス」は特定のブロックにスタイルを適用する方法です。詳しい使い方は以下の記事を参考にしてください。

ワードプレスの「追加CSSクラス」を活用！特定のブロックにだけスタイルを適用する方法

ワードプレスのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます。この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交えなが...

turicco.com

アイコンの変更

Cocoonで使われるFont Awesome の矢印アイコンには複数の種類があり、それぞれ異なる用途やデザインの特徴があります。デフォルトでは「」と「」が使われていますが、他のアイコンに変更することも可能です。

アイコン1：fa-caret

クラス名：fa-caret

/* アイコン変更 */
.fa-caret .toggle-button::before {
    content: "\f0d7";
}

.fa-caret .toggle-checkbox:checked ~ .toggle-button::before {
    content: "\f0d8";
}

• 形状
  • 小さめの三角形で、指し示す方向を単純に示します。シンプルで小さいサイズ感が特徴。
• 使用用途
  • メニューの開閉を示すトグルアイコンや、UI内でちょっとした方向の指示を表示する場合に使用されます。
  • コンパクトで控えめな矢印として、ボタンや小さな要素に適しています。
• バリエーション
  • fa-caret-up、fa-caret-down、fa-caret-left、fa-caret-right

アイコン2：fa-chevron

クラス名：fa-chevron

/* アイコン変更  2*/
.fa-chevron .toggle-button::before {
    content: "\f078";
}
.fa-chevron .toggle-checkbox:checked ~ .toggle-button::before {
    content: "\f077";
}

• 形状
  • 細い線で構成されたV字型（角ばった形）。
• 使用用途
  • コンテンツの階層を示すインディケータ等によく使用されます。
  • fa-caret よりも少し存在感があり、目立たせたいときに適しています。
• バリエーション
  • fa-chevron-up、fa-chevron-down、fa-chevron-left、fa-chevron-right
  • シングルやダブル（例: fa-chevron-double-right）のバリエーションもあり。

アイコン3：fa-arrow

クラス名：fa-arrow

/* アイコン変更 3 */
.fa-arrow .toggle-button::before {
    content: "\f063";
}
.fa-arrow .toggle-checkbox:checked ~ .toggle-button::before {
    content: "\f062";
}

• 形状
  • 最も一般的な矢印形状で、先端が矢じりのようになっています。
• 使用用途
  • 動作（進む、戻る、移動など）や方向を明確に示したい場合に利用。
  • ボタンやリンクのアイコンとしてよく使用されます。
  • 操作を強調するデザインや目立つ案内用に適しています。
• バリエーション
  • 直線的な矢印（例: fa-arrow-up, fa-arrow-right）や、湾曲した矢印（例: fa-arrow-rotate-right）。
  • 両端に矢印が付いたもの（例: fa-arrows-alt）や、複数方向を示すものもあります。

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

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによってはスタイルの重複等で表示が崩れる場合があります。
• 子テーマを利用
  • 子テーマを使用することで安全性を確保しています。
  • 万が一不要になった場合は、追加したコードを削除することでデフォルトに戻せます。
• PHPエラーが発生した場合の対処
  エラー表示が出て保存できない場合、以下の項目を確認してください。

• WAF設定
  サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
• ベーシック認証
  • サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。

実装方法｜Cocoonアコーディオンボックスのデザイン切り替えカスタマイズ

実装手順は以下の２ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。