アコーディオン(トグル)の見出しを左詰めにする方法【Cocoon】

Cocoon
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

この記事の内容は、アコーディオン(トグル)の見出しをcssで左詰めにする方法についてです。

アコーディオン(トグル)の設置

WordPress『Cocoon(コクーン)』には、クリックで表示状態を変えることができる「アコーディオン(トグル)」を挿入できる機能が はじめから備わっています。

「ブロック挿入ツール」から「アコーディオン(トグル)」を選択すると…

アコーディオンが挿入されます。

見出し部分をクリックするとアコーディオンが開き、下の部分にはテキストなどのブロックを挿入できます。

アコーディオンブロック全体を選択した状態で、色設定を変更すれば…

枠線や背景などを好きな色にすることができます。(色設定などが表示されていない場合は、右上の歯車のマークをクリック。)

スポンサーリンク

見出しを左詰めにする方法

好みもあるとは思いますが、下のように見出しを左詰めにしたい場合もあるでしょう。(サイトのデザインにもよる。)

「外観」>「テーマファイルエディター」から、「Cocoon Child(子テーマ)」の「style.css」に以下のコードを追記し「ファイルを更新」をクリックします。

/************************************
** アコーディオンの見出しを左詰めにする
************************************/
.toggle-button {
	text-align: left;
}

以後、挿入したアコーディオンの見出し部分はすべて左詰めになります。

見出しのアイコンを変更・削除する方法【別記事】

見出しのアイコンを変更や削除する方法についての記事を追加しました。(↓)

タイトルとURLをコピーしました