ものづくり推進部

WINGのタグ機能一覧　④会話ふきだし、ランキング、レイアウト編

2020年4月14日

WINGのタグ機能一覧　④会話ふきだし、ランキング、レイアウト編
きのぷー
「WING」の記事作成で使えるタグ機能紹介　第４回は「会話ふきだし、ランキング、レイアウト」の一覧です。

販売元サイト

AFFINGER（WING）
 
AFFINGER（WING）
https://the-money.net
「稼ぐ」に特化したアフィリエイトテーマ

会話ふきだし

※　r]で反対向き

会話１

歌津りょう
んで、俺がしてけっから

んで、俺がしてけっから
歌津りょう

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

[st-kaiwa1]ここにテキストを入力[/st-kaiwa1]
[st-kaiwa1 r]ここにテキストを入力[/st-kaiwa1]

会話２

志津川美帆
ご飯大盛りにしてけしぇ

ご飯大盛りにしてけしぇ
志津川美帆

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

[st-kaiwa2]ここにテキストを入力[/st-kaiwa2]
[st-kaiwa2 r]ここにテキストを入力[/st-kaiwa2]

会話３

きのぷー
明日、氷川きよしくるっつど

なぬかだっぺ、んで化粧すねげねっちゃ
きのぷー

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

[st-kaiwa3]ここにテキストを入力[/st-kaiwa3]
[st-kaiwa3 r]ここにテキストを入力[/st-kaiwa3]

会話４

青葉屋さん
明日雨ふるっつよ

はいぐかだづげやっぺし
青葉屋さん

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

[st-kaiwa4]ここにテキストを入力[/st-kaiwa4]
[st-kaiwa4 r]ここにテキストを入力[/st-kaiwa4]

会話５

あら、んめごだー

あら、んめごだー

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

[st-kaiwa5]ここにテキストを入力[/st-kaiwa5]
[st-kaiwa5 r]ここにテキストを入力[/st-kaiwa5]

会話６

わさわさすてっと、置いでいぐど！

わさわさすてっと、置いでいぐど！

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

[st-kaiwa4]ここにテキストを入力[/st-kaiwa4]
[st-kaiwa6 r]ここにテキストを入力[/st-kaiwa6]

会話７

あら～、今日いいふぐ着て～

ほんだいが～？こいづアベログで1000円だど？

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

[st-kaiwa4]ここにテキストを入力[/st-kaiwa4]
[st-kaiwa7 r]ここにテキストを入力[/st-kaiwa7]

会話８

おめ、ジャンプたまってきたら、まるっとげよ。

最近のドラマ、むがすのわがすけすばりだおんな。

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

[st-kaiwa8]ここにテキストを入力[/st-kaiwa8]
[st-kaiwa8 r]ここにテキストを入力[/st-kaiwa8]

ランキング

[st-rank rankno="ランキング（1～3又は空）" bgcolor="背景色" color="文字色" bordercolor="枠線カラー" radius="角丸（px）" star="スター（5,4,3,2,1）"]ここにテキスト[/st-rank]

ランキング１位（基本）

(・∀・)ｲｲﾈ!! 南三陸町

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

[st-rank rankno="1" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""]ここにテキストを入力[/st-rank]

ランキング２位

こいずいいよっす！かってがっしゃい

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

[st-rank rankno="2" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""]ここにテキストを入力[/st-rank]

ランキング３位

んだずにゃー

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

[st-rank rankno="3" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""]ここにテキストを入力[/st-rank]

ランキング４位以下

きゅうりどたまなばうるがす

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

[st-rank rankno="4" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""]ここにテキストを入力[/st-rank]

ID

よく使うコンテンツをテンプレート（ショートコード）化

[st_af id=""]

Slug

よく使うコンテンツをテンプレート（ショートコード）化

[st_af name=""]

RANK

よく使うランキングをテンプレート（ショートコード）化

[st-rankgroup id="" label="" name=""]

レイアウト

全サイズ

左右 30:70%

このテキストは最後に消して下さい（30%）

このテキストは最後に消して下さい（70%）

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

<div class="clearfix responbox30 smart30">
<div class="lbox">
<p><img src="#" width="100%" /></p>
</div>
<div class="rbox">
<p><img src="#" width="100%" /></p>
</div>
</div>

左右 50%

このテキストは最後に消して下さい（50%）

このテキストは最後に消して下さい（50%）

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

<div class="clearfix responbox50 smart50">
<div class="lbox">
<p><img src="#" width="100%" /></p>
</div>
<div class="rbox">
<p><img src="#" width="100%" /></p>
</div>
</div>

