テキスト装飾・ラベル装飾編 Citron WP Shortcodeサンプル

テキスト装飾・ラベル装飾編 Citron WP Shortcodeサンプル イメージ画像

当サイトで配布しているCitron WP Shortcodeのテキスト装飾に関するショートコード一覧です。

この記事ではテキスト自体に装飾を施す以下の項目

  • 太字
  • 文字色変更
  • 背景色変更
  • 蛍光ペン
  • テキストラベル

使用頻度が比較的高いショートコードを解説しております。

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

スポンサーリンク

太字・文字色・背景色変更

この装飾に関しては簡単な記載方法となりますのでショートコードは用意しておりません。
span要素にclass指定を行うのが基本的な使い方になるかと思われます。

記入例の基本形

<span class="ここにセレクタを指定">テキスト本文</span>

太字

太字解説

太字の記入例

これは<span class="ci-bold">太字サンプル</span>です。

これは太字サンプルです。

解説

ci-boldをclassに記載するだけです。
命名は安直にboldなので覚えやすいかと思います。

文字色変更

文字色解説

文字色変更の記入例

これは<span class="ci-red">赤色の文字</span>です。
  • ci-redこれは赤色の文字です。
  • ci-orangeこれは橙色の文字です。
  • ci-yellowこれは黄色の文字です。
  • ci-greenこれは緑色の文字です。
  • ci-cyanこれは水色の文字です。
  • ci-blueこれは青色の文字です。
  • ci-purpleこれは紫色の文字です。
  • ci-pinkこれは桃色の文字です。
  • ci-brownこれは茶色の文字です。
  • ci-whiteこれは白色の文字です。
  • ci-blackこれは黒色の文字です。
解説

ci-の後に色指定を行うだけです。

背景色変更

背景色解説

背景色変更の記入例

これは<span class="ci-bg-red">赤色の背景</span>です。
  • ci-bg-redこれは赤色の背景です。
  • ci-bg-light-redこれは赤色の薄い背景です。
  • ci-bg-orangeこれは橙色の背景です。
  • ci-bg-light-orangeこれは橙色の薄い背景です。
  • ci-bg-yellowこれは黄色の背景です。
  • ci-bg-light-yellowこれは黄色の薄い背景です。
  • ci-bg-greenこれは緑色の背景です。
  • ci-bg-light-greenこれは緑色の薄い背景です。
  • ci-bg-cyanこれは水色の背景です。
  • ci-bg-light-cyanこれは水色の薄い背景です。
  • ci-bg-blueこれは青色の背景です。
  • ci-bg-light-blueこれは青色の薄い背景です。
  • ci-bg-purpleこれは紫色の背景です。
  • ci-bg-light-purpleこれは紫色の薄い背景です。
  • ci-bg-pinkこれは桃色の背景です。
  • ci-bg-light-pinkこれは桃色の薄い背景です。
  • ci-bg-brownこれは茶色の背景です。
  • ci-bg-light-brownこれは茶色の薄い背景です。
  • ci-bg-whiteこれは白色の背景です。
  • ci-bg-light-whiteこれは白色の薄い背景です。
  • ci-bg-blackこれは黒色の背景です。
  • ci-bg-light-blackこれは黒色の薄い背景です。
解説

ci-bg-の後に色指定を行うだけです。

薄い背景を使いたい場合はci-bg-light-の後に色指定を行って下さい。
bgの後ろにlightを付けるだけで淡い感じの配色となります。

命名規則はbgがbackgroundの略でlightは薄い色の意味です。

蛍光ペン

テキストに対して色付き下線を引く装飾です。
別名マーカーや蛍光ペンとも呼ぶ人もいるでしょう。

使い方は基本的にspanでclass指定を行う方法となります。

蛍光ペン解説

蛍光ペンの記入例

