きのぷー
「WING」の記事作成で使えるタグ機能紹介 第２回は「ボックスデザイン」の一覧です。
ボックスデザイン
バナー風ボックス
[st-flexbox url="リンク先URL" rel="nofollow" target="リンクを新しく開く（target）" fontawesome="Webアイコン" title="タイトル" width="幅（%）" height="高さ（px）" color="文字色" fontsize="文字サイズ（%）" radius="角丸（px）" shadow="タイトルの影色" bordercolor="枠線カラー" borderwidth="枠線の太さ（px）" bgcolor="背景色" backgroud_image="背景画像のURL" blur="背景画像のぼかし" left="左寄せ（on）" margin_bottom="下の余白（px）"]
ここに自由なテキスト
[/st-flexbox]
基本
+ ソースコード（クリックして下さい）
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="10"]
<p>ここにテキストを入力</p>
[/st-flexbox]
背景なし（高さ400px）
+ ソースコード（クリックして下さい）
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="400" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="" borderwidth="0" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]
<p>ここにテキストを入力</p>
[/st-flexbox]
左寄せ
+ ソースコード（クリックして下さい）
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="120" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#29B6F6" backgroud_image="" blur="on" left="on" margin_bottom="0"]
<p>ここにテキストを入力</p>
[/st-flexbox]
マイボックス
[st-mybox title="見出し" fontawesome="Webアイコン" color="見出し色" bordercolor="枠線カラー" bgcolor="背景色" borderwidth="枠線の太さ（px）" borderradius="角丸（px）" titleweight="見出しの太さ（bold）" fontsize="見出しのフォントサイズ" myclass="オリジナルクラス" margin="マージン"]
ここにテキスト
[/st-mybox]
基本
+ ソースコード（クリックして下さい）
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（基本デザイン）ここにテキストを入力</p>
[/st-mybox]
しかく（枠のみ）
+ ソースコード（クリックして下さい）
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（四角い枠のみ）ここにテキストを入力</p>
[/st-mybox]
まるみ
+ ソースコード（クリックして下さい）
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（四隅にまるみ）ここにテキストを入力</p>
[/st-mybox]
参考
+ ソースコード（クリックして下さい）
[st-mybox title="参考" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（参考）ここにテキストを入力</p>
[/st-mybox]
関連
+ ソースコード（クリックして下さい）
[st-mybox title="関連" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（関連）ここにテキストを入力</p>
[/st-mybox]
メモ
+ ソースコード（クリックして下さい）
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（メモ）ここにテキストを入力</p>
[/st-mybox]
ポイント
+ ソースコード（クリックして下さい）
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（ポイント）ここにテキストを入力</p>
[/st-mybox]
注意ポイント
+ ソースコード（クリックして下さい）
[st-mybox title="注意ポイント" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（注意ポイント）ここにテキストを入力</p>
[/st-mybox]
はてな
+ ソースコード（クリックして下さい）
[st-mybox title="はてな" fontawesome="fa-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（はてな）ここにテキストを入力</p>
[/st-mybox]
＋ミニふきだし
+ ソースコード（クリックして下さい）
[st-div class="" margin="0 0 15px 0" padding="0 0 0 0" add_style=""][st-minihukidashi fontawesome="e" fontsize="" fontweight="bold" bgcolor="#f3f3f3" color="" margin="0" radius="5" position="" add_boxstyle=""]ふきだしテキスト[/st-minihukidashi][/st-div][st-mybox title="" fontawesome="" color="" bordercolor="#f3f3f3" bgcolor="" borderwidth="5" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="0 0 25px 0"]
<p>ここにテキストを入力</p>
[/st-mybox]
shortcode
+ ソースコード（クリックして下さい）
[st-scbox title="" fontawesome="" color="#000" bordercolor="" bgcolor="#fafafa" borderwidth="" borderradius="0" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
<p>（shortcode）ここにショートコードを入力（？）</p>
[/st-scbox]
マイボックス（＋CSSクラス）
メモ
+ ソースコード（クリックして下さい）
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>（メモ）ここにテキストを入力</p>
[/st-mybox]
メモ（下線のみ）
+ ソースコード（クリックして下さい）
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#ff0000" bgcolor="#FAFAFA" borderwidth="0" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>（メモ２ 下線付き）ここにテキストを入力</p>
[/st-mybox]
メモ（枠のみ）
+ ソースコード（クリックして下さい）
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>（メモ３ 枠のみ）ここにテキストを入力</p>
[/st-mybox]
メモ（枠・下線あり）
+ ソースコード（クリックして下さい）
[st-mybox title="メモ" fontawesome="fa-file-text-o" color="#727272" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>（メモ４ 枠・下線あり）ここにテキストを入力</p>
[/st-mybox]
注意（下線のみ）
+ ソースコード（クリックして下さい）
[st-mybox title="ここに注意" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#f3f3f3" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold" title_bordercolor="#ef5350" fontsize="" myclass="st-mybox-class st-title-under" margin="25px 0 25px 0"]
<p>注意（下線のみ） ここにテキストを入力</p>
[/st-mybox]
必要なモノ
+ ソースコード（クリックして下さい）
[st-mybox title="必要なモノ" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-circle" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]
必要なモノ（ドット下線）
+ ソースコード（クリックして下さい）
[st-mybox title="必要なモノ" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-circle" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]
チェックリスト
+ ソースコード（クリックして下さい）
[st-mybox title="チェックリスト" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-check" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]
チェックリスト（ドット下線）
+ ソースコード（クリックして下さい）
[st-mybox title="チェックリスト" fontawesome="fa-file-text-o" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-border st-list-check" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]
簡単な流れ
+ ソースコード（クリックして下さい）
[st-mybox title="簡単な流れ" fontawesome="fa-list-ol" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-no" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]
簡単な流れ（ドット下線）
+ ソースコード（クリックして下さい）
[st-mybox title="簡単な流れ" fontawesome="fa-list-ol" color="#757575" bordercolor="#f3f3f3" bgcolor="" borderwidth="3" borderradius="5" titleweight="bold" title_bordercolor="#757575" fontsize="" myclass="st-mybox-class st-title-under st-list-no st-list-border" margin="25px 0 25px 0"]
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
[/st-mybox]
見出し付きフリーボックス
基本
+ ソースコード（クリックして下さい）
[st-midasibox title="見出し（全角15文字）" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox]
注意
+ ソースコード（クリックして下さい）
[st-midasibox title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox]
はてな
+ ソースコード（クリックして下さい）
[st-midasibox title="はてな" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox]
ポイント
+ ソースコード（クリックして下さい）
[st-midasibox title="ポイント" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox]
メモ
+ ソースコード（クリックして下さい）
[st-midasibox title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"]
<p>ここにテキストを入力</p>
[/st-midasibox]
基本（タイトル幅100%）
+ ソースコード（クリックして下さい）
[st-midasibox-intitle title="見出し（全角15文字）" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]
<p>（タイトル幅100%）ここにテキストを入力</p>
[/st-midasibox-intitle]
注意（タイトル幅100%）
+ ソースコード（クリックして下さい）
[st-midasibox-intitle title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]
<p>（注意 タイトル幅100%）ここにテキストを入力</p>
[/st-midasibox-intitle]
はてな（タイトル幅100%）
+ ソースコード（クリックして下さい）
[st-midasibox-intitle title="はてな" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"]
<p>（はてな タイトル幅100%）ここにテキストを入力</p>
[/st-midasibox-intitle]
ポイント（タイトル幅100%）
+ ソースコード（クリックして下さい）
[st-midasibox-intitle title="ポイント" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"]
<p>（ポイント タイトル幅100%）ここにテキストを入力</p>
[/st-midasibox-intitle]
メモ（タイトル幅100%）
+ ソースコード（クリックして下さい）
[st-midasibox-intitle title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"]
<p>（メモ タイトル幅100%）ここにテキストを入力</p>
[/st-midasibox-intitle]
メモボックス
+ ソースコード（クリックして下さい）
<div class="st-memobox2">
<p class="st-memobox-title">メモ</p>
<p>ここにテキストを入力</p>
</div>
スライドボックス
[st-slidebox fontawesome="" text="+ クリックして下さい" bgcolor="" color="#1a1a1a" margin_bottom="20"]]
<p>クリックで開かれる内容です</p>
[[/st-slidebox]
チェックボックス（番号なしリスト）
+ ソースコード（クリックして下さい）
[st-square-checkbox bgcolor="" bordercolor="" fontweight="" borderwidth="3"]
<div>ここにテキストを入力</div>
<div>ここにテキストを入力</div>
[/st-square-checkbox]
こんな方におすすめ（ｖ）
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
+ ソースコード（クリックして下さい）
<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ 丸形タイプ（ｖ）</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>
こんな方におすすめ［ｖ］
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
+ ソースコード（クリックして下さい）
<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ 角型タイプ［ｖ］</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>
ガイドマップメニュー
+ ソースコード（クリックして下さい）
<div class="st-link-guide st-link-guide-post">
<ul class="st-link-guide-menu">
<li><a href="#">ダミーリンク</a></li>
<li><a href="#">ダミーリンク</a></li>
<li><a href="#">ダミーリンク</a></li>
</ul>
</div>
pre
html
<p></p>
+ ソースコード（クリックして下さい）
[st-pre myclass="" text="html" fontawesome=""]
<p></p>
[/st-pre]
pre: terminal
command
<p></p>
+ ソースコード（クリックして下さい）
[st-pre myclass="st-terminal" text="command" fontawesome="fa-terminal"]
<p></p>
[/st-pre]
pre: shortcode
shortcode
<p></p>
+ ソースコード（クリックして下さい）
[st-pre-sc myclass="" text="shortcode" fontawesome=""]
<p></p>
[/st-pre-sc]