左右 free%

このテキストは最後に消して下さい（%）

このテキストは最後に消して下さい（%）

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

<div class="clearfix responboxfree smartfree">
<div class="lbox" style="width: 50%;">
<p><img src="#" width="100%" /></p>
</div>
<div class="rbox" style="width: 50%;">
<p><img src="#" width="100%" /></p>
</div>
</div>

均等横並び

  • 横並びコンテンツ
  • 横並びコンテンツ
  • 横並びコンテンツ

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

<div class="kintou">
<ul>
<li><　</li>
<li><　</li>
<li><　</li>
</ul>
</div>

PCとTab（959px以上）

３分割

このテキストは最後に消して下さい（33%）

このテキストは最後に消して下さい（33%）

このテキストは最後に消して下さい（33%）

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

<div class="clearfix responbox33">
<div class="lbox">　</div>
<div class="lbox">　</div>
<div class="lbox">　</div>
</div>

左右 30:70%

このテキストは最後に消して下さい（30%）

このテキストは最後に消して下さい（70%）

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

<div class="clearfix responbox30">
<div class="lbox">　</div>
<div class="rbox">　</div>
</div>

左右 70:30%

このテキストは最後に消して下さい（70%）

このテキストは最後に消して下さい（30%）※モバイル（599px以下）ではこちらが上になります

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

<div class="clearfix responbox70">
<div class="lbox">　</div>
<div class="rbox">　</div>
</div>

左右 40:60%

このテキストは最後に消して下さい（40%）

このテキストは最後に消して下さい（60%）

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

<div class="clearfix responbox">
<div class="lbox">　</div>
<div class="rbox">　</div>
</div>

左右 60:40%

このテキストは最後に消して下さい（60%）

このテキストは最後に消して下さい（40%）※モバイル（599px以下）ではこちらが上になります

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

<div class="clearfix responbox60">
<div class="lbox">　</div>
<div class="rbox">　</div>
</div>

左右 50%

このテキストは最後に消して下さい（50%）

このテキストは最後に消して下さい（50%）

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

<div class="clearfix responbox50">
<div class="lbox">　</div>
<div class="rbox">　</div>
</div>

DIV

任意のクラスを設定したdivを作成して囲むショートコード

メイン

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

[st-div class="（任意のクラス名）" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]
コンテンツ
[/st-div]

サブ

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

[st-div-a class="" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]

[/st-div-a]

背景ワイド


いいね！南三陸町

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

[st-wide-background myclass="" backgroud_image="" bgcolor="#fafafa" align="" add_style=""]

[/st-wide-background]

タブ（切り替えボタン）

２つ




タブ1のコンテンツ

タブ2のコンテンツ


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

[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main]
[/st-tab-content]

３つ





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


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

[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor=""]
タブ3のコンテンツ
[/st-tab-main]
[/st-tab-content]

４つ






タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

タブ4のコンテンツ


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

[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ4" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor=""]
タブ3のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor=""]
タブ4のコンテンツ
[/st-tab-main]
[/st-tab-content]

タブ

２つ




タブ1のコンテンツ

タブ2のコンテンツ


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

[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="1" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="2" checked=""]
[st-tab-main bgcolor="" bordercolor="" value="1"]
タブ1のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor="" value="2"]
タブ2のコンテンツ
[/st-tab-main]
[/st-tab-content]

３つ





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


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

[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="1" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="2" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="3" checked=""]
[st-tab-main bgcolor="" bordercolor="" value="1"]
タブ1のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor="" value="2"]
タブ2のコンテンツ
[/st-tab-main]
[st-tab-main bgcolor="" bordercolor="" value="3"]
タブ3のコンテンツ
[/st-tab-main]
[/st-tab-content]

タイムライン

基本


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


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

[st-timeline myclass="" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

センター


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


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

[st-timeline myclass="" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

基本（ステップ）


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


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

[st-timeline myclass="" add_style=""]
[st-timeline-list text="step.1" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.2" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.3" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

センター（ステップ）


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


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

[st-timeline myclass="" add_style=""]
[st-timeline-list text="step.1" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.2" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="step.3" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

ブログカード

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

[st-timeline myclass="" add_style=""]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[/st-timeline]

タイムライン（カウント）

基本


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


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

[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="#039BE5" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

センター


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


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

[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

ブログカード

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

[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[/st-timeline]

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

シェアする
ツイートする
Twitter で
  • この記事を書いた人
  • 最新記事

きのぷー

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

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

© 2012 いいね！南三陸町