当サイトで配布しているCitron WP Shortcodeのテキスト装飾に関するショートコード一覧です。
URLが見つかりません。この記事ではテキスト自体に装飾を施す以下の項目
使用頻度が比較的高いショートコードを解説しております。
[toc]
太字・文字色・背景色変更
この装飾に関しては簡単な記載方法となりますのでショートコードは用意しておりません。
span要素にclass指定を行うのが基本的な使い方になるかと思われます。
<span class="ここにセレクタを指定">テキスト本文</span>
太字
これは<span class="ci-bold">太字サンプル</span>です。
これは太字サンプルです。
ci-boldをclassに記載するだけです。
命名は安直にboldなので覚えやすいかと思います。
文字色変更
これは<span class="ci-red">赤色の文字</span>です。
ci-の後に色指定を行うだけです。
背景色変更
これは<span class="ci-bg-red">赤色の背景</span>です。
ci-bg-の後に色指定を行うだけです。
薄い背景を使いたい場合はci-bg-light-の後に色指定を行って下さい。
bgの後ろにlightを付けるだけで淡い感じの配色となります。
命名規則はbgがbackgroundの略でlightは薄い色の意味です。
蛍光ペン
テキストに対して色付き下線を引く装飾です。
別名マーカーや蛍光ペンとも呼ぶ人もいるでしょう。
使い方は基本的にspanでclass指定を行う方法となります。
この<span class="ci-mk-red">蛍光ペンは赤色</span>です。
ci-mk-の後に色指定を行うだけです。
細い蛍光ペンを使いたい場合はci-mk-s-の後に色指定を行って下さい。
mkの後ろにsを付けるだけで更に細い蛍光ペンとなります。
命名規則はmkがマーカーの略でsがsharpの頭文字です。
テキストラベル
テキストラベルはショートコードを使用した記述となります。
種類も3つ用意しておりテキスト内の何処でも使用可能となっておりますので、注目させたい場合や強調したい時などにお使い下さい。
このショートコードには以下の引数が用意されています。
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はリボン部分が切り取られてる所から取ってます。
リボン風は背景色が白を前提として作成してます。
もし背景色が白以外であれば切り欠け部分の背景色指定が必要です。
リボン風ラベルでは影付き(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つを追加するとポップな感じになります。
引数の組み合わせで様々な表現が可能ですので色々試してみて下さい。