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

アコーディオンボックスを活用することで情報量の多いページでもスッキリ整理できます。Cocoonテーマにも標準搭載されておりとても便利ですが、準備されているデザインは一種類のためにもっとバリエーションが欲しいことも。

特に左寄せのデザインがあるといいな～。

そこで、10種類の選べるスタイルを準備しました。

今回は、Cocoonテーマを使用してアコーディオンボックスのデザインをサイドバーから切り替える方法、合わせてアイコンを変更するカスマイズを紹介します。

カスタマイズ内容

• サイドバーから簡単操作
  クリック操作だけで10種類のデザインが選べます。
  • NEW 便利なFAQスタイルを追加しました。
• 同一ページ内で複数のデザイン使用
  異なるデザインを同じページ内で自由に組み合わせできます。
• 簡単な実装手順
  コードを２か所に貼り付けるだけで完了、作業時間は５分程度です。
  • 一度の設定で、サイト全体で繰り返し使えます。
    • 不要になった場合、追加したコードを削除することで元に戻ります。

有料テーマのような操作性が手軽に実現できます！

他のブロックデザイン切り替えも紹介しています。

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

よく使うブロックがありましたらお試しください。

About me

この記事を書いた人

はるみです

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

実装イメージ｜Cocoonアコーディオン（トグル）ボックス

当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。

シンプル 1

コンテンツ

シンプル 2

コンテンツ

下線のみ

コンテンツ

ボタン風

コンテンツ

左｜シンプル 1

コンテンツ

左｜シンプル 2

コンテンツ

左｜下線のみ

コンテンツ

FAQ 1

回答を入力する

FAQ 2

回答を入力する

FAQ 3

回答を入力する

汎用性を重視してシンプルなデザインにしました。

手動で追加CSSクラスを入力せずにクリック一つでデザインが選べます。

以下、追加するスタイルの実例を掲載します。

中央寄せスタイル

デフォルト

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

スタイル 1：シンプルデザイン

• 外枠ありのシンプルなデザイン。
• 特徴：ボタン背景色は薄いベージュ系、色設定は自由におこなえます。

スタイル 2：見出しの破線デザイン

• シンプルな装飾の見出しデザイン。
• 特徴：ボタン背景色をなくし、チェック時にボタン下に破線が表示されます。

スタイル 3：下線のみのシンプルデザイン

• 全体を囲む枠はなく、下線のみのデザイン。
• 特徴：下線でシンプルながらも分かりやすく区切ります

• 当サイト使用ページ
  • CSSでテキストリンクをおしゃれに装飾する方法

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

• 丸みを帯びたボタン風のスタイルで、アコーディオンをより「押しやすく」見せるデザイン。
• 特徴：チェック時でも丸みを保ち、コンテンツの間に余白を持たせます。

• 当サイト使用ページ
  • CSSコピペで簡単！見出しデザインのカスタマイズ
  • ボックスデザイン（囲み枠）CSSコピペOK！ブログを見やすく装飾

左寄せスタイル

• スタイル1～4 の左寄せバリエーション。
• 特徴：ボタンの「」と「」アイコンが右端に固定表示されます。
• 使用例： レイアウトの統一感を出したい場合におすすめ。

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

スタイル 5：シンプルデザイン（左寄せ）

スタイル 6：見出しの破線デザイン（左寄せ）

スタイル 7：下線のみのシンプルデザイン（左寄せ）

• 当サイト使用ページ
  • Cocoonブログカード｜表示スタイルを簡単切り替えする簡単カスタマイズ

FAQスタイル

• 左寄せスタイル1～3 のFAQバリエーションです。
• 特徴：アイコンを「」「」に変更。
• 使用例： 「よくある質問」等に便利です。

スタイル 8：FAQ ボックスデザイン／シンプル

スタイル 9：FAQ 2／見出し破線

スタイル 10：FAQ 3／下線のみ

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

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

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

使い方

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

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

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

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

turicco.com

アイコンの変更

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

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アコーディオンボックスのデザイン切り替えカスタマイズ

実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。

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