【Cocoon2020】簡単リストアイコンカスタマイズCSS変更なし!

ワードプレス画面 ワードプレスCocoon

Cocoonの標準リスト表示

グーテンベルグエディタでのリストの出し方

リストのボタンは下の画像の〇に+のマークを押して、“よく使うもの”やその下の“一般ブロック”に入っています。

ワードプレスCocoonリスト

リストのボタンの変え方

文字の前にくるマークをドット(・)にするか番号(1,2,3…)にするかは上の画像ので囲った部分で変更することができます。

ドットを使用したリストはこちら↓

  • リスト
  • リスト

番号を選択した時は下のように表示されます。

  1. リスト
  2. リスト

Cocoonリストのカスタマイズ方法

こちらの方法だとCSSを変更することなく

色も変えられます!
枠もつけられます!
背景に色も!!

このようなアイコンに変更することができます。順番に見ていきましょう。

アイコンリストを選択

方法は簡単です。

ワードプレスCocoonアイコンリスト

〇に+のマークを押して“Cocoonブロック”を選択。その中の“アイコンリスト”をクリックします。

ワードプレスCocoonリストカスタマイズ画面

すると上の画像のような状態になると思います。この状態で画面右側の“ブロック”エリアからアイコンを選んだり、アイコンの色を変えたりできます。色設定の下には枠の色や背景を設定できる場所もあります。

これらを組み合わせると、先ほどのようないろいろなリスト表示ができるようになります!

設定は以上です!

最後に1つ注意していただきたいこと

“アイコンリスト”を選択していても下のような状態にしかならない!(リストのカスタマイズができない!)ということが出てくるかと思います。

ワードプレスCocoonリスト

これは、リストの部分(下の画像のの部分)を選択してしまっているのが原因です。

ワードプレスCocoonリスト

の部分をクリックすれば、カスタマイズができる状態に戻ります。

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