ショートコード
記事取得
記事の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_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]
[[twitter]][twitter]
[[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]
