DigiPress

Highly Flexible WordPress Theme

メニュー

吹き出しアバター用ショートコードを追加しました


弊社にて提供しているDigiPressテーマ専用のショートコード集プラグイン「Shortcodes for DigiPress」に新たなショートコードとして、吹き出し付きのアバターコンテンツを表示できるショートコードが加わりました。

このショートコードは既存ユーザー様から頂いていたご要望の中から実装された機能となり、これを利用することで、漫画のようにページ内にキャラクターを登場させてそのキャラクターが喋っているようなコンテンツを表示できます。

また、複数のキャラクターを登場させて会話形式でコンテンツを形成することも簡単です。

実際の表示例はこちら!

吹き出しアバター表示例

ここに吹き出しのテキストを表示します。

このショートコード

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

会話形式にした表示例

画像とテキストだけを指定してるよ。
Mr. Avatar
僕はアバターを右側にして名前を表示してみたよ!そうだなぁ、アバターは角丸にしてみよう!
ナンシー
じゃ、私はアバターを四角形にしてサイズを変えてボーダーを付けてみるわ。ついでに吹き出しのカラーも変えちゃう!
これはリンク」みたいにHTMLも表示できるのよ!
Mr. Avatar
すごいじゃないか、ナンシー!
画像なし子
うーん、アバター画像なしの私は殺風景だ…

このショートコード

[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="画像なし子"]

各テーマの表示イメージは、各デモサイトのショートコード一覧メニュー「吹き出しアバター」からご覧いただけます。

オンラインマニュアル

既存ユーザー様は、以下のマニュアルより本ショートコードの詳細、使い方をご覧ください。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly