ラベル付きボックス編 Citron WP Shortcodeサンプル

Citron WP Shortcode ラベル付きボックス イメージ画像

当サイトで配布しているCitron WP Shortcodeのラベル付きボックス装飾に関するショートコード一覧です。

この記事ではラベルが付いた様々なBOX装飾のサンプルを紹介します。

基本は3系統で左枠に上・中・下とラベルが付くボックスとなります。
使用目的は1ブロックを囲み、その題名を付けるといった用途。
STEP1・STEP2・STEP3といった手順の解説など。

ただの囲みではなく、〇〇についての囲みです。と強調できるため使用頻度の高い装飾になるかと思われます。

当プラグインでは他のCSS内容とバッティングしないために「ci-」という接頭辞を必ず付けております。色々と命名規則を独自に設けておりますので、頭の片隅にでも覚えておくと直接記載をする場合は少し楽になるかもしれません。

引数一覧

今回のショートコードには以下の引数が用意されています。

引数一覧
  • titleタイトル
  • typeタイプ on:上mid:枠内inl:中左inr:中右
  • colorテーマ色
  • bgcolor背景色
  • txt文字色 black
  • iconアイコン Awesomeタグ指定 ex)fas fa-check
  • radius丸み onoff
  • shadow影 onoff
  • stripe背景色をストライプ化 onoff
  • margin上の余白 onoff
解説

ci_box_labelのショートコードに引数を指定します。
各引数の意味は上記を参考にして下さい。
組み合わせにより柔軟な装飾が可能となっております。
赤色の値は初期値です。

ラベル文字は2行になるとデザインが崩れます。
必ず1行で収まる文字数にして下さい。

引数の簡単な説明

まずはじめに簡単な引数の説明をここで行います。

ラベル文字

引数のtitleはラベル文字となります。
ここで指定した文字がラベルに表示されます。

パターン

引数のtypeは装飾方法指定となります。詳細は下記サンプルにて。
予め用意された4つのデザインをここで指定します。

基本色

引数のcolorはテーマ色となっており、主体の配色指定となります。
ラベル部分と枠線がこの引数で指定した色で装飾されます。

背景色

引数のbgcolorは背景色です。初期値は白です。
ここで指定された色はボックス内の背景色となります。

文字色

引数のtxtは文字色です。初期値は黒です。
ここで指定された色はボックス内の文字全てに反映されます。

アイコン付与

引数のiconはアイコン追加です。詳細は下記にて。
Awesomeで決められたタグを指定するとラベルの最初に表示されます。

枠線を丸める

引数のradiusは枠線を丸めます。
この引数をonにすると枠線の四角が丸みを帯びます。

ボックスに影を付ける

引数のshadowはBOXに影を付けます。
この引数をonにすると枠線の縁に影が付き立体的に見えます。

背景をストライプ化

引数のstripeは背景のストライプ化です。
この引数をonにすると背景色に指定された色をストライプ化します。
色は基本色のみ(pink2など数字が付いたものは自動的にpinkになります)

上に余白を取る

引数のmarginはラベル部分の余白を取ります。詳細は下記にて。
この引数は通常使用ではonのままで良いのですが、余白を挟まず詰めて表示させたい時にon/offをその都度選べるように用意しました。

左上ラベルBOX

ここで使用するショートコード
[ci_box_label title="左上ラベル:赤色" type="on" color="red"]
左上ラベルBOX装飾
[/ci_box_label]
左上ラベル:赤色

title="左上ラベル:赤色" type="on" color="red"

左上ラベル:オレンジ

title="左上ラベル:オレンジ" type="on" color="orange"

左上ラベル:黄色

title="左上ラベル:黄色" type="on" color="yellow"

左上ラベル:緑色

title="左上ラベル:緑色" type="on" color="green" bgcolor="green"

左上ラベル:緑色2

title="左上ラベル:緑色2" type="on" color="green2" bgcolor="green2"

左上ラベル:水色

title="左上ラベル:水色" type="on" color="cyan" bgcolor="cyan"

左上ラベル:水色2

title="左上ラベル:水色2" type="on" color="cyan2" bgcolor="cyan2" txt="cyan2"

左上ラベル:青色

title="左上ラベル:青色" type="on" color="blue" bgcolor="blue" txt="blue"

左上ラベル:紫色

title="左上ラベル:紫色" type="on" color="purple" bgcolor="purple" txt="purple"

左上ラベル:桃色

title="左上ラベル:桃色" type="on" color="pink" radius="on"

左上ラベル:桃色2

title="左上ラベル:桃色2" type="on" color="pink2" shadow="on"

左上ラベル:桃色3

title="左上ラベル:桃色3" type="on" color="pink3" radius="on" shadow="on"

左上ラベル:茶色

title="左上ラベル:茶色" type="on" color="brown" bgcolor="brown" radius="on"

左上ラベル:白色2

title="左上ラベル:白色2" type="on" color="white2" shadow="on"

左上ラベル:黒色

title="左上ラベル:黒色" type="on" color="black" bgcolor="black" shadow="on"

左上ラベル:赤色

title="左上ラベル:赤色" type="on" color="red" bgcolor="red" radius="on" stripe="on"

左上ラベル:黄色

title="左上ラベル:黄色" type="on" color="yellow" bgcolor="yellow" shadow="on" stripe="on"

左上ラベル:緑色

title="左上ラベル:緑色" type="on" color="green" bgcolor="green" txt="green" radius="on" shadow="on" stripe="on"

解説

typeの値にonを指定した装飾例です。
指定なし・背景色・文字色・枠の丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。
ボックスの左上にラベルが有り、よく見るデザインかと思われます。

枠線上左上にラベルBOX

ここで使用するショートコード
[ci_box_label title="枠線上左上ラベル:赤色" type="mid" color="red"]
枠線上左上にラベルBOX装飾
[/ci_box_label]
枠線上左上ラベル:赤色

title="枠線上左上ラベル:赤色" type="mid" color="red"

枠線上左上ラベル:オレンジ

title="枠線上左上ラベル:オレンジ" type="mid" color="orange"

枠線上左上ラベル:黄色

title="枠線上左上ラベル:黄色" type="mid" color="yellow"

枠線上左上ラベル:緑色

title="枠線上左上ラベル:緑色" type="mid" color="green" bgcolor="green"

枠線上左上ラベル:緑色2

title="枠線上左上ラベル:緑色2" type="mid" color="green2" bgcolor="green2"

枠線上左上ラベル:水色

title="枠線上左上ラベル:水色" type="mid" color="cyan" bgcolor="cyan"

枠線上左上ラベル:水色2

title="枠線上左上ラベル:水色2" type="mid" color="cyan2" bgcolor="cyan2" txt="cyan2"

枠線上左上ラベル:青色

title="枠線上左上ラベル:青色" type="mid" color="blue" bgcolor="blue" txt="blue"

枠線上左上ラベル:紫色

title="枠線上左上ラベル:紫色" type="mid" color="purple" bgcolor="purple" txt="purple"

枠線上左上ラベル:桃色

title="枠線上左上ラベル:桃色" type="mid" color="pink" radius="on"

枠線上左上ラベル:桃色2

title="枠線上左上ラベル:桃色2" type="mid" color="pink2" shadow="on"

枠線上左上ラベル:桃色3

title="枠線上左上ラベル:桃色3" type="mid" color="pink3" radius="on" shadow="on"

枠線上左上ラベル:茶色

title="枠線上左上ラベル:茶色" type="mid" color="brown" bgcolor="brown" radius="on"

枠線上左上ラベル:白色2

title="枠線上左上ラベル:白色2" type="mid" color="white2" shadow="on"

枠線上左上ラベル:黒色

title="枠線上左上ラベル:黒色" type="mid" color="black" bgcolor="black" shadow="on"

枠線上左上ラベル:赤色

title="枠線上左上ラベル:赤色" type="mid" color="red" bgcolor="red" radius="on" stripe="on"

枠線上左上ラベル:黄色

title="枠線上左上ラベル:黄色" type="mid" color="yellow" bgcolor="yellow" shadow="on" stripe="on"

枠線上左上ラベル:緑色

title="枠線上左上ラベル:緑色" type="mid" color="green" bgcolor="green" txt="green" radius="on" shadow="on" stripe="on"

解説

typeの値にmidを指定した装飾例です。
指定なし・背景色・文字色・枠の丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。
ボックスの枠線左上にラベルが表示されます。

枠内左上ラベルBOX