この<span class="ci-mk-red">蛍光ペンは赤色</span>です。
  • ci-mk-redこの蛍光ペンは赤色です。
  • ci-mk-s-redこの蛍光ペンは細い赤色です。
  • ci-mk-red2この蛍光ペンは赤色2です。
  • ci-mk-s-red2この蛍光ペンは細い赤色2です。
  • ci-mk-orangeこの蛍光ペンはオレンジです。
  • ci-mk-s-orangeこの蛍光ペンは細いオレンジです。
  • ci-mk-orange2この蛍光ペンはオレンジ2です。
  • ci-mk-s-orange2この蛍光ペンは細いオレンジ2です。
  • ci-mk-yellowこの蛍光ペンは黄色です。
  • ci-mk-s-yellowこの蛍光ペンは細い黄色です。
  • ci-mk-yellow2この蛍光ペンは黄色2です。
  • ci-mk-s-yellow2この蛍光ペンは細い黄色2です。
  • ci-mk-greenこの蛍光ペンは緑色です。
  • ci-mk-s-greenこの蛍光ペンは細い緑色です。
  • ci-mk-green2この蛍光ペンは緑色2です。
  • ci-mk-s-green2この蛍光ペンは細い緑色2です。
  • ci-mk-green3この蛍光ペンは緑色3です。
  • ci-mk-s-green3この蛍光ペンは細い緑色3です。
  • ci-mk-green4この蛍光ペンは緑色4です。
  • ci-mk-s-green4この蛍光ペンは細い緑色4です。
  • ci-mk-cyanこの蛍光ペンは水色です。
  • ci-mk-s-cyanこの蛍光ペンは細い水色です。
  • ci-mk-cyan2この蛍光ペンは水色2です。
  • ci-mk-s-cyan2この蛍光ペンは細い水色2です。
  • ci-mk-cyan3この蛍光ペンは水色3です。
  • ci-mk-s-cyan3この蛍光ペンは細い水色3です。
  • ci-mk-cyan4この蛍光ペンは水色4です。
  • ci-mk-s-cyan4この蛍光ペンは細い水色4です。
  • ci-mk-blueこの蛍光ペンは青色です。
  • ci-mk-s-blueこの蛍光ペンは細い青色です。
  • ci-mk-blue2この蛍光ペンは青色2です。
  • ci-mk-s-blue2この蛍光ペンは細い青色2です。
  • ci-mk-purpleこの蛍光ペンは紫色です。
  • ci-mk-s-purpleこの蛍光ペンは細い紫色です。
  • ci-mk-purple2この蛍光ペンは紫色2です。
  • ci-mk-s-purple2この蛍光ペンは細い紫色2です。
  • ci-mk-pinkこの蛍光ペンはピンク色です。
  • ci-mk-s-pinkこの蛍光ペンは細いピンク色です。
  • ci-mk-pink2この蛍光ペンはピンク色2です。
  • ci-mk-s-pink2この蛍光ペンは細いピンク色2です。
  • ci-mk-pink3この蛍光ペンはピンク色3です。
  • ci-mk-s-pink3この蛍光ペンは細いピンク色3です。
  • ci-mk-pink4この蛍光ペンはピンク色4です。
  • ci-mk-s-pink4この蛍光ペンは細いピンク色4です。
  • ci-mk-pink5この蛍光ペンはピンク色5です。
  • ci-mk-s-pink5この蛍光ペンは細いピンク色5です。
  • ci-mk-brownこの蛍光ペンは茶色です。
  • ci-mk-s-brownこの蛍光ペンは細い茶色です。
  • ci-mk-brown2この蛍光ペンは茶色2です。
  • ci-mk-s-brown2この蛍光ペンは細い茶色2です。
  • ci-mk-whiteこの蛍光ペンは白色です。
  • ci-mk-s-whiteこの蛍光ペンは細い白色です。
  • ci-mk-white2この蛍光ペンは白色2です。
  • ci-mk-s-white2この蛍光ペンは細い白色2です。
  • ci-mk-white3この蛍光ペンは白色3です。
  • ci-mk-s-white3この蛍光ペンは細い白色3です。
  • ci-mk-blackこの蛍光ペンは黒色です。
  • ci-mk-s-blackこの蛍光ペンは細い黒色です。
