ものづくり推進部

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

2020年4月14日

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

販売元サイト

会話ふきだし

※ r]で反対向き

会話1

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

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

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

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

会話2

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

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

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

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

会話3

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

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

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

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

会話4

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

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

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

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

会話5

あら、んめごだー

あら、んめごだー

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

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

会話6

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

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

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

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

会話7

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

ほんだいが~?こいづアベログで1000円だど?

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

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

会話8

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

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

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

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

ランキング1位(基本)

(・∀・)イイネ!! 南三陸町

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

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

ランキング2位

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

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

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

ランキング3位

んだずにゃー

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

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

ランキング4位以下

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

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

[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以上)

3分割

このテキストは最後に消して下さい(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]

タブ(切り替えボタン)

2つ




タブ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]

3つ





タブ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]

4つ






タブ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]

タブ

2つ




タブ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]

3つ





タブ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]

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

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

きのぷー

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

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

© 2012 いいね!南三陸町