Cocoonのトグル（アコーディオン）ボックスのカスタマイズ方法を紹介していきます。
Cocoonにはトグル（アコーディオン）ボックスという、記事の一部の表示/非表示を切り替えられる機能がついています。
エンジニアやカスタマイズ系の記事を書いている方はコードを載せたり、また英単語系や料理ブログの材料、学習系ブログの答え合わせなど色々なところに使えそうです。
Cocoonのトグル（アコーディオン）ボックスについて詳しくは、公式の記事も合わせてお読みいただくと分かりやすいかと思います！
こんな見た目になります
こんな感じで、表示したり非表示にしたりを切り替えられます。
実際の記事では、こんな感じで使っています。
ちなみにこのブログカードのカスタマイズ方法は、こちらの記事内で紹介していますよ。
話が少し逸れてしまいましたが、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; /* ボックスの背景色 */
}
