当サイトで配布しているCitron WP Shortcodeのシンプルなボックス装飾に関するショートコード一覧です。
URLが見つかりません。この記事では簡単なBOX装飾のサンプルを紹介します。
ただの線で囲った枠や、背景色を塗りつぶした枠。
丸みを帯びたボタン風のボックス。浮き出た強調ボックス。
ちょっとしたアクセントとして横線がある枠など。
シンプルで使用頻度の高い基本的なBOXが多いので是非活用してみて下さい。
[toc]
引数一覧
今回のショートコードには以下の引数が用意されています。
ci_box_simpleのショートコードに引数を指定します。
各引数の意味は上記を参考にして下さい。
組み合わせにより柔軟な装飾が可能となっております。
赤色の値は初期値です。
枠線のみのBOX
[ci_box_simple color="red" bgcolor="white" border="on"]
枠線のみのBOX装飾
[/ci_box_simple]color="red" bgcolor="white" border="on"
color="orange" bgcolor="white" border="on"
color="yellow" bgcolor="white" border="on"
color="green" bgcolor="white" border="on"
color="green2" bgcolor="white" border="on"
color="cyan" bgcolor="white" border="on"
color="cyan2" bgcolor="white" border="on"
color="blue" bgcolor="white" border="on"
color="purple" bgcolor="white" border="on" sharp="on"
color="pink" bgcolor="white" border="on" sharp="on"
color="pink2" bgcolor="white" border="on" sharp="on"
color="pink3" bgcolor="white" border="on" sharp="on"
color="brown" bgcolor="white" border="on" sharp="on"
color="white2" bgcolor="white" border="on" sharp="on"
color="black" bgcolor="white" border="on" sharp="on"
枠線の色はcolorで指定。背景色のbgcolorはwhiteで固定。
枠の太さはsharpのonが1pxでoffは2pxとなっております。
線で囲むだけですので最もシンプルなBOX装飾ですね。
背景のみのBOX
[ci_box_simple color="red"]
背景色のみのBOX装飾
[/ci_box_simple]color="red"
color="orange"
color="yellow"
color="green"
color="green2"
color="cyan"
color="cyan2"
color="blue"
color="purple"
color="pink"
color="pink2"
color="pink3"
color="brown"
color="black"
colorのみを指定で枠線もない背景色のみのBOX装飾となります。
見た目が綺麗でスッキリとしてますので色々な場面で使えるでしょう。
color="red" txt="red"
color="green" txt="green"
color="purple" txt="purple"
背景色と同じ色を文字色に指定すると統一感が出て綺麗に見えます。
枠線＋背景のBOX
[ci_box_simple color="red" border="on"]
枠線＋背景のBOX装飾
[/ci_box_simple]color="red" border="on"
color="orange" border="on"
color="yellow" border="on"
color="green" border="on"
color="green2" border="on"
color="cyan" border="on"
color="cyan2" border="on"
color="blue" border="on"
color="purple" border="on" sharp="on"
color="pink" border="on" sharp="on"
color="pink2" border="on" sharp="on"
color="pink3" border="on" sharp="on"
color="brown" border="on" sharp="on"
color="white2" border="on" sharp="on"
color="black" border="on" sharp="on"
引数はcolorとborderの２つを使用。
枠線でボックスが強調されるため背景色のみと違って目立ちます。
注意を引きたい箇所で使うと良いでしょう。
ストライプ色のBOX
[ci_box_simple color="red" stripe="on"]
背景をストライプ色にしたBOX装飾
[/ci_box_simple]color="red" stripe="on"
color="orange" stripe="on"
color="yellow" stripe="on"
color="green" stripe="on"
color="cyan" border="on" stripe="on"
color="blue" border="on" stripe="on"
color="purple" border="on" stripe="on"
color="pink" border="on" sharp="on" stripe="on"
color="brown" border="on" sharp="on" stripe="on"
color="black" border="on" sharp="on" stripe="on"
引数にstripeを追加すると背景色がストライプ柄になります。
色は基本色のみ(pink2など数字が付いたものは自動的にpinkになります)
上線付きBOX
[ci_box_simple type="top" color="red"]
上線付きBOX装飾
[/ci_box_simple]type="top" color="red"
type="top" color="orange"
type="top" color="yellow"
type="top" color="green"
type="top" color="green2" border="on"
type="top" color="cyan" border="on"
type="top" color="cyan2" border="on"
type="top" color="blue" sharp="on"
type="top" color="purple" sharp="on"
type="top" color="pink" sharp="on"
type="top" color="pink2" sharp="on"
type="top" color="pink3" border="on" sharp="on"
type="top" color="brown" border="on" sharp="on"
type="top" color="black" border="on" sharp="on"
type="top" color="red" stripe="on"
type="top" color="yellow" stripe="on"
type="top" color="green" border="on" stripe="on"
type="top" color="blue" border="on" stripe="on"
type="top" color="pink" border="on" sharp="on" stripe="on"
type="top" color="brown" border="on" sharp="on" stripe="on"
引数のtypeにtopを指定で上線有りのボックスとなります。
sharpで線を細く出来、borderやstrip柄などで見え方が大きく変わります。
また下記で紹介するshadowとradiusも使用可能です。
横線付きBOX
[ci_box_simple type="left" color="red"]
横線付きBOX装飾
[/ci_box_simple]type="left" color="red"
type="left" color="orange"
type="left" color="yellow"
type="left" color="green"
type="left" color="green2" border="on"
type="left" color="cyan" border="on"
type="left" color="cyan2" border="on"
type="left" color="blue" sharp="on"
type="left" color="purple" sharp="on"
type="left" color="pink" sharp="on"
type="left" color="pink2" sharp="on"
type="left" color="pink3" border="on" sharp="on"
type="left" color="brown" border="on" sharp="on"
type="left" color="black" border="on" sharp="on"
type="left" color="red" stripe="on"
type="left" color="yellow" stripe="on"
type="left" color="green" border="on" stripe="on"
type="left" color="blue" border="on" stripe="on"
type="left" color="pink" border="on" sharp="on" stripe="on"
type="left" color="brown" border="on" sharp="on" stripe="on"
引数のtypeにleftを指定で横線有りのボックスとなります。
sharp・border・strip・shadow・radiusの引数も使用可能です。
上線よりも横線のデザインをよく見るため、こちらの利用頻度が高いかも。
丸めたBOX
[ci_box_simple color="red" radius="on"]
丸めたBOX装飾
[/ci_box_simple]color="red" bgcolor="white" border="on" radius="on"
color="orange" bgcolor="white" border="on" sharp="on" radius="on"
color="yellow" radius="on"
color="green" radius="on"
color="green2" border="on" radius="on"
color="cyan" border="on" sharp="on" radius="on"
type="top" color="cyan2" radius="on"
type="top" color="blue" border="on" radius="on"
type="top" color="purple" sharp="on" radius="on"
type="top" color="pink" border="on" sharp="on" radius="on"
type="left" color="pink2" radius="on"
type="left" color="pink3" border="on" radius="on"
type="left" color="brown" sharp="on" radius="on"
type="left" color="black" border="on" sharp="on" radius="on"
color="red" radius="on" stripe="on"
color="yellow" border="on" radius="on" stripe="on"
color="green" border="on" sharp="on" radius="on" stripe="on"
type="top" color="blue" radius="on" stripe="on"
type="left" color="pink" radius="on" stripe="on"
引数にradiusを追加すると丸みを帯びたボックスとなります。
丸みを帯びると柔らかいイメージになりますね。
個人的にはcolor指定のみか線有りボックスで利用が好きかな。
影付きBOX
[ci_box_simple color="red" shadow="on"]
影付きBOX装飾
[/ci_box_simple]color="red" bgcolor="white" border="on" shadow="on"
color="orange" bgcolor="white" border="on" sharp="on" shadow="on"
color="yellow" shadow="on"
color="green" shadow="on"
color="green2" border="on" shadow="on"
color="cyan" border="on" sharp="on" shadow="on"
type="top" color="cyan2" shadow="on"
type="top" color="blue" border="on" shadow="on"
type="top" color="purple" sharp="on" shadow="on"
type="top" color="pink" border="on" sharp="on" shadow="on"
type="left" color="pink2" shadow="on"
type="left" color="pink3" border="on" shadow="on"
type="left" color="brown" sharp="on" shadow="on"
type="left" color="black" border="on" sharp="on" shadow="on"
color="red" shadow="on" stripe="on"
color="yellow" border="on" shadow="on" stripe="on"
color="green" border="on" sharp="on" shadow="on" stripe="on"
type="top" color="blue" shadow="on" stripe="on"
type="left" color="pink" shadow="on" stripe="on"
引数にshadowを追加すると影付きボックスとなります。
影を付けるとグッと見た目がよくなるため使用頻度はかなり高いです。
強調させたい場面ではよく使う事になるでしょう。
color="white" shadow="on"
color="white" radius="on" shadow="on"
影を付けることによりcolor指定にwhiteが使えます。
（どのボックスでも白指定は可能ですが背景が白だと枠が見えません）
シンプルなボックスになるため意外と使用頻度が高いですよ。
丸み＋影付きBOX
[ci_box_simple color="red" radius="on" shadow="on"]
丸み＋影付きBOX装飾
[/ci_box_simple]color="red" bgcolor="white" border="on" radius="on" shadow="on"
color="orange" bgcolor="white" border="on" sharp="on" radius="on" shadow="on"
color="yellow" radius="on" shadow="on"
color="green" radius="on" shadow="on"
color="green2" border="on" radius="on" shadow="on"
color="cyan" border="on" sharp="on" radius="on" shadow="on"
type="top" color="cyan2" radius="on" shadow="on"
type="top" color="blue" border="on" radius="on" shadow="on"
type="top" color="purple" sharp="on" radius="on" shadow="on"
type="top" color="pink" border="on" sharp="on" radius="on" shadow="on"
type="left" color="pink2" radius="on" shadow="on"
type="left" color="pink3" border="on" radius="on" shadow="on"
type="left" color="brown" sharp="on" radius="on" shadow="on"
type="left" color="black" border="on" sharp="on" radius="on" shadow="on"
color="red" radius="on" shadow="on" stripe="on"
color="yellow" border="on" radius="on" shadow="on" stripe="on"
color="green" border="on" sharp="on" radius="on" shadow="on" stripe="on"
type="top" color="blue" radius="on" shadow="on" stripe="on"
type="left" color="pink" radius="on" shadow="on" stripe="on"
引数にradiusとshadowを追加で丸みを帯びた影付きボックスとなります。
影が付くとやはり目立ちますね。
丸みと併用可能ですので好きな場面で使ってみて下さい。
使用例
今回のシンプルボックスを使った使用例を少しだけ紹介します。
ボックスはやはり記事中に使うと目立つため、重要な事やまとめを記載する時。
注意を促したり、補足説明の時に使ったりなど。
ちょっとした時にあると便利な装飾なんですよね。
type="left" color="red" txt="red"
注意事項：当サイトの画像や記事の無断転載は禁止です。しかしリンク付きで記事を紹介してくださると管理人が飛び跳ねるほど喜び、役立つプログラム開発に貢献出来るでしょう。
color="yellow" txt="yellow"
補足説明：このプラグインのボックス装飾は背景と同じ色を文字色に指定しても綺麗に見えるように調整がされてます。黒色の文字色よりも見栄えが良いため好んで使ってます。黄色は眩しすぎてちょっと見辛いけど（笑）
type="top" color="brown" txt="brown" border="on" sharp="on"
木彫のちょっとした掲示板っぽい感じですよね。
読書の書評サイトなんかで使うと良さげなデザイン。
ちなみに段落を挟むとこの様に表示されます。
綺麗に一行空いてるはずです。