解説

ci-mk-の後に色指定を行うだけです。

細い蛍光ペンを使いたい場合はci-mk-s-の後に色指定を行って下さい。
mkの後ろにsを付けるだけで更に細い蛍光ペンとなります。

命名規則はmkがマーカーの略でsがsharpの頭文字です。

テキストラベル

テキストラベルはショートコードを使用した記述となります。
種類も3つ用意しておりテキスト内の何処でも使用可能となっておりますので、注目させたい場合や強調したい時などにお使い下さい。

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

引数一覧
  • title装飾テキスト
  • colorテーマ色 red
  • typeタイプ no:通常cut:切り込みdrill:吹き出し
  • posicut or drill有効時の向き left:左向きright:右向き
  • stripe背景色をストライプ化(noの時) onoff
  • radius外枠線の丸み onoff
  • shadow影 onoff
  • txt文字色 white
  • cutbg切り込みの色 white記入例)light-red / yellow
解説

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

シンプルなラベル

ここで使用するショートコード

[ci_txt_label title="赤ラベル" color="red"]

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="white2"color="black"

color="light-red" txt="red"color="light-orange" txt="orange"color="light-yellow" txt="yellow"color="light-green" txt="green"color="light-green2" txt="green2"color="light-cyan" txt="cyan"color="light-cyan2" txt="cyan2"color="light-blue" txt="blue"color="light-purple" txt="purple"color="light-pink" txt="pink"color="light-pink2" txt="pink2"color="light-pink3" txt="pink3"color="light-brown" txt="brown"color="light-black" txt="black"

解説

引数にcolorを指定しただけのラベルとなってます。
下段は薄い背景色を指定し、同色文字を使用した例です。

ストライプ柄のラベル

ここで使用するショートコード

[ci_txt_label title="ストライプ" color="red" txt="black" stripe="on"]

color="red" txt="black" stripe="on"color="orange" txt="black" stripe="on"color="yellow" txt="black" stripe="on"color="green" txt="black" stripe="on"color="cyan" txt="black" stripe="on"color="blue" txt="black" stripe="on"color="purple" txt="black" stripe="on"color="pink" txt="black" stripe="on"color="pink2" txt="black" stripe="on"color="brown" txt="black" stripe="on"color="black" txt="black" stripe="on"

解説

引数にcolorとstripeとtxtの3つを指定。
文字色は白だと見辛いため黒を今回指定しています。
ストライプはtypeがno(通常)指定の時にしか使えません。

吹き出しラベル

ここで使用するショートコード

[ci_txt_label title="吹き出しラベル" color="red" type="drill"]

color="red" type="drill"color="orange" type="drill"color="yellow" type="drill"color="green" type="drill"color="green2" type="drill"color="cyan" type="drill"color="cyan2" type="drill"color="blue" type="drill"color="purple" type="drill"color="pink" type="drill" posi="left"color="pink2" type="drill" posi="left"color="pink3" type="drill" posi="left"color="brown" type="drill" posi="left"color="white2" type="drill" posi="left"color="black" type="drill" posi="left"

color="light-red" txt="red" type="drill"color="light-orange" txt="orange" type="drill"color="light-yellow" txt="yellow" type="drill"color="light-green" txt="green" type="drill"color="light-green2" txt="green2" type="drill"color="light-cyan" txt="cyan" type="drill"color="light-cyan2" txt="cyan2" type="drill"color="light-blue" txt="blue" type="drill"color="light-purple" txt="purple" type="drill" posi="left"color="light-pink" txt="pink" type="drill" posi="left"color="light-pink2" txt="pink2" type="drill" posi="left"color="light-pink3" txt="pink3" type="drill" posi="left"color="light-brown" txt="brown" type="drill" posi="left"color="light-black" txt="black" type="drill" posi="left"

