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

Cocoonのトグル（アコーディオン）ボックスのカスタマイズ方法を紹介していきます。

Cocoonにはトグル（アコーディオン）ボックスという、記事の一部の表示/非表示を切り替えられる機能がついています。

エンジニアやカスタマイズ系の記事を書いている方はコードを載せたり、また英単語系や料理ブログの材料、学習系ブログの答え合わせなど色々なところに使えそうです。

Cocoonのトグル（アコーディオン）ボックスについて詳しくは、公式の記事も合わせてお読みいただくと分かりやすいかと思います！

Cocoon Blocks 0.0.9公開。トグル（アコーディオン）ボックス追加。

Cocoon Blocks 0.0.9のアップデート情報。コンテンツを出し入れ出来るアコーディオンボックス追加。

wp-cocoon.com

こんな見た目になります

実際の記事では、こんな感じで使っています。

【Cocoon】インデックスカード（記事一覧）のカスタマイズ

alice.yuhostyles.com

2021.01.30

ちなみにこのブログカードのカスタマイズ方法は、こちらの記事内で紹介していますよ。

【Cocoon】ブログカードのデザインをカスタマイズ(2種類)

alice.yuhostyles.com

2021.01.29

話が少し逸れてしまいましたが、Cocoonのトグル（アコーディオン）ボックスのカスタマイズ方法について紹介していきたいと思います！

カスタマイズの手順

こちらもコピペだけで簡単に利用できます。

下のカスタマイズ用CSSコードを「追加CSS」にコピペして、カラーコードの部分を好きな色に置き換えます。

追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

カスタマイズ用コード

これをそのままコピペでできます。

色の部分は、好きな色に変えて使ってみてください。

/* トグルボックス */
.toggle-button {
	background-color: #ffb1d8; /* 見出しの背景色 */
	color: #fff; /* 見出しの文字色 */
	border: none;; /* 見出しのボーダーを消す */
}
.toggle-button::before {
	color: #fff; /* 「＋」記号の色 */
}
.toggle-checkbox:checked ~ .toggle-content {
	border: none; /* ボックスのボーダーを消す */
  background: aliceblue; /* ボックスの背景色 */
}