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

この記事ではラベルが付いた様々なBOX装飾のサンプルを紹介します。
基本は3系統で左枠に上・中・下とラベルが付くボックスとなります。
使用目的は1ブロックを囲み、その題名を付けるといった用途。
STEP1・STEP2・STEP3といった手順の解説など。
ただの囲みではなく、〇〇についての囲みです。と強調できるため使用頻度の高い装飾になるかと思われます。
引数一覧
今回のショートコードには以下の引数が用意されています。
ci_box_labelのショートコードに引数を指定します。
各引数の意味は上記を参考にして下さい。
組み合わせにより柔軟な装飾が可能となっております。
赤色の値は初期値です。
引数の簡単な説明
まずはじめに簡単な引数の説明をここで行います。
引数の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"
title="左上ラベル:緑色2" type="on" color="green2" bgcolor="green2"
title="左上ラベル:水色" type="on" color="cyan" bgcolor="cyan"
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"
title="左上ラベル:桃色2" type="on" color="pink2" shadow="on"
title="左上ラベル:桃色3" type="on" color="pink3" radius="on" shadow="on"
title="左上ラベル:茶色" type="on" color="brown" bgcolor="brown" radius="on"
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"
title="枠線上左上ラベル:緑色2" type="mid" color="green2" bgcolor="green2"
title="枠線上左上ラベル:水色" type="mid" color="cyan" bgcolor="cyan"
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"
title="枠線上左上ラベル:桃色2" type="mid" color="pink2" shadow="on"
title="枠線上左上ラベル:桃色3" type="mid" color="pink3" radius="on" shadow="on"
title="枠線上左上ラベル:茶色" type="mid" color="brown" bgcolor="brown" radius="on"
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"
title="枠内左上ラベル:緑色2" type="inl" color="green2" bgcolor="green2"
title="枠内左上ラベル:水色" type="inl" color="cyan" bgcolor="cyan"
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"
title="枠内左上ラベル:桃色2" type="inl" color="pink2" shadow="on"
title="枠内左上ラベル:桃色3" type="inl" color="pink3" radius="on" shadow="on"
title="枠内左上ラベル:茶色" type="inl" color="brown" bgcolor="brown" radius="on"
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"
title="枠内右上ラベル:緑色2" type="inr" color="green2" bgcolor="green2"
title="枠内右上ラベル:水色" type="inr" color="cyan" bgcolor="cyan"
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"
title="枠内右上ラベル:桃色2" type="inr" color="pink2" shadow="on"
title="枠内右上ラベル:桃色3" type="inr" color="pink3" radius="on" shadow="on"
title="枠内右上ラベル:茶色" type="inr" color="brown" bgcolor="brown" radius="on"
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"
title="枠線上左上ラベル:緑色2" type="mid" color="green2" bgcolor="green2" icon="fas fa-exclamation"
title="枠線上左上ラベル:水色" type="mid" color="cyan" bgcolor="cyan" icon="fas fa-exclamation-triangle"
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"
title="枠内左上ラベル:桃色2" type="inl" color="pink2" icon="fas fa-question" shadow="on"
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はoff
marginはoff
marginはon
marginはon
marginはoff
marginはoff
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つ目はアイコン付きボックス
色々と組み合わせて使ってみて下さい。
