WINGのタグ機能一覧　②ボックスデザイン編

きのぷー

「WING」の記事作成で使えるタグ機能紹介　第２回は「ボックスデザイン」の一覧です。

販売元サイト

AFFINGER（WING）

AFFINGER（WING）

https://the-money.net

「稼ぐ」に特化したアフィリエイトテーマ

ボックスデザイン

ボックスデザイン

バナー風ボックス

[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"] ここにテキストを入力 [/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"] ここにテキストを入力 [/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"] ここにテキストを入力 [/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"] （基本デザイン）ここにテキストを入力 [/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"] （四角い枠のみ）ここにテキストを入力 [/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"] （四隅にまるみ）ここにテキストを入力 [/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"] （参考）ここにテキストを入力 [/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"] （メモ）ここにテキストを入力 [/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"] （ポイント）ここにテキストを入力 [/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"] （注意ポイント）ここにテキストを入力 [/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"] （はてな）ここにテキストを入力 [/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"] ここにテキストを入力 [/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"] （shortcode）ここにショートコードを入力（？） [/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"] （メモ）ここにテキストを入力 [/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"] （メモ２　下線付き）ここにテキストを入力 [/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"] （メモ３　枠のみ）ここにテキストを入力 [/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"] （メモ４　枠・下線あり）ここにテキストを入力 [/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"] 注意（下線のみ）ここにテキストを入力 [/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]

見出し付きフリーボックス

基本

見出し（全角15文字）

+ ソースコード（クリックして下さい）

[st-midasibox title="見出し（全角15文字）" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"] ここにテキストを入力 [/st-midasibox]

注意

+ ソースコード（クリックして下さい）

[st-midasibox title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"] ここにテキストを入力 [/st-midasibox]

はてな

+ ソースコード（クリックして下さい）

[st-midasibox title="はてな" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"] ここにテキストを入力 [/st-midasibox]

ポイント

+ ソースコード（クリックして下さい）

[st-midasibox title="ポイント" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"] ここにテキストを入力 [/st-midasibox]

メモ

+ ソースコード（クリックして下さい）

[st-midasibox title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"] ここにテキストを入力 [/st-midasibox]

基本（タイトル幅100%）

見出し（全角15文字）

+ ソースコード（クリックして下さい）

[st-midasibox-intitle title="見出し（全角15文字）" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"] （タイトル幅100%）ここにテキストを入力 [/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"] （注意タイトル幅100%）ここにテキストを入力 [/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"] （はてなタイトル幅100%）ここにテキストを入力 [/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"] （ポイントタイトル幅100%）ここにテキストを入力 [/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"] （メモタイトル幅100%）ここにテキストを入力 [/st-midasibox-intitle]

メモボックス

メモ

テキスト

+ ソースコード（クリックして下さい）

<div class="st-memobox2"> メモ ここにテキストを入力 </div>

スライドボックス

+ クリックして下さい

[st-slidebox fontawesome="" text="+ クリックして下さい" bgcolor="" color="#1a1a1a" margin_bottom="20"]] クリックで開かれる内容です [[/st-slidebox]

チェックボックス（番号なしリスト）

テキスト１

テキスト２

+ ソースコード（クリックして下さい）

[st-square-checkbox bgcolor="" bordercolor="" fontweight="" borderwidth="3"] <div>ここにテキストを入力</div> <div>ここにテキストを入力</div> [/st-square-checkbox]

こんな方におすすめ（ｖ）

こんな方におすすめ

これはダミーのテキストです
これはダミーのテキストです

+ ソースコード（クリックして下さい）

<div class="st-blackboard"> こんな方におすすめ丸形タイプ（ｖ） <ul class="st-blackboard-list st-no-ck-off"> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> </div>

こんな方におすすめ［ｖ］

こんな方におすすめ

これはダミーのテキストです
これはダミーのテキストです

+ ソースコード（クリックして下さい）

<div class="st-blackboard square-checkbox"> こんな方におすすめ角型タイプ［ｖ］ <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=""] [/st-pre]

pre: terminal

 command
<p></p>

+ ソースコード（クリックして下さい）

[st-pre myclass="st-terminal" text="command" fontawesome="fa-terminal"] [/st-pre]

pre: shortcode

[/] shortcode
<p></p>

+ ソースコード（クリックして下さい）

[st-pre-sc myclass="" text="shortcode" fontawesome=""] [/st-pre-sc]

WINGのタグ機能一覧 ②ボックスデザイン編

ボックスデザイン

バナー風ボックス

基本

背景なし（高さ400px）

左寄せ

マイボックス

基本

しかく（枠のみ）

まるみ

参考

関連

メモ

ポイント

注意ポイント

はてな

＋ミニふきだし

shortcode

マイボックス（＋CSSクラス）

メモ

メモ（下線のみ）

メモ（枠のみ）

メモ（枠・下線あり）

注意（下線のみ）

必要なモノ

必要なモノ（ドット下線）

チェックリスト

チェックリスト（ドット下線）

簡単な流れ

簡単な流れ（ドット下線）

見出し付きフリーボックス

基本

注意

はてな

ポイント

メモ

基本（タイトル幅100%）

注意（タイトル幅100%）

はてな（タイトル幅100%）

ポイント（タイトル幅100%）

メモ（タイトル幅100%）

メモボックス

スライドボックス

チェックボックス（番号なしリスト）

こんな方におすすめ（ｖ）

こんな方におすすめ［ｖ］

ガイドマップメニュー

pre

pre: terminal

pre: shortcode

WINGのタグ機能一覧　②ボックスデザイン編