ここで使用するショートコード
[ci_box_label title="枠内左上ラベル:赤色" type="inl" color="red"]
枠内左上ラベルBOX装飾
[/ci_box_label]
枠内左上ラベル:赤色

title="枠内左上ラベル:赤色" type="inl" color="red"

枠内左上ラベル:オレンジ

title="枠内左上ラベル:オレンジ" type="inl" color="orange"

枠内左上ラベル:黄色

title="枠内左上ラベル:黄色" type="inl" color="yellow"

枠内左上ラベル:緑色

title="枠内左上ラベル:緑色" type="inl" color="green" bgcolor="green"

枠内左上ラベル:緑色2

title="枠内左上ラベル:緑色2" type="inl" color="green2" bgcolor="green2"

枠内左上ラベル:水色

title="枠内左上ラベル:水色" type="inl" color="cyan" bgcolor="cyan"

枠内左上ラベル:水色2

title="枠内左上ラベル:水色2" type="inl" color="cyan2" bgcolor="cyan2" txt="cyan2"

枠内左上ラベル:青色

title="枠内左上ラベル:青色" type="inl" color="blue" bgcolor="blue" txt="blue"

枠内左上ラベル:紫色

title="枠内左上ラベル:紫色" type="inl" color="purple" bgcolor="purple" txt="purple"

枠内左上ラベル:桃色

title="枠内左上ラベル:桃色" type="inl" color="pink" radius="on"

枠内左上ラベル:桃色2

title="枠内左上ラベル:桃色2" type="inl" color="pink2" shadow="on"

枠内左上ラベル:桃色3

title="枠内左上ラベル:桃色3" type="inl" color="pink3" radius="on" shadow="on"

枠内左上ラベル:茶色

title="枠内左上ラベル:茶色" type="inl" color="brown" bgcolor="brown" radius="on"

枠内左上ラベル:白色2

title="枠内左上ラベル:白色2" type="inl" color="white2" shadow="on"

枠内左上ラベル:黒色

title="枠内左上ラベル:黒色" type="inl" color="black" bgcolor="black" shadow="on"

枠内左上ラベル:赤色

title="枠内左上ラベル:赤色" type="inl" color="red" bgcolor="red" radius="on" stripe="on"

枠内左上ラベル:黄色

title="枠内左上ラベル:黄色" type="inl" color="yellow" bgcolor="yellow" shadow="on" stripe="on"

枠内左上ラベル:緑色

title="枠内左上ラベル:緑色" type="inl" color="green" bgcolor="green" txt="green" radius="on" shadow="on" stripe="on"

解説

typeの値にinlを指定した装飾例です。
指定なし・背景色・文字色・枠の丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。
ボックスの枠内左上にラベルが表示されます。

枠内右上ラベルBOX

ここで使用するショートコード
[ci_box_label title="枠内右上ラベル:赤色" type="inr" color="red"]
枠内右上ラベルBOX装飾
[/ci_box_label]
枠内右上ラベル:赤色

title="枠内右上ラベル:赤色" type="inr" color="red"

枠内右上ラベル:オレンジ

title="枠内右上ラベル:オレンジ" type="inr" color="orange"

枠内右上ラベル:黄色

title="枠内右上ラベル:黄色" type="inr" color="yellow"

枠内右上ラベル:緑色

title="枠内右上ラベル:緑色" type="inr" color="green" bgcolor="green"

枠内右上ラベル:緑色2

title="枠内右上ラベル:緑色2" type="inr" color="green2" bgcolor="green2"

枠内右上ラベル:水色

title="枠内右上ラベル:水色" type="inr" color="cyan" bgcolor="cyan"

枠内右上ラベル:水色2

title="枠内右上ラベル:水色2" type="inr" color="cyan2" bgcolor="cyan2" txt="cyan2"

枠内右上ラベル:青色

title="枠内右上ラベル:青色" type="inr" color="blue" bgcolor="blue" txt="blue"

枠内右上ラベル:紫色

title="枠内右上ラベル:紫色" type="inr" color="purple" bgcolor="purple" txt="purple"

枠内右上ラベル:桃色

title="枠内右上ラベル:桃色" type="inr" color="pink" radius="on"

枠内右上ラベル:桃色2

title="枠内右上ラベル:桃色2" type="inr" color="pink2" shadow="on"

枠内右上ラベル:桃色3

title="枠内右上ラベル:桃色3" type="inr" color="pink3" radius="on" shadow="on"

