只今、サイトリニューアル中です。過去記事はこちらから確認できます
PR

Cocoonのアコーディオン（トグル）のスタイルを編集する

Web作成

Cocoonのアコーディオン（トグル）について

Cocoonには標準でアコーディン（トグル）のブロックがついていますが、スキンによってアイコンや色などが違います

この記事ではアコーディオンのスタイルの編集方法について紹介していきます

このサイトのスキンは「grayish」を使用しています

基本的な色の編集

挿入したアコーディオンブロックの「タイトル部分」をクリックすると右のサイドバーに「色設定」の項目が出ます

ここでそれぞれのアコーディオンの基本的なスタイルが変更できます

テスト

テスト２

スキンの種類によって？「文字色」は編集画面では反映されません

一旦下書きをして「新しいタブでプレビュー」で確認してみてください

好きな色に変更したい場合

「ボーダー色、背景色、文字色」それぞれ選択した時にでる色の見本で、上部にある窓をクリック
カーソルを移動させながらお好みの色に変更できます

クリックした時に表示される6桁のRGBを直接編集（コピペなど）できます

アコーディオンのタイトルの色を変更する

全てのアコーディオンで統一

.cocoon-block-toggle.has-border-color.not-nested-style>.toggle-button{
  color:#f39800;
}

個別に変更する

各アコーディオンのタイトルの変更したい部分を左クリックを押しながら範囲を選択

表示された下矢印をクリック

「ハイライト」をクリックしお好みの色に変更

範囲を分けた場合

タイトル部分を小分けで色分けすることもできます

タイトル部分を左寄せにする

これはよくある方法です

.toggle-button {
　text-align: left;
}

特定のページのみ適用

style.cssに追加する

Cocoonを使っている場合は記事一覧にIDが表示されるので、そのIDを参照にしてください

.pageid=N .toggle-button {
　text-align: left;
}

Nの部分はページIDです

記事毎に追加する

Cocoonを使っている場合は記事編集ページの下部に「カスタムCSS」があるのでそこに記入する

.toggle-button {
　text-align: left;
}

アイコンを変更する

Cocoonの殆どのスキンは「+」「-」になっていると思います
このアイコンを好きなアイコンに変更することができます

このアイコンは Font Awesome を使っていてCocoonの場合、バージョンは５になります

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome
Search all the Version 5 icons and match your project with a look and feel that's just right. Better...
fontawesome.com
/* 閉じてる時 */
.toggle-button::before{
  content: '\f103'; 
}
/* 開いてる時 */
 .toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f102";
}

閉じている時と開いた時のアイコンを変更する

Font Awesomeの矢印系のアイコンを探したい場合は検索窓に「arrow」を入力してみてください

アイコンの色を変更する

/* 閉じている時 */
.toggle-button::before{
  content : '\f103';
  color:#e08600;
}
/* 開いている時 */
.toggle-checkbox:checked ~ .toggle-button::before{
  content : '\f102';
}

アコーディオンを開いた時の文字を入れ替える

開く前の文字は直接変更してください

デフォルト：アコーディオンの見出し

「開く」や「〇〇を開く」など

閉じている時と開いた時の文字を変更する

閉じている時の文字は直接変更できますが、開いた時の文字を変えます

.toggle-checkbox:checked ~ .toggle-button{
  font-size:0;
}
.toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f077";
  font-size:14px;
}
.toggle-checkbox:checked ~ .toggle-button::after{
  content: '閉じる';
  font-size:16px;
  margin-left:-3px;
}
説明
.toggle-checkbox:checked ~ .toggle-button{
  font-size:0;
}

アコーディオンを開いた時に一旦アイコンを含めた文字を見えなくします
　※「display:none」を使うとブロックそのものが消えてしまいます

.toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f077";
  font-size:14px;
}

元のアイコン、若しくは任意のアイコンを指定表示させます
「 content: “\f077”; 」はスキン「grayish」でのアイコン
「font-size:14px;」 この部分でアイコンを表示させます

.toggle-checkbox:checked ~ .toggle-button::after{
  content: '閉じる';
  font-size:16px;
  margin-left:-3px;
}

アイコンの後ろに文字を追加します

「.toggle-button::after」　になっていることに注意

アコーディオンを開いている時の文字　「閉じる」など
「font-size:16px;」 一旦「font-size:0」にしているのでここで元の大きさに戻します

「margin-left:-3px; 」　「::after」を使っているのでアイコンとの隙間調整
アイコンの大きさによって変わることもあります
気にならない方は無視してもいいです

サイズやアイコンの種類については各自のサイトに合わせて調整してください

まとめた例

上記では個別に紹介していましたが、まとめた例を載せておきます　参考にしてください

.toggle-button {
　text-align: left;
}
/* 閉じている時のアイコン　*/
.toggle-button::before{
  content : '\f103';
  color:#e08600;
}

/* 開いている時一旦　文字の大きさを0にし見えなくする */
.toggle-checkbox:checked ~ .toggle-button{
  font-size:0;
}

/* 開いている時のアイコンを追加　見えるようにサイズも調整 */
.toggle-checkbox:checked ~ .toggle-button::before{
  content : '\f102';
  font-size:13px;
}

/* アイコンの後ろに文字を追加　*/
.toggle-checkbox:checked ~ .toggle-button::after{
  content: '閉じる';
  font-size:16px;
  margin-left:-5px;
}

まとめた例です

コメント

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