Cocoonの記事内に開閉するBOX（トグルボックス）表示とカスタマイズ

Cocoon・カスタマイズ

2020.07.052024.01.25

この記事は約4分で読めます。

Cocoonには、記事内に「アコーディオン開閉」するボックス（トグルボックス）を埋め込む機能があり、簡単に挿入して使えます。

閉じた状態

開いた状態

その使い方と、簡単カスタマイズ方法です。

使い方
- 内容を編集
カスタマイズ方法
カスタマイズサンプル
- Before
- After
カラーの変更

使い方

記事編集画面で、「タグ」から「トグルボックス」を選択するだけです。

ビジュアルエディタの場合

ブロックエディタの場合

内容を編集

見出しと内容を編集します。

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

カスタマイズサンプル

Before

After

見出しの背景色　３パターン

カラー指定の部分は、もちろん

カラー名、16進コード、RGB値　などなんでもOKですので、お好きなカラーに変更してご利用下さいｒ。

/************************************
** トグルボックス
************************************/
/*見出し*/
.toggle-button {
background:linear-gradient(to right, gray, white, gray); /*背景色*/
}

/************************************
** トグルボックス
************************************/
/*見出し*/
.toggle-button {
background:  radial-gradient(#eb8686, #edcccc);
}

/************************************
** トグルボックス
************************************/
/*見出し*/
.toggle-button {
background: linear-gradient(45deg, red 0 50%, blue 50% 100%);
color:#fff;
}

展開スピードを変える

初期値は　0.7sで少しゆっくりめです。

/************************************
** トグルボックス
************************************/
/*展開スピード*/
.toggle-wrap .toggle-content {
transition: all 0.3s ease;
}
.toggle-checkbox:checked ~ .toggle-content {
transition: all 0.3s ease;
}

その他の変更

閉じた状態

開いた状態

枠線
見出し背景色
文字サイズ

CSS

/************************************
** トグルボックス
************************************/
/*全体枠*/
.toggle-wrap {
border: 1px solid #6699cc; /*枠線種・太さ・色*/
}
/*見出し*/
.toggle-button {
background-color: #66ccff;/*背景色*/
color: #fff;/*文字色*/
border: 2px solid #6699cc; /*枠線種・太さ・色*/
}
.toggle-button:hover {
color: #555;/*文字色*/
}
/*内容*/
.toggle-wrap .toggle-content{
font-size:25px;
}