解説

引数のtypeにdrill指定したラベルとなります。
向きを変更したい場合はposiにleftかrightを指定します。
吹き出しはストライプ柄を使用することは出来ません。

命名規則はposiがpositionの略
drillは吹き出し部分の突起がドリルっぽい所から取ってます。

リボン風ラベル

ここで使用するショートコード

[ci_txt_label title="リボン風ラベル" color="red" type="cut"]

color="red" type="cut"color="orange" type="cut"color="yellow" type="cut"color="green" type="cut"color="green2" type="cut"color="cyan" type="cut"color="cyan2" type="cut"color="blue" type="cut"color="purple" type="cut"color="pink" type="cut" posi="left"color="pink2" type="cut" posi="left"color="pink3" type="cut" posi="left"color="brown" type="cut" posi="left"color="white2" type="cut" posi="left"color="black" type="cut" posi="left"

color="light-red" txt="red" type="cut"color="light-orange" txt="orange" type="cut"color="light-yellow" txt="yellow" type="cut"color="light-green" txt="green" type="cut"color="light-green2" txt="green2" type="cut"color="light-cyan" txt="cyan" type="cut"color="light-cyan2" txt="cyan2" type="cut"color="light-blue" txt="blue" type="cut"color="light-purple" txt="purple" type="cut" posi="left"color="light-pink" txt="pink" type="cut" posi="left"color="light-pink2" txt="pink2" type="cut" posi="left"color="light-pink3" txt="pink3" type="cut" posi="left"color="light-brown" txt="brown" type="cut" posi="left"color="light-black" txt="black" type="cut" posi="left"

解説

引数のtypeにcut指定したラベルとなります。
向きを変更したい場合はposiにleftかrightを指定します。
リボン風はストライプ柄を使用することは出来ません。

命名規則はposiがpositionの略
cutはリボン部分が切り取られてる所から取ってます。

切り取り背景色変更

リボン風は背景色が白を前提として作成してます。
もし背景色が白以外であれば切り欠け部分の背景色指定が必要です。

使用例

失敗例:切り欠け部分が白で塗り潰され浮いてます
color="red" type="cut"
成功例:切り欠け部分を背景色と同色のlight-redを指定
color="red" cutbg="light-red" type="cut"

注意

リボン風ラベルでは影付き(shadow)を使えません。
使用すると切り欠け部分の外側も影付きにしてスタイルが浮きます。

color="purple" type="cut" shadow="on"

影付きラベル

ここで使用するショートコード

[ci_txt_label title="影付きラベル" color="red" shadow="on"]

color="red" shadow="on"color="orange" shadow="on"color="yellow" shadow="on"color="green" shadow="on"color="green2" shadow="on"color="cyan" shadow="on"color="cyan2" shadow="on"color="blue" shadow="on"color="purple" shadow="on"color="pink" shadow="on"color="pink2" shadow="on"color="pink3" shadow="on"color="brown" shadow="on"color="white2" shadow="on"color="black" shadow="on"

color="light-red" txt="red" shadow="on"color="light-orange" txt="orange" shadow="on"color="light-yellow" txt="yellow" shadow="on"color="light-green" txt="green" shadow="on"color="light-green2" txt="green2" shadow="on"color="light-cyan" txt="cyan" shadow="on"color="light-cyan2" txt="cyan2" shadow="on"color="light-blue" txt="blue" shadow="on"color="light-purple" txt="purple" shadow="on"color="light-pink" txt="pink" shadow="on"color="light-pink2" txt="pink2" shadow="on"color="light-pink3" txt="pink3" shadow="on"color="light-brown" txt="brown" shadow="on"color="light-black" txt="black" shadow="on"

