ものづくり推進部

WINGのタグ機能一覧 ③カスタムボタン編

2020年4月13日

WINGのタグ機能一覧 ③カスタムボタン編
きのぷー
「WING」の記事作成で使えるタグ機能紹介 第3回は「カスタムボタン」の一覧です。

販売元サイト

カスタムボタン

ノーマル

[st-mybutton class="追加クラス" url="リンク先URL" title="ボタンテキスト" rel="nofollow" fontawesome="Webアイコン(前)" target="リンク先を新しく開く(blank)" color="文字色" bgcolor="背景色(下)" bgcolor_top="背景色(上)" bordercolor="枠線カラー" borderwidth="枠線の太さ(px)" borderradius="角丸(px)" fontsize="文字サイズ(%)" fontweight="文字の太さ(bold)" width="幅(%)" fontawesome_after="Webアイコン(後)" shadow="ボタンの影色" ref="光る演出(on)”]

基本

ボタン

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

[st-mybutton class="" url="#" title="ボタン" rel="" fontawesome="" target="" color="#000000" bgcolor="#FFF" bgcolor_top="" bordercolor="#CCC" borderwidth="3" borderradius="0" fontsize="" fontweight="" width="100" fontawesome_after="" shadow="" ref=""]

詳しくはコチラ(オレンジ)

詳しくはコチラ

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

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="on"]

詳しくはコチラ(レッド)

詳しくはコチラ

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

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on"]

詳しくはコチラ(グリーン)

詳しくはコチラ

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

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#43A047" bgcolor_top="#66BB6A" bordercolor="#81C784" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#388E3C" ref="on"]

詳しくはコチラ(ブルー)

詳しくはコチラ

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

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on"]

お問合せ

お問合せ

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

[st-mybutton url="#" title="お問合せ" rel="" fontawesome="fa-envelope" target="" color="#fff" bgcolor="#03A9F4" bgcolor_top="#14b4fc" bordercolor="#039BE5" borderwidth="1" borderradius="5" fontsize="" fontweight="" width="90" fontawesome_after="" shadow="#039BE5" ref="on"]

もっと詳しく(オレンジ)

もっと詳しく

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

[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]

もっと詳しく(ピンク)

もっと詳しく

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

[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#F48FB1" bgcolor_top="#f6a6c1" bordercolor="#F48FB1" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]

もっと詳しく(ブルー)

もっと詳しく

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

[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#4FC3F7" bgcolor_top="#67cbf8" bordercolor="#4FC3F7" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]

人気ランキング

人気ランキング

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

[st-mybutton url="#" title="人気ランキング" rel="" fontawesome="st-svg-oukan" target="" color="#fff" bgcolor="#FBC02D" bgcolor_top="#fbc846" bordercolor="#FBC02D" borderwidth="1" borderradius="5" fontsize="110" fontweight="bold" width="90" fontawesome_after="" shadow="" ref="on"]

ランキングはコチラ

ランキングはコチラ

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

[st-mybutton url="#ranking" title="ランキングはコチラ" rel="" fontawesome="fa-angle-double-down" target="" color="#1a1a1a" bgcolor="#fdef4e" bgcolor_top="" bordercolor="#fceb1c" borderwidth="1" borderradius="" fontsize="95" fontweight="" width="" fontawesome_after="" shadow="" ref=""]

角丸

基本

角丸ボタン

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

[st-mybutton class="" url="#" title="角丸ボタン(基本形)" rel="" fontawesome="" target="" color="#424242" bgcolor="" bgcolor_top="" bordercolor="#CCC" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

角丸ボタン(オレンジ)

角丸ボタン

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

[st-mybutton class="" url="#" title="角丸ボタン(オレンジ)" rel="" fontawesome="" target="" color="#FFB74D" bgcolor="" bgcolor_top="" bordercolor="#FFB74D" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

角丸ボタン(レッド)

角丸ボタン

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

[st-mybutton class="" url="#" title="角丸ボタン(レッド)" rel="" fontawesome="" target="" color="#ef5350" bgcolor="" bgcolor_top="" bordercolor="#ef5350" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

角丸ボタン(グリーン)

角丸ボタン

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

[st-mybutton class="" url="#" title="角丸ボタン(グリーン)" rel="" fontawesome="" target="" color="#9CCC65" bgcolor="" bgcolor_top="" bordercolor="#9CCC65" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

角丸ボタン(ブルー)

角丸ボタン

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

[st-mybutton class="" url="#" title="角丸ボタン(ブルー)" rel="" fontawesome="" target="" color="#4FC3F7" bgcolor="" bgcolor_top="" bordercolor="#4FC3F7" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref=""]

ミニ

基本

ボタン

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

[st-mybutton-mini url="#" title="ボタン" rel="" fontawesome="" target="" color="#000000" bgcolor="#f3f3f3" bgcolor_top="" borderradius="3" fontsize="" fontweight="" fontawesome_after="" shadow="#BDBDBD" ref=""]

詳しくはコチラ(オレンジ)

詳しくはコチラ

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

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFB74D" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref=""]

詳しくはコチラ(レッド)

詳しくはコチラ

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

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref=""]

詳しくはコチラ(グリーン)

詳しくはコチラ

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

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#9CCC65" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#8BC34A" ref=""]

詳しくはコチラ(ブルー)

詳しくはコチラ

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

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#4FC3F7" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#03A9F4" ref=""]

MCボタン

オレンジ

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

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

[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#FFB300" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

レッド

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

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

[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

グリーン

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

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

[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#43A047" bgcolor_top="#66BB6A" bordercolor="#81C784" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#388E3C" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

ブルー

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

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

[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#039BE5" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

ボックスメニュー

基本(4列)

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

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

サブあり(4列)

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

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

縦並びタイプ

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

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type="vertical"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

縦並びタイプ(サブあり)

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

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type="vertical"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

縦並びタイプ(単品)

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

[st-box-btn myclass="" pc_show="1" margin="0 0 10px 0" type="vertical"]
[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

ボタンA

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

<div class="rankstlink-r2">
<p><a href="#">ボタンA</a></p>
</div>

ボタンB

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

<div class="rankstlink-l2">
<p><a href="#">ボタンB</a></p>
</div>

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

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

きのぷー

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

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

© 2012 いいね!南三陸町