くらしにツナガル１１

記事取得

記事のidを渡せば、非常に簡単に内部リンクをすること可能です。

[[getpost id="496"]]

[getpost id=”496″]

お知らせ・警告

お知らせ

軽いお知らせは、黄色く表示されます。

[[aside]お知らせや注意喚起の文章[/aside]]

[aside]お知らせや注意喚起の文章[/aside]

警告や注意は赤く表示されます。typeをwarningにします。

[[aside type="warning"]警告の文章。typeにwarningが設定してあることに注意してください。[/aside]]

[aside type=”warning”]警告の文章。typeにwarningが設定してあります。[/aside]

ボタン

ボタンは、ショートコード内にリンクを書くことでボタンになります。

小さいボタン

[[btn url="https://google.com" color="#F44336"]Google[/btn]]

[btn url=”https://google.com” color=”#F44336″]Google[/btn]

大きいボタン

[[btn url="https://google.com" type="big"]Google[/btn]]

[btn url=”https://google.com” type=”big”]Google[/btn]

吹き出しバルーン

[[balloon]ここに吹き出しで表示したいテキストが入ります。タグやショートコードも通常と同じように使うことが出来て、デザインの幅が広がります。
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
[/balloon]]

[balloon]ここに吹き出しで表示したいテキストが入ります。タグやショートコードも通常と同じように使うことが出来て、デザインの幅が広がります。

• リスト
• リスト
• リスト

[/balloon]

吹き出し方向

[[balloon type="left"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]]

[[balloon type="right"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]]

[[balloon type="top"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]]

[[balloon type="bottom"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]]

[balloon type=”left”]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type=”right”]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type=”top”]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type=”bottom”]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

デザイン見本

[[colwrap]
[col4]画像[/col4]
[col4_3][balloon type="left"]僕はペンギン。群れで動くことを好む動物だ。でも今は一人。なんでかって？はぐれたからさ。
向こう側にペンギンの群れがあるだろ？あれは違う部族なんだ。間違えて混じっていくと、違うグループだということに誰も気付くことなく一生を終えてしまう。
そんな寂しい人生は御免だからこうやって一人でいるんだ
あ、ペンギン募集している動物園あったら紹介してくれ。よろしくな。
[/balloon][/col4_3]
[/colwrap]]

[colwrap]
[col4][/col4]
[col4_3][balloon type=”left”]僕はペンギン。群れで動くことを好む動物だ。でも今は一人。なんでかって？はぐれたからさ。

向こう側にペンギンの群れがあるだろ？あれは違う部族なんだ。間違えて混じっていくと、違うグループだということに誰も気付くことなく一生を終えてしまう。

そんな寂しい人生は御免だからこうやって一人でいるんだ。

あ、ペンギン募集している動物園あったら紹介してくれ。よろしくな。
[/balloon][/col4_3]
[/colwrap]

バッジ

参照リンクの前や、ちょっとだけ目立たせたいテキストの前にバッジを表示出来ます。

[[badge name="参照"]]<a href="https://tan-taka.com/diver">Wordpressテーマ「Diver」</a>

[badge name=”参照”]WordPressテーマ「Diver」

名前や色を変更することも出来ます。

[[badge name="おすすめ！" color="#f55"]]<a href="https://tan-taka.com/diver">Wordpressテーマ「Diver」</a>

