
きのぷー
「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
+ ソースコード(クリックして下さい)
[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
よく使うコンテンツをテンプレート(ショートコード)化
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以上)
3分割
+ ソースコード(クリックして下さい)
<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]
タブ(切り替えボタン)
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つ
+ ソースコード(クリックして下さい)
[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つ
+ ソースコード(クリックして下さい)
[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つ
+ ソースコード(クリックして下さい)
[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つ
+ ソースコード(クリックして下さい)
[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]