color="red" txt="black" stripe="on" shadow="on"color="orange" txt="black" stripe="on" shadow="on"color="yellow" txt="black" stripe="on" shadow="on"color="green" txt="black" stripe="on" shadow="on"color="cyan" txt="black" stripe="on" shadow="on"color="blue" txt="black" stripe="on" shadow="on"color="purple" txt="black" stripe="on" shadow="on"color="pink" txt="black" stripe="on" shadow="on"color="pink2" txt="black" stripe="on" shadow="on"color="brown" txt="black" stripe="on" shadow="on"color="black" txt="black" stripe="on" shadow="on"

color="red" type="drill" shadow="on"color="orange" type="drill" shadow="on"color="yellow" type="drill" shadow="on"color="green" type="drill" shadow="on"color="green2" type="drill" shadow="on"color="cyan" type="drill" shadow="on"color="cyan2" type="drill" shadow="on"color="blue" type="drill" shadow="on"color="purple" type="drill" shadow="on"color="pink" type="drill" posi="left" shadow="on"color="pink2" type="drill" posi="left" shadow="on"color="pink3" type="drill" posi="left" shadow="on"color="brown" type="drill" posi="left" shadow="on"color="white2" type="drill" posi="left" shadow="on"color="black" type="drill" posi="left" shadow="on"

color="light-red" txt="red" type="drill" shadow="on"color="light-orange" txt="orange" type="drill" shadow="on"color="light-yellow" txt="yellow" type="drill" shadow="on"color="light-green" txt="green" type="drill" shadow="on"color="light-green2" txt="green2" type="drill" shadow="on"color="light-cyan" txt="cyan" type="drill" shadow="on"color="light-cyan2" txt="cyan2" type="drill" shadow="on"color="light-blue" txt="blue" type="drill" shadow="on"color="light-purple" txt="purple" type="drill" posi="left" shadow="on"color="light-pink" txt="pink" type="drill" posi="left" shadow="on"color="light-pink2" txt="pink2" type="drill" posi="left" shadow="on"color="light-pink3" txt="pink3" type="drill" posi="left" shadow="on"color="light-brown" txt="brown" type="drill" posi="left" shadow="on"color="light-black" txt="black" type="drill" posi="left" shadow="on"

解説

引数にshadowを追加すると影付きとなります。
立体的なラベルとなりますので目立たせたい時に使うと良いでしょう。
影付きはtypeがcutの時は使えません。

丸みのラベル

ここで使用するショートコード

[ci_txt_label title="丸みのラベル" color="red" radius="on"]

color="red" radius="on"color="orange" radius="on"color="yellow" radius="on"color="green" radius="on"color="green2" radius="on"color="cyan" radius="on"color="cyan2" radius="on"color="blue" radius="on"color="purple" radius="on"color="pink" radius="on"color="pink2" radius="on"color="pink3" radius="on"color="brown" radius="on"color="white2" radius="on"color="black" radius="on"

color="light-red" txt="red" radius="on"color="light-orange" txt="orange" radius="on"color="light-yellow" txt="yellow" radius="on"color="light-green" txt="green" radius="on"color="light-green2" txt="green2" radius="on"color="light-cyan" txt="cyan" radius="on"color="light-cyan2" txt="cyan2" radius="on"color="light-blue" txt="blue" radius="on"color="light-purple" txt="purple" radius="on"color="light-pink" txt="pink" radius="on"color="light-pink2" txt="pink2" radius="on"color="light-pink3" txt="pink3" radius="on"color="light-brown" txt="brown" radius="on"color="light-black" txt="black" radius="on"

color="red" txt="black" stripe="on" radius="on"color="orange" txt="black" stripe="on" radius="on"color="yellow" txt="black" stripe="on" radius="on"color="green" txt="black" stripe="on" radius="on"color="cyan" txt="black" stripe="on" radius="on"color="blue" txt="black" stripe="on" radius="on"color="purple" txt="black" stripe="on" radius="on"color="pink" txt="black" stripe="on" radius="on"color="pink2" txt="black" stripe="on" radius="on"color="brown" txt="black" stripe="on" radius="on"color="black" txt="black" stripe="on" radius="on"