枠内右上ラベル:茶色

title="枠内右上ラベル:茶色" type="inr" color="brown" bgcolor="brown" radius="on"

枠内右上ラベル:白色2

title="枠内右上ラベル:白色2" type="inr" color="white2" shadow="on"

枠内右上ラベル:黒色

title="枠内右上ラベル:黒色" type="inr" color="black" bgcolor="black" shadow="on"

枠内右上ラベル:赤色

title="枠内右上ラベル:赤色" type="inr" color="red" bgcolor="red" radius="on" stripe="on"

枠内右上ラベル:黄色

title="枠内右上ラベル:黄色" type="inr" color="yellow" bgcolor="yellow" shadow="on" stripe="on"

枠内右上ラベル:緑色

title="枠内右上ラベル:緑色" type="inr" color="green" bgcolor="green" txt="green" radius="on" shadow="on" stripe="on"

解説

typeの値にinrを指定した装飾例です。
指定なし・背景色・文字色・枠の丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。
ボックスの枠内右上にラベルが表示されます。

アイコン付きラベルBOX

ここで使用するショートコード
[ci_box_label title="枠内右上ラベル:赤色" type="on" color="red" icon="fas fa-arrow-circle-right"]
アイコン付きラベルBOX
[/ci_box_label]
枠線上左上ラベル:赤色

title="枠線上左上ラベル:赤色" type="on" color="red" icon="fas fa-arrow-circle-right"

枠線上左上ラベル:オレンジ

title="枠線上左上ラベル:オレンジ" type="on" color="orange" icon="fas fa-check"

枠線上左上ラベル:黄色

title="枠線上左上ラベル:黄色" type="on" color="yellow" icon="fas fa-chevron-right"

枠線上左上ラベル:緑色

title="枠線上左上ラベル:緑色" type="on" color="green" bgcolor="green" icon="fas fa-edit"

枠線上左上ラベル:緑色2

title="枠線上左上ラベル:緑色2" type="mid" color="green2" bgcolor="green2" icon="fas fa-exclamation"

枠線上左上ラベル:水色

title="枠線上左上ラベル:水色" type="mid" color="cyan" bgcolor="cyan" icon="fas fa-exclamation-triangle"

枠線上左上ラベル:水色2

title="枠線上左上ラベル:水色2" type="mid" color="cyan2" bgcolor="cyan2" txt="cyan2" icon="fas fa-feather"

枠線上左上ラベル:青色

title="枠線上左上ラベル:青色" type="mid" color="blue" bgcolor="blue" txt="blue" icon="fas fa-hand-point-right"

枠内左上ラベル:紫色

title="枠内左上ラベル:紫色" type="inl" color="purple" bgcolor="purple" txt="purple" icon="fas fa-lightbulb"

枠内左上ラベル:桃色

title="枠内左上ラベル:桃色" type="inl" color="pink" icon="fas fa-pencil-alt" radius="on"

枠内左上ラベル:桃色2

title="枠内左上ラベル:桃色2" type="inl" color="pink2" icon="fas fa-question" shadow="on"

枠内左上ラベル:桃色3

title="枠内左上ラベル:桃色3" type="inl" color="pink3" icon="fas fa-search" radius="on" shadow="on"

枠内右上ラベル:茶色

title="枠内右上ラベル:茶色" type="inr" color="brown" icon="fas fa-wrench" bgcolor="brown" radius="on"

枠内右上ラベル:黒色

title="枠内右上ラベル:黒色" type="inr" color="black" icon="fas fa-skull" bgcolor="black" shadow="on"

枠内右上ラベル:赤色

title="枠内右上ラベル:赤色" type="inr" color="red" icon="fas fa-times" bgcolor="red" radius="on" stripe="on"

枠内右上ラベル:黄色

title="枠内右上ラベル:黄色" type="inr" color="yellow" icon="fas fa-info-circle" bgcolor="yellow" shadow="on" stripe="on"

解説

引数のiconを指定した装飾例です。
ラベルの横にアイコンが表示されワンポイントアクセントになります。
アイコンがあると見栄えが良くなるため積極的に使うのをおすすめします。
初期搭載アイコン・追加方法などは下記の説明リンクをご覧ください。

余白について

引数のmarginはtypeのonmidを指定時にのみ有効です。

