シンプルボックス編 Citron WP Shortcodeサンプル

シンプルボックス編 Citron WP Shortcodeサンプル イメージ画像

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

この記事では簡単なBOX装飾のサンプルを紹介します。

ただの線で囲った枠や、背景色を塗りつぶした枠。
丸みを帯びたボタン風のボックス。浮き出た強調ボックス。
ちょっとしたアクセントとして横線がある枠など。

シンプルで使用頻度の高い基本的なBOXが多いので是非活用してみて下さい。

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

スポンサーリンク

引数一覧

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

引数一覧
  • typeタイプ top:上線left:横線none:背景のみ
  • colorテーマ色
  • bgcolor背景色
  • txt文字色 black
  • border外枠線 onoff
  • sharp太さ onoff
  • radius丸み onoff
  • shadow影 onoff
  • stripe背景色をストライプ化 onoff
解説

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の2つを使用。
枠線でボックスが強調されるため背景色のみと違って目立ちます。
注意を引きたい箇所で使うと良いでしょう。

ストライプ色の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"
木彫のちょっとした掲示板っぽい感じですよね。
読書の書評サイトなんかで使うと良さげなデザイン。

ちなみに段落を挟むとこの様に表示されます。
綺麗に一行空いてるはずです。

スポンサーリンク

関連記事

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

PHPラボ オリジナルツール

無料配布中

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

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