WING(アフィンガー5)タグ&ショートコードのデザイン一覧表

WING(アフィンガー5)のタグのデザインやショートコード。
ビジュアルエディタのプルダウンは文字だけなのでいつもどんなデザインだったかわからなくなります。
その都度記事内に表示させたり、Google検索したりして調べていましたが、面倒になったので一覧表を作りました。
基本的にはあまり見出し以外はcssで上書きしないつもりですが、変な感じになってたらすみません。
テキストパーツ
クリップメモ
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=”100″]メモ[/st-cmemo]
[st-cmemo fontawesome=”fa-external-link” iconcolor=”#BDBDBD” bgcolor=”#fafafa” color=”#757575″ iconsize=”100″]外部リンク[/st-cmemo]
[st-cmemo fontawesome=”fa-bookmark” iconcolor=”#BDBDBD” bgcolor=”#fafafa” color=”#757575″ iconsize=”100″]ブックマーク[/st-cmemo]
[st-cmemo fontawesome=”fa-bullhorn” iconcolor=”#FFEB3B” bgcolor=”#FFFDE7″ color=”#000000″ iconsize=”100″]おしらせ[/st-cmemo]
[st-cmemo fontawesome=”fa-question-circle” iconcolor=”#4FC3F7″ bgcolor=”#E1F5FE” color=”#000000″ iconsize=”100″]はてな[/st-cmemo]
[st-cmemo fontawesome=”fa-comments” iconcolor=”#F48FB1″ bgcolor=”#FCE4EC” color=”#000000″ iconsize=”100″]コメント[/st-cmemo]
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=”150″]コード[/st-cmemo]
[st-cmemo fontawesome=”fa-lightbulb-o” iconcolor=”#FFA726″ bgcolor=”#FFF3E0″ color=”#000000″ iconsize=”100″]ポイント[/st-cmemo]
[st-cmemo fontawesome=”fa-user” iconcolor=”#4FC3F7″ bgcolor=”#E1F5FE” color=”#000000″ iconsize=”150″]ユーザー[/st-cmemo]
[st-cmemo fontawesome=”st-svg-bigginer_l” iconcolor=”#9CCC65″ bgcolor=”#F1F8E9″ color=”#000000″ iconsize=”100″]初心者[/st-cmemo]
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ iconsize=”100″]注意文[/st-cmemo]
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=”100″]注意文(グレー)[/st-cmemo]
「[?]ガイド※使用不可」はカスタマイズができるようなガイドが書かれたコード。
ミニ吹き出し
複合
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#FFC107″ bgcolor=”#FFFDE7″ color=”#000000″ iconsize=”200″]自由なメモ[/st-cmemo]
[st-cmemo fontawesome=”fa-hand-o-right” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]ココがポイント[/st-cmemo]
[st-cmemo fontawesome=”fa-thumbs-o-up” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]ココがおすすめ[/st-cmemo]
[st-cmemo fontawesome=”fa-thumbs-o-down” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]ココがダメ[/st-cmemo]
[st-cmemo fontawesome=”fa-thumbs-o-down” iconcolor=”#3F51B5″ bgcolor=”#E8EAF6″ color=”#000000″ iconsize=”200″]ココがダメ[/st-cmemo]
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ iconsize=”200″]ココに注意[/st-cmemo]
[st-cmemo fontawesome=”fa-search” iconcolor=”#66BB6A” bgcolor=”#E8F5E9″ color=”#000000″ iconsize=”200″]もっと詳しく[/st-cmemo]
[st-cmemo fontawesome=”fa-user” iconcolor=”#F06292″ bgcolor=”#FCE4EC” color=”#000000″ iconsize=”200″]◯才女性[/st-cmemo]
[st-cmemo fontawesome=”fa-user” iconcolor=”#42A5F5″ bgcolor=”#E3F2FD” color=”#000000″ iconsize=”200″]◯才男性[/st-cmemo]
複合(アイコンなし)
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#FFFDE7″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]自由なメモ[/st-mybox]
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]ココがポイント[/st-mybox]
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]ココがおすすめ[/st-mybox]
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]ココがダメ[/st-mybox]
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#ffebee” borderwidth=”0″ borderradius=”5″ titleweight=”bold”]ココに注意[/st-mybox]
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8F5E9″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]もっと詳しく[/st-mybox]
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E1F5FE” borderwidth=”0″ borderradius=”5″ titleweight=”bold”]はてなマーク[/st-mybox]
まるもじ(小)
まるもじ(大)
カスタムボタン
[st-mybutton 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-mcbutton url=”#” title=”MCボタン” 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-step step_no=”1″]ステップ[/st-step]
ラベル
画像など色々なものにラベルが掛けられる。
(ブログカードはもともとラベルが掛けられます。)
[st-label label=”ラベル” bgcolor=”#FBC02D” color=”#FFFFFF”]
[st-card id=2359 label=”” name=”” bgcolor=”” color=”” readmore=”on”]
[/st-label]
流れる文字(marquee風)
流れる文字(marquee風)
ボックスデザイン
バナー風ボックス(基本)
背景画像を設定するだけで簡単にバナー風のボックスが作れます。リンクも設定すれば可能!
[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=”https://kariruno.com/wp-content/uploads/2016/05/d223f72dcd1ad2852e95ccc98f228854_s.jpg” blur=”on” left=”” margin_bottom=”0″]
[/st-flexbox]
マイボックス
[[st-mybox title=”見出し” fontawesome=”Webアイコン” color=”見出し色” bordercolor=”枠線カラー” bgcolor=”背景色” borderwidth=”枠線の太さ(px)” borderradius=”角丸(px)” titleweight=”見出しの太さ(bold)“]
ここにテキスト
[/st-mybox]]
[st-mybox title=”基本” fontawesome=”fa-check-circle” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]基本[/st-mybox]
[st-mybox title=”四角(枠のみ)” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold”]四角(枠のみ)[/st-mybox]
[st-mybox title=”まるみ” fontawesome=”” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]まるみ[/st-mybox]
[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”5″ titleweight=”bold”]ポイント[/st-mybox]
[st-mybox title=”注意ポイント” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef9a9a” bgcolor=”#ffebee” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]注意ポイント[/st-mybox]
[st-mybox title=”はてな” fontawesome=”fa-question-circle” color=”#03A9F4″ bordercolor=”#B3E5FC” bgcolor=”#E1F5FE” borderwidth=”2″ borderradius=”5″ titleweight=”bold”]はてな[/st-mybox]
見出し付きフリーボックス
[st-midasibox title=”見出し(全角15文字)” fontawesome=”” bordercolor=”” color=”” bgcolor=”” borderwidth=”” borderradius=”” titleweight=”bold”]
[/st-midasibox]
メモボックス
メモボックス
メモボックス
スライドボックス
こんな方におすすめ
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
ガイドマップメニュー
会話吹き出し
[st-kaiwa1]会話吹き出し[/st-kaiwa1]
[st-kaiwa1 r]会話吹き出し[/st-kaiwa1]
ランキング見出し
[st-rank rankno=”1″ bgcolor=”#f3f3f3″ color=”#000″ bordercolor=”#ccc” radius=”4″ star=”5″]ランキング1位(基本)[/st-rank]
[st-rank rankno=”2″ bgcolor=”#f3f3f3″ color=”#000″ bordercolor=”#ccc” radius=”4″ star=”4″]ランキング2位[/st-rank]
[st-rank rankno=”3″ bgcolor=”#f3f3f3″ color=”#000″ bordercolor=”#ccc” radius=”4″ star=”3″]ランキング3位[/st-rank]
[st-rank rankno=”4″ bgcolor=”#f3f3f3″ color=”#000″ bordercolor=”#ccc” radius=”4″ star=”2″]ランキング4位以下[/st-rank]
レイアウト
PCとTab3分割
左側のコンテンツ33%
真ん中のコンテンツ33%
右側のコンテンツ33%
PCとTab左右40:60%
左側のコンテンツ40%
右側のコンテンツ60%
PCとTab左右50%
左側のコンテンツ50%
右側のコンテンツ50%
全サイズ左右30:70%
左側のコンテンツ30%
右側のコンテンツ70%
全サイズ左右50%
左側のコンテンツ50%
右側のコンテンツ50%
全サイズ左右free%
左側のコンテンツ%
右側のコンテンツ%
均等横並び
-
横並びコンテンツ
-
横並びコンテンツ
-
横並びコンテンツ
その他パーツ
スター
スター(5)
[star5]
スター(4.5)
[star45]
スター(4)
[star4]
スター(3.5)
[star35]
スター(3)
[star3]
スター(2)
[star2]
スター(1)
[star1]
年月(自動更新)
[st-date]
(自動で年月が変更されます)
アドセンス
ウィジェットに設定されたアドセンスを表示させます。
オリジナルショートコード
ウィジェットに設定されたオリジナルショートコードを表示させます。
YouTube
YouTubeの動画IDを入れると静止画リンクとして表示されます。
三角(下矢印)
[st-under-t color=”#000″]
タグにはないけど実装されているもの
下矢印
[[下矢印]]
[下矢印]
マル
[[st-maru]]
[st-maru]
バツ
[[st-x]]
[st-x]
まとめ
WING(アフィンガー5)タグ&ショートコードのデザイン一覧表、いかがでしたでしょうか。
こうしてみると、パターンはたくさんありますが、実際ブログで使用するのは少なさそうなので、必要なものだけステ子に覚えさせるのもいいかもしれないですね。