基本的にボックスの余白は上に対してmarginを指定して取っているのですが、ラベル付きBOXの場合はデザイン上、更にラベル部分の余白を取っております。

つまりラベル部分+行間の2つ余白が多めに取られています。

今回、この引数をoffにしますと行間部分の余白が除去され詰めた感じに表示されます。実際にサンプルを見ると一目瞭然でしょう。

margin:on

marginはon

margin:off

marginはoff

margin:off

marginはoff

margin:on

marginはon

margin:on

marginはon

margin:off

marginはoff

margin:off

marginはoff

margin:on

marginはon

midタイプの装飾は少し分かりづらいかもしれませんがonタイプの装飾は行間が詰まっているのが一目で分かるかと思います。

使用する際にラベル部分の余白だけで十分と思う場合にはmarginをoffに指定してご利用下さい。

使用例

今回のラベル付きボックスを使った使用例を少しだけ紹介します。

ラベルが付いているとボックス内に記載してある事柄は○○について説明しています。というように一目で読者に伝えることが可能になり、シンプルボックスにはない訴求方法でより目立たせることが出来ます。

当サイトではSTEP1~STEP4みたいなチャート形式で使ったり。
解説ボックスとして活用したり。
リスト装飾と併せて使用することが多いですね。

解説

解説で使用
[ci_box_label title="解説" type="mid" icon="fas fa-info-circle" color="yellow" radius="on"]
Citron WP Shortcodeの解説ページで使用しているコード
[/ci_box_label]
解説

Citron WP Shortcodeの解説ページで使用しているコード
インフォマークのアイコンを必ず使用。
一目で解説のボックス枠だというのが分かりますよね。

リスト形式まとめ

リスト形式のまとめで使用
[ci_box_label title="まとめ" type="mid" icon="fas fa-fw fa-pencil-alt" color="blue" radius="on"]
[ci_list type="mark" color="blue" icon="chevron-circle-right" txt="black" line="dashed"]
<ul>
<li>まとめ記事1</li>
<li>まとめ記事2</li>
</ul>
[/ci_list]
[/ci_box_label]
まとめ
  • リストとラベル付きボックスの合わせ技
  • まとめは箇条書きで書き
  • それを枠線で囲み、まとめだとラベルで明確に伝えてます
まとめ
  • リストとラベル付きボックスの合わせ技
  • まとめは箇条書きで書き
  • それを枠線で囲み、まとめだとラベルで明確に伝えてます

入れ子

シンプルボックスを中に
[ci_box_label title="入れ子ボックス" type="on" icon="fas fa-wrench" color="brown" bgcolor="brown" shadow="on"]

[ci_box_simple type="left" color="orange" txt="orange"]
1つ目のシンプルボックス
[/ci_box_simple]

[ci_box_simple type="top" color="yellow" txt="yellow" sharp="on"]
2つ目のシンプルボックス
[/ci_box_simple]

[ci_box_icon fill="on" color="green" icon="feather" txt="green" shadow="on"]
3つ目のアイコン付きボックス
[/ci_box_icon]

[/ci_box_label]
入れ子ボックス

Citron WP Shortcodeはショートコードの入れ子に対応しております。
ラベルボックスの中にシンプルボックスを記入するとこの様に。

1つ目のシンプルボックス
茶色のラベルボックスにオレンジのシンプルボックスを挿入しています。

2つ目のボックス

2つ目のシンプルボックス
茶色のラベルボックスに黄色のシンプルボックスを挿入しています。

3つ目はアイコン付きボックス

3つ目はアイコン付きボックス
ヽ(・∀・ )ノ キャッ キャッ

色々と組み合わせて使ってみて下さい。

関連記事

  1. テキスト装飾・ラベル装飾編 Citron WP Shortcodeサンプル
    テキスト装飾・ラベル装飾編 Citron WP Shortcodeサンプル
  2. シンプルボックス編 Citron WP Shortcodeサンプル アイキャッチ
    シンプルボックス編 Citron WP Shortcodeサンプル

PHPラボ オリジナルツール

無料配布中

当サイトの記事装飾は全てWPのオリジナルプラグインで行ってます。
インストールするとコピペで簡単に綺麗な記事が作成可能に♪
現在無料配布中・あなたのサイトも綺麗に装飾しませんか?

画像をクリックで配布ページへ
Citron WP Shortcode