color="red" type="drill" radius="on"color="orange" type="drill" radius="on"color="yellow" type="drill" radius="on"color="green" type="drill" radius="on"color="green2" type="drill" radius="on"color="cyan" type="drill" radius="on"color="cyan2" type="drill" radius="on"color="blue" type="drill" radius="on"color="purple" type="drill" radius="on"color="pink" type="drill" posi="left" radius="on"color="pink2" type="drill" posi="left" radius="on"color="pink3" type="drill" posi="left" radius="on"color="brown" type="drill" posi="left" radius="on"color="white2" type="drill" posi="left" radius="on"color="black" type="drill" posi="left" radius="on"

color="light-red" txt="red" type="drill" radius="on"color="light-orange" txt="orange" type="drill" radius="on"color="light-yellow" txt="yellow" type="drill" radius="on"color="light-green" txt="green" type="drill" radius="on"color="light-green2" txt="green2" type="drill" radius="on"color="light-cyan" txt="cyan" type="drill" radius="on"color="light-cyan2" txt="cyan2" type="drill" radius="on"color="light-blue" txt="blue" type="drill" radius="on"color="light-purple" txt="purple" type="drill" posi="left" radius="on"color="light-pink" txt="pink" type="drill" posi="left" radius="on"color="light-pink2" txt="pink2" type="drill" posi="left" radius="on"color="light-pink3" txt="pink3" type="drill" posi="left" radius="on"color="light-brown" txt="brown" type="drill" posi="left" radius="on"color="light-black" txt="black" type="drill" posi="left" radius="on"

color="red" type="cut" radius="on"color="orange" type="cut" radius="on"color="yellow" type="cut" radius="on"color="green" type="cut" radius="on"color="green2" type="cut" radius="on"color="cyan" type="cut" radius="on"color="cyan2" type="cut" radius="on"color="blue" type="cut" radius="on"color="purple" type="cut" radius="on"color="pink" type="cut" posi="left" radius="on"color="pink2" type="cut" posi="left" radius="on"color="pink3" type="cut" posi="left" radius="on"color="brown" type="cut" posi="left" radius="on"color="white2" type="cut" posi="left" radius="on"color="black" type="cut" posi="left" radius="on"

color="light-red" txt="red" type="cut" radius="on"color="light-orange" txt="orange" type="cut" radius="on"color="light-yellow" txt="yellow" type="cut" radius="on"color="light-green" txt="green" type="cut" radius="on"color="light-green2" txt="green2" type="cut" radius="on"color="light-cyan" txt="cyan" type="cut" radius="on"color="light-cyan2" txt="cyan2" type="cut" radius="on"color="light-blue" txt="blue" type="cut" radius="on"color="light-purple" txt="purple" type="cut" posi="left" radius="on"color="light-pink" txt="pink" type="cut" posi="left" radius="on"color="light-pink2" txt="pink2" type="cut" posi="left" radius="on"color="light-pink3" txt="pink3" type="cut" posi="left" radius="on"color="light-brown" txt="brown" type="cut" posi="left" radius="on"color="light-black" txt="black" type="cut" posi="left" radius="on"

解説

引数にradiusを追加すると角が丸くなります。
柔らかい感じの印象になるため様々な用途で使えるでしょう。

ポップなラベル

ここで使用するショートコード

[ci_txt_label title="ポップなラベル" color="red" radius="on" shadow="on"]

color="red" radius="on" shadow="on"color="orange" radius="on" shadow="on"color="yellow" radius="on" shadow="on"color="green" radius="on" shadow="on"color="green2" radius="on" shadow="on"color="cyan" radius="on" shadow="on"color="cyan2" radius="on" shadow="on"color="blue" radius="on" shadow="on"color="purple" radius="on" shadow="on"color="pink" radius="on" shadow="on"color="pink2" radius="on" shadow="on"color="pink3" radius="on" shadow="on"color="brown" radius="on" shadow="on"color="white2" radius="on" shadow="on"color="black" radius="on" shadow="on"

