【Cocoonブロック】「アイコンリスト」文章を飾る装飾系のブロックを学習しよう【WorldPress】

ブロック構造 学習紹介~learning~
妖猫竜
~あやネころん~

ころん、セミコロン、妖猫竜~あやネころん~。

今日はWordPressのテーマ「Cocoon」内のCocoonブロックの「アイコンリスト」を学習していくよ。

この記事は

記事を書いてるんだけど装飾を増やしたいけど分からない。
どれでどんな装飾ができるのかわからない。

って人向きに発信してるよ。一緒に学んで行こう。

できる事

・39種類から選んだアイコンをリストの先頭に装飾できる。
※ただし番号付きリストの場合アイコンにはならない。
・アイコン色・ボーダー色・背景色・文字色で、
各々基礎色25種+拡張色6種使用可能。
(39*25*25*25*25で15234375通り1523万4375も組み合わせがあるんだね)

アイコンリスト

スタイル設定
アイコン_39種

色設定
アイコン色
ボーダー色
背景色
文字色
各々基礎色25種+拡張色6種

他の色設定と異なるのはアイコン色がある事だろうか。
アイコン39種は上部の画像ででているけれど実際の表示をみていこう。
※一つのリストでアイコン39種類は出せなかったので色を変えていきますね。

1行目 デフォルト~8個目

デフォルト

タイトルがある場合は入力
  • リストを入力

2個目 アイコン色/キーカラー

2

3個目 アイコン色/赤色

3

4個目 アイコン色/ピンク

4

5個目 アイコン色/紫色

5

6個目 アイコン色/深紫色

6

7個目 アイコン色/紺色

7

8個目 アイコン色/青色

8

2行目 9~16個目

9個目 アイコン色/天色

9

10個目 アイコン色/浅葱色

10

11個目 アイコン色/深緑色

11

12個目 アイコン色/緑色

12

13個目 アイコン色/黄緑色

13

14個目 アイコン色/ライム

14

15個目 アイコン色/黄色

15

16個目 アイコン色/アンバー

16

3行目 17~23

17個目 アイコン色/オレンジ

17

18個目 アイコン色/ディープオレンジ

18

19個目 アイコン色/茶色

19

20個目 アイコン色/灰色

20

21個目 アイコン色/黒

21

22個目 アイコン色/白 背景色/灰色

22

23個目 アイコン色/淡い青

23

4行目  24~31個目

24個目 アイコン色/淡い黄色

24

25個目 アイコン色/淡い赤

25

26個目 アイコン色/淡い緑

26

27個目 ボーダー色/キーカラー

27

28個目 ボーダー色/赤色

28

29個目 ボーダー色/ピンク

29

30個目 ボーダー色/紫色

30

31個目 ボーダー色/深紫色

31

4行目 32~38個目

32個目 背景色/白

32

33個目 背景色/淡い青

33

34個目 背景色/淡い黄色

34

35個目 背景色/淡い赤

35

36個目 背景色/淡い緑

36

37個目 背景色/オレンジ

37

38個目 背景色/ディープオレンジ

38

5行目 39個目

39個目 アイコン色・ボーダー色・文字色/ピンク 背景色/淡い赤

39
番号付きリストの場合

どうやら、番号付きリストの場合はアイコンに変化はしないようだね。
アイコンリストにするならちゃんと箇条書きリストにしておこう。
あと、リスト上部のタイトルの部分は文字色で変更する部分になってたよ。

まとめ

できる事

・39種類から選んだアイコンをリストの先頭に装飾できる。
※ただし番号付きリストの場合アイコンにはならない。
・アイコン色・ボーダー色・背景色・文字色で、
各々基礎色25種+拡張色6種使用可能。
(39*25*25*25*25で15234375通り1523万4375も組み合わせがあるんだね)

今回は「アイコンリスト」についてみてきました。
次回は「見出しボックス」を予定してるよ。

次回の【Cocoon汎用ブロック】「見出しボックス」であいましょう。

Cocoonブロック】シリーズは全部で13種類

今回までで一通り終わりました。次回からは【Cocoon汎用ブロック】です。

記事No20

コメント

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