[badge name=”おすすめ！” color=”#f55″]WordPressテーマ「Diver」

ボーダー

ボーダーを任意の場所に引くことが出来ます。

[[border]]

[border]

色や高さを指定することによってボーダーのスタイルを自由に変更することが可能です。

[[border color="#33f" height="15"]]

[border color=”#33f” height=”15″]

スライダートグル

隠していた要素をクリックして表示させることができます。

[[toggle title="ここにトグルの見出しを表示します"]このショートコードで囲んだ内容が隠されます。画像等も自由自在に記述可能です。[/toggle]]

[toggle title=”ここにトグルの見出しを表示します”]このショートコードで囲んだ内容が隠されます。画像等も自由自在に記述可能です。[/toggle]

[[toggle title="menu1"]content1[/toggle]][[toggle title="menu2"]content2[/toggle]][[toggle title="menu3"]content3[/toggle]]

[toggle title=”menu1″]content1[/toggle][toggle title=”menu2″]content2[/toggle][toggle title=”menu3″]content3[/toggle]
つなげて書くと、Q&A等でも利用することができます。

横棒グラフ

横棒でグラフのように表現することが可能です。

１位：Kis-My-Ft2
[[barchart width="98%" color="#f44336"]205,720[/barchart]]２位：ゆず
[[barchart width="50%" color="#d4c915"]49,848[/barchart]]３位：Aimer
[[barchart width="40%" color="#42bb6a"]34,433[/barchart]]４位：C-ute
[[barchart width="25%" color="#1566d4"]14,456[/barchart]]５位：サウンドトラック
[[barchart width="23%" color="#71b9d8"]14,221[/barchart]]

１位：Kis-My-Ft2
[barchart width=”98%” color=”#f44336″]205,720[/barchart]２位：ゆず
[barchart width=”50%” color=”#d4c915″]49,848[/barchart]３位：Aimer
[barchart width=”40%” color=”#42bb6a”]34,433[/barchart]４位：C-ute
[barchart width=”25%” color=”#1566d4″]14,456[/barchart]５位：サウンドトラック
[barchart width=”23%” color=”#71b9d8″]14,221[/barchart]

レビュー用の星

レビューでよく見る星がショートコードで簡単に書けます。さらに、0~5の間であれば、1.5や2.84と言った細かい数字を設定できます。

[[star score="3" size=""]](3)
[[star score="2.5" size=""]](2.5)
[[star score="3.8" size="big"]](3.8)
[[star score="4" size="big"]](4)
[[star score="2" size="small"]](2)
[[star score="4.3" size="small"]](4.3)

[star score=”3″ size=””](3)
[star score=”2.5″ size=””](2.5)
[star score=”3.8″ size=”big”](3.8)
[star score=”4″ size=”big”](4)
[star score=”2″ size=”small”](2)
[star score=”4.3″ size=”small”](4.3)

SNS

SNSアイコンをショートコードで表示することが可能です。
[aside]SNSショートコードを利用するには、カスタマイザーにてアカウント・urlを入力している必要があります。[/aside]

facebook

[[facebook]]

[facebook]

twitter

[[twitter]]

[twitter]

instagram

[[instagram]]

[instagram]

googleplus

[[googleplus]]

[googleplus]

デザイン見本

[[colwrap]
[col4][facebook][/col4]
[col4][twitter][/col4]
[col4][instagram][/col4]
[col4][googleplus][/col4]
[/colwrap]]



[colwrap]
[col4] [facebook] [/col4]
[col4] [twitter] [/col4]
[col4] [instagram] [/col4]
[col4] [googleplus] [/col4]
[/colwrap]

会話風

[[voice icon="https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/03/pingu.jpeg" name="ピングー"]こんにちは。私はピングー。ペンギンなの。[/voice]]

[voice icon=”https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/03/pingu.jpeg” name=”ピングー”]こんにちは。私はピングー。ペンギンなの。[/voice]

[[voice icon="https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/03/2352334045_6b06307466.jpg" name="猫" type="right" color="blue"]私は猫。人間は、上目遣いで近寄るとすぐ餌をくれる。お腹を向けると撫でてくれるの。でも、すぐ調子に乗って撫ですぎちゃうところがあるわよね。そんな時は、思いっきり猫パンチよ。想像を超える強さだから気をつけなさい。[/voice]]

[voice icon=”https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/03/2352334045_6b06307466.jpg” name=”猫” type=”right” color=”blue”]私は猫。人間は、上目遣いで近寄るとすぐ餌をくれる。お腹を向けると撫でてくれるの。でも、すぐ調子に乗って撫ですぎちゃうところがあるわよね。そんな時は、思いっきり猫パンチよ。想像を超える強さだから気をつけなさい。[/voice]

[[voice icon="https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/03/2352334045_6b06307466.jpg" name="猫2"  color="green"]見ればわかると思うけど、色はgreenとblueの2色よ。おなじみの色ね。セリフの向きを変えたければ、typeを設定しなさい。[/voice]]

[voice icon=”https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/03/2352334045_6b06307466.jpg” name=”猫2″ color=”green”]見ればわかると思うけど、色はgreenとblueの2色よ。おなじみの色ね。セリフの向きを変えたければ、typeを設定しなさい。[/voice]