きのぷー
「WING」の記事作成で使えるタグ機能紹介 第４回は「会話ふきだし、ランキング、レイアウト」の一覧です。
会話ふきだし
※ 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]
会話７
+ ソースコード（クリックして下さい）
[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
よく使うコンテンツをテンプレート（ショートコード）化
Slug
よく使うコンテンツをテンプレート（ショートコード）化
RANK
よく使うランキングをテンプレート（ショートコード）化
[st-rankgroup id="" label="" name=""]
レイアウト
全サイズ
左右 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%
+ ソースコード（クリックして下さい）
<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以上）
３分割
+ ソースコード（クリックして下さい）
<div class="clearfix responbox33">
<div class="lbox"> </div>
<div class="lbox"> </div>
<div class="lbox"> </div>
</div>
左右 30:70%
+ ソースコード（クリックして下さい）
<div class="clearfix responbox30">
<div class="lbox"> </div>
<div class="rbox"> </div>
</div>
左右 70:30%
このテキストは最後に消して下さい（30%）※モバイル（599px以下）ではこちらが上になります
+ ソースコード（クリックして下さい）
<div class="clearfix responbox70">
<div class="lbox"> </div>
<div class="rbox"> </div>
</div>
左右 40:60%
+ ソースコード（クリックして下さい）
<div class="clearfix responbox">
<div class="lbox"> </div>
<div class="rbox"> </div>
</div>
左右 60:40%
このテキストは最後に消して下さい（40%）※モバイル（599px以下）ではこちらが上になります
+ ソースコード（クリックして下さい）
<div class="clearfix responbox60">
<div class="lbox"> </div>
<div class="rbox"> </div>
</div>
左右 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]
タブ（切り替えボタン）
２つ
+ ソースコード（クリックして下さい）
[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]
３つ
+ ソースコード（クリックして下さい）
[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]
４つ
+ ソースコード（クリックして下さい）
[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]
タブ
２つ
+ ソースコード（クリックして下さい）
[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]
３つ
+ ソースコード（クリックして下さい）
[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]
基本（ステップ）
+ ソースコード（クリックして下さい）
[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]
センター（ステップ）
+ ソースコード（クリックして下さい）
[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]
