ものづくり推進部

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

2020年4月12日

WINGのタグ機能一覧 ②ボックスデザイン編
きのぷー
「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]

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

基本

見出し(全角15文字)


 

+ ソースコード(クリックして下さい)

[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%)

見出し(全角15文字)


 

+ ソースコード(クリックして下さい)

[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]

チェックボックス(番号なしリスト)

テキスト1
テキスト2

+ ソースコード(クリックして下さい)

[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]

この記事が気に入ったら
いいね ! しよう

  • この記事を書いた人
  • 最新記事

きのぷー

2010年南三陸町初訪問。震災後もボランティア活動等を通じて地元との交流を重ね、2012年4月より「いいね!南三陸町」をスタート。町内各地を訪ねて見つけた町の魅力を伝えます。

-ものづくり推進部
-, ,

© 2012 いいね!南三陸町