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

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

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

この記事は

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

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

できる事

上部にアイコンのついたタブ見出しのあるボックスを装飾できる。(53種類)
枠の色、背景色、文字色各々基礎色25種+拡張色6種が使用可能。
※枠の色を白にするとアイコンと同化し見えなくなる。
※淡い系の色を文字色にすると見出しを目立たせるため枠や背景色を考える必要あり

タブ見出しボックス

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

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

見出しボックスと構成自体は同じですね。
やはり枠の色が白だと枠とアイコンが同期して見えなくなってますね。

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

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

Cocoonブロックの説明より引用

では53種類のアイコンをそれぞれみていきましょう。

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

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

2行目 8~14種目

見出し

枠の色/緑色

見出し

枠の色/緑色

見出し

枠の色/緑色

見出し

枠の色/緑色

見出し

枠の色/緑色

見出し

枠の色/緑色

見出し

枠の色/緑色

3行目 15~21種目

見出し

背景色/淡い黄色

見出し

背景色/淡い黄色

見出し

背景色/淡い黄色

見出し

背景色/淡い黄色

見出し

背景色/淡い黄色

見出し

背景色/淡い黄色

見出し

背景色/淡い黄色

4行目 22~28種目

見出し

文字色/赤色

見出し

文字色/赤色

見出し

文字色/赤色

見出し

文字色/赤色

見出し

文字色/赤色

見出し

文字色/赤色

見出し

文字色/赤色

5行目 29~35種目

見出し

枠の色/紫色
文字色/紫色

見出し

枠の色/紫色
文字色/紫色

見出し

枠の色/紫色
文字色/紫色

見出し

枠の色/紫色
文字色/紫色

枠の色/紫色
文字色/紫色

見出し

枠の色/紫色
文字色/紫色

見出し

枠の色/紫色
文字色/紫色

6行目 36~42種目

見出し

枠の色/灰色
背景色/浅葱色

見出し

枠の色/灰色
背景色/浅葱色

見出し

枠の色/灰色
背景色/浅葱色

見出し

枠の色/灰色
背景色/浅葱色

見出し

枠の色/灰色
背景色/浅葱色

見出し

枠の色/灰色
背景色/浅葱色

見出し

枠の色/灰色
背景色/浅葱色

7行目 43~50種目

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

見出し

背景色/ライム
文字色/青色

8行目 51~53種目

見出し

枠の色/茶色
背景色/淡い青
文字色/オレンジ

見出し

枠の色/茶色
背景色/淡い青
文字色/オレンジ

見出し

枠の色/茶色
背景色/淡い青
文字色/オレンジ

アイコン種類53種類すべてみてきました。
枠の色を白にすると枠とアイコンが同化してしまうのでご注意ください。
淡い系の色を文字色にすると目立たないので枠の色や背景色を合わせて考える必要がありますね。

まとめ

できる事

上部にアイコンのついたタブ見出しのあるボックスを装飾できる。(53種類)
枠の色、背景色、文字色各々基礎色25種+拡張色6種が使用可能。
※枠の色を白にするとアイコンと同化し見えなくなる。
※淡い系の色を文字色にすると見出しを目立たせるため枠や背景色を考える必要あり

今回は「タブ見出しボックス」についてみてきました。
次回は「ラベルボックス」を予定してるよ。

次回の【Cocoon汎用ブロック】シリーズであいましょう。

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

Cocoon汎用ボックス

>見出しボックス
>タブ見出しボックス
>ラベルボックス

記事No22

コメント

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