cucinaamica

人物などの画像やアイコンに吹き出しを付けて任意のテキストを表示できるショートコードです。

吹き出し表示例

[talk words=”ここに吹き出しのテキストを表示します。” avatarimg=”http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/girl.jpg”]

Code

[talk words="ここに吹き出しのテキストを表示します。" avatarimg="http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/girl.jpg"]

会話形式にした表示例

[talk words=”画像とテキストだけを指定してるよ。” avatarimg=”http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/girl.jpg”]
[talk words=”僕はアバターを右側にして名前を表示してみたよ！そうだなぁ、アバターは角丸にしてみよう！” avatarimg=”http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/man.jpg” name=”Mr. Avatar” avatarshape=2 align=r]
[talk words=’じゃ、私はアバターを四角形にしてサイズを変えてボーダーを付けてみるわ。ついでに吹き出しのカラーも変えちゃう！
「これはリンク」みたいにHTMLも表示できるのよ！’ name=”ナンシー” avatarimg=”http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/girl.jpg” avatarsize=100 avatarbdcolor=#FF98A5 avatarbdwidth=4 avatarshape=3 color=#fff bgcolor=#FF95A1 bdcolor=#69EF54 bdstyle=3]
[talk words=”すごいじゃないか、ナンシー！” avatarimg=”http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/man.jpg” name=”Mr. Avatar” align=r]
[talk words=”うーん、アバター画像なしの私は殺風景だ…” name=”画像なし子”]

Code

[talk words="画像とテキストだけを指定してるよ。" avatarimg="http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/girl.jpg"]
[talk words="僕はアバターを右側にして名前を表示してみたよ！そうだなぁ、アバターは角丸にしてみよう！" avatarimg="http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/man.jpg" name="Mr. Avatar" avatarshape=2 align=r]
[talk words='じゃ、私はアバターを四角形にしてサイズを変えてボーダーを付けてみるわ。ついでに吹き出しのカラーも変えちゃう！
「<a href="#">これはリンク</a>」みたいにHTMLも表示できるのよ！' name="ナンシー" avatarimg="http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/girl.jpg" avatarsize=100 avatarbdcolor=#FF98A5 avatarbdwidth=4 avatarshape=3 color=#fff bgcolor=#FF95A1 bdcolor=#69EF54 bdstyle=3]
[talk words="すごいじゃないか、ナンシー！" avatarimg="http://demo.dptheme.net/dp14/wp-content/uploads/sites/16/2015/11/man.jpg" name="Mr. Avatar" align=r]
[talk words="うーん、アバター画像なしの私は殺風景だ..." name="画像なし子"]