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

ブロック構造 学習紹介~learning~

ころん、セミコロン、あやネころん。

今日はWordPressのテーマ「Cocoon」内にあるブロックの「タブボックス」を学習していくよ。

この記事は

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

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

タブボックス

できる事
「ラベル」16種類と「枠の色」「背景色」「文字色」各種の基本25色+拡張色6種類から組み合わせて設定できるよ。

ブロックの説明欄には

タブボックス

タブにメッセージ内容を伝えるための文字が書かれているボックスです。

Cocoonブロックのサイドバーの説明より

とありますのでタブの内容に沿った使い方をするといいでしょう。

細かく見ていきましょう。

スタイル設定では「ラベル」として16種類があります。

左上にラベルが付き下記のように英字になります。

  1. チェック→CHECK
  2. コメント→COMMENT
  3. ポイント→POINT
  4. ティップス→TIPS
  5. ヒント→HINT
  6. ピックアップ→PICKUP
  7. ブックマーク→BOOKMARK
  8. メモ→MEMO
  9. ダウンロード→DOWNLOAD
  10. ブレイク→BREAK
  11. Amazon→AMAZON
  12. OK→OK
  13. NG→NG
  14. GOOD→GOOD
  15. BAD→BAD
  16. プロフィール→PROFILE

ラベルが英字の場合はそのままですが文字の左側にあるアイコンが各種異なっています。

それでは上から見ていきましょう♪
見出しには「ラベルの名前」ボックスの中の文字は「設定した色」を記しているよ

チェック

デフォルト設定

コメント

枠の色/オレンジ

ポイント

背景色/アンバー

ティップス

文字色/緑

ヒント

枠の色/黄色 
背景色/淡い黄色

ピックアップ

背景色/キーカラー
文字色/白

ブックマーク

枠の色/赤色
文字色/ピンク

メモ

枠の色/深緑色
背景色/ライム
文字色/ディープオレンジ

ダウンロード

枠の色/青色
背景色/黄緑色
文字色/黒

ブレイク

枠の色/灰色
背景色/天色
文字色/深紫色

Amazon

枠の色/黒
背景色/灰色
文字色/白

OK

枠の色/茶色
背景色/緑色
文字色/ライム

NG

枠の色/赤色
背景色/紺色
文字色/黄色

GOOD

枠の色/ピンク
背景色/淡い赤
文字色/浅葱色

BAD

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

プロフィール

枠の色/キーカラー
背景色/淡い緑
文字色/キーカラー

全部で16種類いっぱいありましたね。お疲れ様です。
設定してて思ったことは、淡い系の色は文字色や枠の色では使いにくいって事ですかね。
薄くて読めなかったり枠が分からなかったりします。
ただし、ホームページの背景によっては問題ないと思います。

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

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

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

>アイコンボックス
>案内ボックス
>白抜きボックス
>付箋風ボックス
>タブボックス
>吹き出し
>ブログカード
>ボタン
>囲みボタン
>トグルボックス
>検索案内
>タイムライン
>アイコンリスト

記事No12

コメント

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