color="light-red" txt="red" radius="on" shadow="on"color="light-orange" txt="orange" radius="on" shadow="on"color="light-yellow" txt="yellow" radius="on" shadow="on"color="light-green" txt="green" radius="on" shadow="on"color="light-green2" txt="green2" radius="on" shadow="on"color="light-cyan" txt="cyan" radius="on" shadow="on"color="light-cyan2" txt="cyan2" radius="on" shadow="on"color="light-blue" txt="blue" radius="on" shadow="on"color="light-purple" txt="purple" radius="on" shadow="on"color="light-pink" txt="pink" radius="on" shadow="on"color="light-pink2" txt="pink2" radius="on" shadow="on"color="light-pink3" txt="pink3" radius="on" shadow="on"color="light-brown" txt="brown" radius="on" shadow="on"color="light-black" txt="black" radius="on" shadow="on"

color="red" txt="black" stripe="on" radius="on" shadow="on"color="orange" txt="black" stripe="on" radius="on" shadow="on"color="yellow" txt="black" stripe="on" radius="on" shadow="on"color="green" txt="black" stripe="on" radius="on" shadow="on"color="cyan" txt="black" stripe="on" radius="on" shadow="on"color="blue" txt="black" stripe="on" radius="on" shadow="on"color="purple" txt="black" stripe="on" radius="on" shadow="on"color="pink" txt="black" stripe="on" radius="on" shadow="on"color="pink2" txt="black" stripe="on" radius="on" shadow="on"color="brown" txt="black" stripe="on" radius="on" shadow="on"color="black" txt="black" stripe="on" radius="on" shadow="on"

color="red" type="drill" radius="on" shadow="on"color="orange" type="drill" radius="on" shadow="on"color="yellow" type="drill" radius="on" shadow="on"color="green" type="drill" radius="on" shadow="on"color="green2" type="drill" radius="on" shadow="on"color="cyan" type="drill" radius="on" shadow="on"color="cyan2" type="drill" radius="on" shadow="on"color="blue" type="drill" radius="on" shadow="on"color="purple" type="drill" radius="on" shadow="on"color="pink" type="drill" posi="left" radius="on" shadow="on"color="pink2" type="drill" posi="left" radius="on" shadow="on"color="pink3" type="drill" posi="left" radius="on" shadow="on"color="brown" type="drill" posi="left" radius="on" shadow="on"color="white2" type="drill" posi="left" radius="on" shadow="on"color="black" type="drill" posi="left" radius="on" shadow="on"

color="light-red" txt="red" type="drill" radius="on" shadow="on"color="light-orange" txt="orange" type="drill" radius="on" shadow="on"color="light-yellow" txt="yellow" type="drill" radius="on" shadow="on"color="light-green" txt="green" type="drill" radius="on" shadow="on"color="light-green2" txt="green2" type="drill" radius="on" shadow="on"color="light-cyan" txt="cyan" type="drill" radius="on" shadow="on"color="light-cyan2" txt="cyan2" type="drill" radius="on" shadow="on"color="light-blue" txt="blue" type="drill" radius="on" shadow="on"color="light-purple" txt="purple" type="drill" posi="left" radius="on" shadow="on"color="light-pink" txt="pink" type="drill" posi="left" radius="on" shadow="on"color="light-pink2" txt="pink2" type="drill" posi="left" radius="on" shadow="on"color="light-pink3" txt="pink3" type="drill" posi="left" radius="on" shadow="on"color="light-brown" txt="brown" type="drill" posi="left" radius="on" shadow="on"color="light-black" txt="black" type="drill" posi="left" radius="on" shadow="on"

解説

引数にradiusとshadowの2つを追加するとポップな感じになります。
引数の組み合わせで様々な表現が可能ですので色々試してみて下さい。

スポンサーリンク

関連記事

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

PHPラボ オリジナルツール

無料配布中

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

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