【Cocoon汎用ブロック】「ラベルボックス」文章を飾る装飾系のブロックを学習しよう【WorldPress】

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

ころん、セミコロン、妖猫竜~あやネころん~。
今日はWordPressのテーマ「Cocoon」内のCocoon汎用ブロックの「ラベルボックス」を学習していくよ。

この記事は

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

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

できる事

左上部にアイコンのついたラベルのあるボックスを装飾できる。(53種類)
枠の色、背景色、文字色各々基礎色25種+拡張色6種が使用可能。
※淡い系の色を文字色にするとラベルを目立たせるため背景色を考える必要あり
※枠の色を白にしても枠とアイコンは別色なのでアイコンは同期して消えない。

ラベルボックス

スタイル設定
アイコンが53種類

色設定
枠の色
背景色
文字色
各々基礎色25種+拡張色6種

見出しボックス
タブ見出しボックス
構成自体は同じですね。

枠の色が白でもアイコンと同期せずちゃんと見えますね。
文字色を白にするとなにやらぽっかり空いてしまいますが。

ブロックの説明文にはこう記載が御座います。

ラベルボックス
ボックスに「ラベル見出し」を入力できる汎用ボックスです。

Cocoonブロック内の説明より引用
妖猫竜<br>~アヤネコロン~
妖猫竜
~アヤネコロン~

それではラベルボックスのアイコンを、
53種1行ごとにみていきましょう。

1行目 デフォルト~7種目

見出し
見出し
見出し
見出し
見出し
見出し
見出し

2行目 8~14種目

見出し

枠の色/ディープオレンジ

見出し

枠の色/ディープオレンジ

見出し

枠の色/ディープオレンジ

見出し

枠の色/ディープオレンジ

見出し

枠の色/ディープオレンジ

見出し

枠の色/ディープオレンジ

見出し

枠の色/ディープオレンジ

3行目 15~21種目

見出し

背景色/灰色

見出し

背景色/灰色

見出し

背景色/灰色

見出し

背景色/灰色

見出し

背景色/灰色

見出し

背景色/灰色

見出し

背景色/灰色

4行目 22~28種目

見出し

文字色/茶色

見出し

文字色/茶色

見出し

文字色/茶色

見出し

文字色/茶色

見出し

文字色/茶色

見出し

文字色/茶色

見出し

文字色/茶色

5行目 29~35種目

見出し

枠の色/天色
背景色/ライム

見出し

枠の色/天色
背景色/ライム

見出し

枠の色/天色
背景色/ライム

見出し

枠の色/天色
背景色/ライム

枠の色/天色
背景色/ライム

見出し

枠の色/天色
背景色/ライム

見出し

枠の色/天色
背景色/ライム

6行目 36~42種目

見出し

枠の色/深緑色
文字色/アンバー

見出し

枠の色/深緑色
文字色/アンバー

見出し

枠の色/深緑色
文字色/アンバー

見出し

枠の色/深緑色
文字色/アンバー

見出し

枠の色/深緑色
文字色/アンバー

見出し

枠の色/深緑色
文字色/アンバー

見出し

枠の色/深緑色
文字色/アンバー

7行目 43~50種目

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

見出し

背景色/緑色
文字色/紺色

8行目 51~53種目

見出し

枠の色/赤色
背景色/淡い黄色
文字色/青色

見出し

枠の色/赤色
背景色/淡い黄色
文字色/青色

見出し

枠の色/赤色
背景色/淡い黄色
文字色/青色

まとめ

できる事

左上部にアイコンのついたラベルのあるボックスを装飾できる。(53種類)
枠の色、背景色、文字色各々基礎色25種+拡張色6種が使用可能。
※淡い系の色を文字色にするとラベルを目立たせるため背景色を考える必要あり
※枠の色を白にしても枠とアイコンは別色なのでアイコンは同期して消えない。

今回は「ラベルボックス」についてみてきました。
次回は「Cocoon汎用ブロックまとめ」を予定してるよ。

次回の「Cocoon汎用ブロックまとめ」であいましょう。

Cocoon汎用ブロック】シリーズは全部で3種類。

記事No23

コメント

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