ショートコードの紹介:その他

記事取得

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

[getpost id="496"]

お知らせ・警告

お知らせ

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

[aside]お知らせや注意喚起の文章[/aside]
 お知らせや注意喚起の文章
 
警告や注意は赤く表示されます。typeをwarningにします。

[aside type="warning"]警告の文章。typeにwarningが設定してあることに注意してください。[/aside]
 警告の文章。typeにwarningが設定してあります。
スポンサーリンク

ボタン

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

小さいボタン

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

大きいボタン

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

吹き出しバルーン

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

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

吹き出し方向

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

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

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

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

デザイン見本

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

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

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

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

バッジ

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

[badge name="参照"]<a href="https://tan-taka.com/diver">Wordpressテーマ「Diver」</a>
参照WordPressテーマ「Diver」
 
名前や色を変更することも出来ます。

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

ボーダー

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

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

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

スライダートグル

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

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

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

横棒グラフ

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

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

1位:Kis-My-Ft2
205,7202位:ゆず
49,8483位:Aimer
34,4334位:C-ute
14,4565位:サウンドトラック
14,221

レビュー用の星

レビューでよく見る星がショートコードで簡単に書けます。さらに、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)
(3)
(2.5)
(3.8)
(4)
(2)
(4.3)

SNS

SNSアイコンをショートコードで表示することが可能です。

 SNSショートコードを利用するには、カスタマイザーにてアカウント・urlを入力している必要があります。

facebook

[facebook]

twitter

[twitter]

instagram

[instagram]

googleplus

[googleplus]

デザイン見本

[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/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]
猫2
見ればわかると思うけど、色はgreenとblueの2色よ。おなじみの色ね。セリフの向きを変えたければ、typeを設定しなさい。
スポンサーリンク
あなたはそのサイトで満足していますか?

サイトはただ作るだけで満足ですか?あなたのコンテンツはとっても有益なものがたくさんあります。よいコンテンツも埋もれてしまっては全く意味がありません。
Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しです!!しかし、スケールの小さいサイトを量産するような方法には向いていません。サイトを育てて、長い間愛されることの出来るコンテンツを作成出来るのは、このDiverだけです。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事