～あやネころん～
ころん、セミコロン、妖猫竜~あやネころん~。
今日はWordPressのテーマ「Cocoon」内のCocoon汎用ブロックの「タブ見出しボックス」を学習していくよ。
この記事は
って人向きに発信してるよ。一緒に学んで行こう。
上部にアイコンのついたタブ見出しのあるボックスを装飾できる。（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種類。
＞見出しボックス
＞タブ見出しボックス
＞ラベルボックス
記事No22
コメント