Shortcodeのラベル付きボックス装飾に関するショートコード一覧です。ダウンロードページWordPress専用オリジナルツール。記事装飾が簡単にできる無料プラグイン。安心安...この記事ではラベルが付いた様々なBOX装飾のサンプルを紹介します。基本は3系統で左枠に上・中・下とラベルが付くボックスとなります。使用目的は1ブロックを囲み、その題名を付けるといった用途。STEP1・STEP2・STEP3といった手順の解説など。ただの囲みではなく、〇〇についての囲みです。強調できるため使用頻度の高い装飾になるかと思われます。当プラグインでは他のCSS内容とバッティングしないために「ci-」という接頭辞を必ず付けております。命名規則を独自に設けておりますので、頭の片隅にでも覚えておくと直接記載をする場合は少し楽になるかもしれません。今回のショートコードには以下の引数が用意されています。onoff解説ci_box_labelのショートコードに引数を指定します。各引数の意味は上記を参考にして下さい。組み合わせにより柔軟な装飾が可能となっております。赤色の値は初期値です。ラベル文字は2行になるとデザインが崩れます。1行で収まる文字数にして下さい。引数の簡単な説明まずはじめに簡単な引数の説明をここで行います。引数のtitleはラベル文字となります。ここで指定した文字がラベルに表示されます。パターン引数のtypeは装飾方法指定となります。詳細は下記サンプルにて。用意された4つのデザインをここで指定します。引数のcolorはテーマ色となっており、主体の配色指定となります。ラベル部分と枠線がこの引数で指定した色で装飾されます。引数のbgcolorは背景色です。ここで指定された色はボックス内の背景色となります。引数のtxtは文字色です。ここで指定された色はボックス内の文字全てに反映されます。引数のiconはアイコン追加です。Awesomeで決められたタグを指定するとラベルの最初に表示されます。枠線を丸める引数のradiusは枠線を丸めます。この引数をonにすると枠線の四角が丸みを帯びます。ボックスに影を付ける引数のshadowはBOXに影を付けます。この引数をonにすると枠線の縁に影が付き立体的に見えます。引数のstripeは背景のストライプ化です。この引数をonにすると背景色に指定された色をストライプ化します。色は基本色のみ(pink2など数字が付いたものは自動的にpinkになります)上に余白を取る引数のmarginはラベル部分の余白を取ります。この引数は通常使用ではonのままで良いのですが、余白を挟まず詰めて表示させたい時にon/offをその都度選べるように用意しました。stripe="on"解説typeの値にonを指定した装飾例です。丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。ボックスの左上にラベルが有り、よく見るデザインかと思われます。stripe="on"解説typeの値にmidを指定した装飾例です。丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。ボックスの枠線左上にラベルが表示されます。stripe="on"解説typeの値にinlを指定した装飾例です。丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。ボックスの枠内左上にラベルが表示されます。stripe="on"解説typeの値にinrを指定した装飾例です。丸み・影付与・背景をストライプ化をバラバラに組み合わせた実際の使用例です。ボックスの枠内右上にラベルが表示されます。引数のiconを指定した装飾例です。ラベルの横にアイコンが表示されワンポイントアクセントになります。アイコンがあると見栄えが良くなるため積極的に使うのをおすすめします。初期搭載アイコン・追加方法などは下記の説明リンクをご覧ください。余白について引数のmarginはtypeのonmidを指定時にのみ有効です。基本的にボックスの余白は上に対してmarginを指定して取っているのですが、ラベル付きBOXの場合はデザイン上、更にラベル部分の余白を取っております。ラベル部分+行間の2つ余白が多めに取られています。今回、この引数をoffにしますと行間部分の余白が除去され詰めた感じに表示されます。実際にサンプルを見ると一目瞭然でしょう。margin:onmarginはonmargin:offmarginはoffmargin:offmarginはoffmargin:onmarginはonmargin:onmarginはonmargin:offmarginはoffmargin:offmarginはoffmargin:onmarginはonmidタイプの装飾は少し分かりづらいかもしれませんがonタイプの装飾は行間が詰まっているのが一目で分かるかと思います。使用する際にラベル部分の余白だけで十分と思う場合にはmarginをoffに指定してご利用下さい。今回のラベル付きボックスを使った使用例を少しだけ紹介します。ラベルが付いているとボックス内に記載してある事柄は○○について説明しています。いうように一目で読者に伝えることが可能になり、シンプルボックスにはない訴求方法でより目立たせることが出来ます。当サイトではSTEP1~STEP4みたいなチャート形式で使ったり。解説ボックスとして活用したり。リスト装飾と併せて使用することが多いですね。Shortcodeの解説ページで使用しているコードインフォマークのアイコンを必ず使用。一目で解説のボックス枠だというのが分かりますよね。Shortcodeはショートコードの入れ子に対応しております。ラベルボックスの中にシンプルボックスを記入するとこの様に。1つ目のシンプルボックス茶色のラベルボックスにオレンジのシンプルボックスを挿入しています。2つ目のボックス2つ目のシンプルボックス茶色のラベルボックスに黄色のシンプルボックスを挿入しています。キャッ色々と組み合わせて使ってみて下さい。ダウンロードページWordPress専用オリジナルツール。記事装飾が簡単にできる無料プラグイン。役に立ったらみんなにシェアしようツイートシェアはてなPocketこの記事のタイトルとURLをコピーする下のテキストボックスの内容がコピーされました。今すぐSNSなどに「貼り付け」してみてください。スマホは「ロングタップ(長押し)」すると貼り付けられます。お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。当サイトの記事装飾は全てWPのオリジナルプラグインで行ってます。