Cocoonのアコーディオン（トグル）をもっとおしゃれに！サイドバーから選べるカスタマイズ方法

アコーディオンボックスを活用することで、情報量の多いページでもスッキリ整理できます。

Cocoonテーマにもこの機能が標準搭載されておりとても便利ですが、デフォルトのアコーディオンは１種類のデザインのみ。

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

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

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

About me

この記事を書いた人

はるみです

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

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

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

シンプル 1

ここにコンテンツを入力

シンプル 2

ここにコンテンツを入力

下線のみ

ここにコンテンツを入力

ボタン風

ここにコンテンツを入力

左｜シンプル 1

ここにコンテンツを入力

左｜シンプル 2

ここにコンテンツを入力

左｜下線のみ

ここにコンテンツを入力

FAQ 1（質問文）

ここに回答を入力する

FAQ 2（質問文）

ここに回答を入力する

FAQ 3（質問文）

ここに回答を入力する

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

デフォルト

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

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

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

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

• シンプルな装飾の見出しデザイン。
• 背景色なし、開いたときに見出し下に破線を表示

スタイル3｜下線のみ

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

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

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

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

• テキストが左寄せになります。
• ボタンの「」「」アイコンが右端に固定表示されます。
• レイアウトの統一感を出したい場合におすすめ。

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

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

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

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

FAQスタイル

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

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

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

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

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

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

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

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

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

使い方

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

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

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

WordPressのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか？実は「追加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アコーディオン（トグル）ブロック｜カスタマイズの注意点と特徴

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

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
• 子テーマを利用
  • 必要なコードは必ず子テーマに記述してください。
• バックアップの重要性
  • 編集前に必ずバックアップをおこなってください。
  • バックアップ＆復元方法
  • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
• PHPエラーが発生した場合の対処

重大なエラーが発生した場合

• 管理画面にも入れない場合
  • FTPソフトを使用し、バックアップデータ（編集前の子テーマfunctions.php）を上書きして復元します。

当記事ではコピペのみで完成しますが、バックアップ＆復元方法を確認しておくことを強くおすすめします！

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

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

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

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