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

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

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

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

この記事でできること

• サイドバーから簡単操作
  クリックだけで選べる10種類のデザイン
• 同じページ内で複数デザインが使える
  ブロックの汎用性がアップします
• 導入が簡単
  コードを2ヶ所に貼り付けるだけで完了。作業時間は約5分。
• 不要な場合も安心
  追加したコードを削除するだけで元に戻せます。

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

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

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

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

About me

この記事を書いた人

はっちゃんです

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

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

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

外枠のみ

コンテンツ

見出し点線

コンテンツ

下線のみ

コンテンツ

背景色

コンテンツ

ボタン風

コンテンツ

左／外枠のみ

コンテンツ

左／見出し点線

コンテンツ

左／下線のみ

コンテンツ

左／背景色

コンテンツ

左／ボタン風

コンテンツ

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

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

特に左寄せのデザインが欲しくて作りました！

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

中央寄せのスタイル

「アコーディオン（トグル）ボックス」のスタイルはCocoonデフォルトのほか、10種類追加しています。

デフォルト

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

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

• 外枠ありのシンプルなデザイン。
• 特徴：ボタン背景色はデフォルトを残しているが、色設定は自由におこなえる。

例）ボーダー色・背景色を設定

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

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

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

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

スタイル 4：背景付きのスタイル

• ブロック全体に背景に色を付けることで目立つデザインに。
• 特徴：背景色に薄いグレー（#f5f6f7）を適用

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

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

例）ボーダー色を設定

左寄せのスタイル

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

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

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

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

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

スタイル 9：背景付きのスタイル（左寄せ）

スタイル 10：ボタン風デザイン（左配置）

例）ボーダー色を設定

「アコーディオンボックス」の使い方

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

必要に応じてプラスして使えるカスタマイズ例を掲載します。

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

便利な「追加CSSクラス」！ワードプレスのブロック（HTML）に簡単にクラスをつける方法

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

turicco.com

アイコンの変更

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

ここでは他に、fa-caret、fa-chevron、fa-arrowのアイコンに変更する方法を紹介します。

アイコン1：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

/* アイコン変更  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

/* アイコン変更 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）や、複数方向を示すものもあります。

当カスタマイズの注意点と特徴

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

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

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

実装方法／Cocoon「アコーディオンボックス」のデザインをサイドバーで切り替えするカスタマイズ

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

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