【Cocoon】アコーディオン（トグル）のアイコンを変更する・消す

アコーディオン（トグル）は、見出しをクリックすることで、直下のボックス内にテキストを表示させる機能です。

WordPressテーマ「Cocoon（コクーン）」には この機能が実装されており、左パネルの「Cocoonブロック」からアコーディオン（トグル）を追加することができます。

右のパネルでアコーディオンや文字の色を変えることも可能です。

見出しのアイコンを変更する方法

アコーディオンの見出しの手前には、開閉によって表示が入れ替わる
「＋（プラス）」「－（マイナス）」のアイコンがあります。

このアイコンのデザインを下のように変更してみます。

「外観」＞「テーマエディターファイル」＞「Cocoon Child」を選択し、「スタイルシート」に下のコードを記述（コピペ）してから「ファイルを更新」するだけです。

/************************************
** アコーディオンの見出しのアイコンを変更する
************************************/
.toggle-button::before {
  content: '\f204'; /*クリック前のアイコン*/
　font-size: 1.2em; /*アイコンの大きさ*/
}

.toggle-checkbox:checked ~ .toggle-button::before {
  content: '\f205'; /*クリック後のアイコン*/
}

Cocoonのアイコンはもともと「Font Awesome」のものが使ってあるので、「f204」「f205」の４ケタの部分を書き換えて変更できます。

▶「Font Awesome」公式ページはこちらから

一覧から好きなアイコンを選んでクリックする。

小さく書かれた４ケタの英数字をメモして、先ほどの部分（「￥」のうしろの４ケタ）を書き換える。

見出しのアイコンを消す方法

サイトによっては見出しが不要な場合もあるでしょう。

先ほどのクリック前、クリック後の２つのアイコンのコードを「none」に書き換えるだけです。

/************************************
** アコーディオンの見出しのアイコンを消す
************************************/
.toggle-button::before {
  content: none; /*クリック前のアイコン*/
}

.toggle-checkbox:checked ~ .toggle-button::before {
  content: none; /*クリック後のアイコン*/
}

見出し全体を左詰めにする方法（別記事）

CSSで見出し全体を左に寄せることもできます。

左詰めの方法は以前の記事がありますのでそちらをどうぞ。（↓）

Font Awesomeのアイコンを記事に挿入する方法についての記事はこちら。（↓）