
きのぷー
「WING」の記事作成で使えるタグ機能紹介 第2回は「ボックスデザイン」の一覧です。
ボックスデザイン
バナー風ボックス
[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>(メモ2 下線付き)ここにテキストを入力</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>(メモ3 枠のみ)ここにテキストを入力</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>(メモ4 枠・下線あり)ここにテキストを入力</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]
こんな方におすすめ(v)
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
+ ソースコード(クリックして下さい)
<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ 丸形タイプ(v)</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>
こんな方におすすめ[v]
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
+ ソースコード(クリックして下さい)
<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ 角型タイプ[v]</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]