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

投稿日:

WING(アフィンガー5)のタグのデザインやショートコード。
ビジュアルエディタのプルダウンは文字だけなのでいつもどんなデザインだったかわからなくなります。

その都度記事内に表示させたり、Google検索したりして調べていましたが、面倒になったので一覧表を作りました。

基本的にはあまり見出し以外はcssで上書きしないつもりですが、変な感じになってたらすみません。


テキストパーツ

クリップメモ

メモ

外部リンク

ブックマーク

おしらせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文(グレー)

「[?]ガイド※使用不可」はカスタマイズができるようなガイドが書かれたコード。

ミニ吹き出し

基本

オレンジ

ピンク

ブルー

グリーン

レッド

「[?]ガイド※使用不可」はカスタマイズができるようなガイドが書かれたコード。

複合

自由なメモ

自由なメモ

ココがポイント

ココがポイント

ココがおすすめ

ココがおすすめ

ココがダメ

ココがダメ

ココがダメ

ココがダメ

ココに注意

ココに注意

さらに詳しく

もっと詳しく

◯才女性

◯才女性

◯才男性

◯才男性

複合(アイコンなし)

自由なメモ

自由なメモ

ココがポイント

ココがポイント

ココがおすすめ

ココがおすすめ

ココがダメ

ココがダメ

ココに注意

ココに注意

もっと詳しく

もっと詳しく

つまづきポイント

はてなマーク

まるもじ(小)

基本
オレンジ
ピンク
ブルー
うすい注意
注意
「[?]ガイド※使用不可」はカスタマイズができるようなガイドが書かれたコード。

まるもじ(大)

基本

オレンジ

ピンク

ブルー

はてな

チェック

うすい注意

注意

「[?]ガイド※使用不可」はカスタマイズができるようなガイドが書かれたコード。

カスタムボタン

ボタン

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

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

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

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

お問合せ

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

もっと詳しく(ピンク)

もっと詳しく(ブルー)

人気ランキング

ランキングはコチラ

太字のテキスト

MCボタン

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

ステップ

step
1
ステップ

ラベル

画像など色々なものにラベルが掛けられる。
(ブログカードはもともとラベルが掛けられます。)

流れる文字(marquee風)

流れる文字(marquee風)

ボックスデザイン

バナー風ボックス(基本)

背景画像を設定するだけで簡単にバナー風のボックスが作れます。リンクも設定すれば可能!

バナー風ボックス(基本)

マイボックス

[st-mybox title="見出し" fontawesome="Webアイコン" color="見出し色" bordercolor="枠線カラー" bgcolor="背景色" borderwidth="枠線の太さ(px)" borderradius="角丸(px)" titleweight="見出しの太さ(bold)"]

ここにテキスト

[/st-mybox]

基本

基本

四角(枠のみ)

四角(枠のみ)

まるみ

まるみ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

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

見出し(全角15文字)

メモボックス

メモボックス

メモボックス

スライドボックス

 

+ クリックして下さい

クリックで開かれる内容です

こんな方におすすめ

こんな方におすすめ

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

ガイドマップメニュー

会話吹き出し

会話吹き出し
会話吹き出し

ランキング見出し

ランキング1位(基本)

ランキング2位

ランキング3位

ランキング4位以下

レイアウト

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)

スター(4.5)

スター(4)

スター(3.5)

スター(3)

スター(2)

スター(1)

年月(自動更新)

2018年12月

(自動で年月が変更されます)

アドセンス

ウィジェットに設定されたアドセンスを表示させます。

 オリジナルショートコード

ウィジェットに設定されたオリジナルショートコードを表示させます。

YouTube

YouTubeの動画IDを入れると静止画リンクとして表示されます。

三角(下矢印)

タグにはないけど実装されているもの

下矢印

[下矢印]

マル

[st-maru]

バツ

[st-x]

まとめ

WING(アフィンガー5)タグ&ショートコードのデザイン一覧表、いかがでしたでしょうか。

こうしてみると、パターンはたくさんありますが、実際ブログで使用するのは少なさそうなので、必要なものだけステ子に覚えさせるのもいいかもしれないですね。

-ウェブ・ブログ
-,

Copyright© カリルノ , 2018 All Rights Reserved.