Shortcodeのテキスト装飾に関するショートコード一覧です。ダウンロードページWordPress専用オリジナルツール。記事装飾が簡単にできる無料プラグイン。ペンテキストラベル使用頻度が比較的高いショートコードを解説しております。当プラグインでは他のCSS内容とバッティングしないために「ci-」という接頭辞を必ず付けております。命名規則を独自に設けておりますので、頭の片隅にでも覚えておくと直接記載をする場合は少し楽になるかもしれません。この装飾に関しては簡単な記載方法となりますのでショートコードは用意しておりません。span要素にclass指定を行うのが基本的な使い方になるかと思われます。class="ci-bold">太字サンプル</span>です。これは太字サンプルです。解説ci-boldをclassに記載するだけです。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これは黒色の文字です。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指定を行う方法となります。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つ用意しておりテキスト内の何処でも使用可能となっておりますので、注目させたい場合や強調したい時などにお使い下さい。このショートコードには以下の引数が用意されています。yellow解説ci_txt_labelのショートコードに引数を指定します。各引数の意味は上記を参考にして下さい。組み合わせにより柔軟な装飾が可能となっております。赤色の値は初期値です。引数にcolorを指定しただけのラベルとなってます。下段は薄い背景色を指定し、同色文字を使用した例です。引数にcolorとstripeとtxtの3つを指定。文字色は白だと見辛いため黒を今回指定しています。ストライプはtypeがno(通常)指定の時にしか使えません。引数のtypeにdrill指定したラベルとなります。向きを変更したい場合はposiにleftかrightを指定します。吹き出しはストライプ柄を使用することは出来ません。命名規則はposiがpositionの略drillは吹き出し部分の突起がドリルっぽい所から取ってます。引数のtypeにcut指定したラベルとなります。向きを変更したい場合はposiにleftかrightを指定します。リボン風はストライプ柄を使用することは出来ません。命名規則はposiがpositionの略cutはリボン部分が切り取られてる所から取ってます。切り取り背景色変更リボン風は背景色が白を前提として作成してます。背景色が白以外であれば切り欠け部分の背景色指定が必要です。type="cut"注意リボン風ラベルでは影付き(shadow)を使えません。使用すると切り欠け部分の外側も影付きにしてスタイルが浮きます。引数にshadowを追加すると影付きとなります。立体的なラベルとなりますので目立たせたい時に使うと良いでしょう。影付きはtypeがcutの時は使えません。引数にradiusを追加すると角が丸くなります。柔らかい感じの印象になるため様々な用途で使えるでしょう。引数にradiusとshadowの2つを追加するとポップな感じになります。引数の組み合わせで様々な表現が可能ですので色々試してみて下さい。ダウンロードページWordPress専用オリジナルツール。記事装飾が簡単にできる無料プラグイン。役に立ったらみんなにシェアしようツイートシェアはてなPocketこの記事のタイトルとURLをコピーする下のテキストボックスの内容がコピーされました。今すぐSNSなどに「貼り付け」してみてください。スマホは「ロングタップ(長押し)」すると貼り付けられます。お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。当サイトの記事装飾は全てWPのオリジナルプラグインで行ってます。