Web関連 WordPress

[WordPress]WING(AFFINGER5)の機能で吹き出しコメントを作成する

更新日:

スポンサードリンク

はじめに

 最近のブログやサイトを見ていると吹き出し会話を挟みながら話を進めているところが多いということに気づきました。肝心なところで疑問やポイントを誰かにしゃべらせて説明するというのは親近感もわきますし理解しやすいと感じたので当ブログでも導入してみようかなと思い試してみました。

検索して調べてみるとWordPressには「Speech Bubble」という吹き出しを作るプラグインが有名だったのでそれを使おうと思ったのですが、既に「Speech Bubble」プラグインは存在しませんでした。(同名のプラグインはありますが、作者が異なり未更新から8年たっていた…)

しかし、このブログのテーマのアフィンガー5(有料テーマ)には、デフォルトで会話吹き出し機能がある!とのことでそれを利用してみました。

使い方

キャラクター設定

 「AFFINGER5管理」ページを開いて「会話風アイコン」の箇所までスクロールします。そこに「アイコン画像1~8」があるのでそこに表示される名前と画像URLを指定します。画像はその場でアップロードすることもできます。

デフォルトでは人数に制限があるようですが、公式の有料プラグインを購入するとカスタマイズ性も向上し、個数も無制限に作れるようになるみたいです。

表示させてみよう

会話を表示させるにはショートコード(st-kaiwa)を使います。st-kaiwaの後に作成したキャラクターの番号を指定するだけです。

サンプル

[st-kaiwa(数字)]コメント[/st-kaiwa(数字)]

管理人
テストです

管理人
ちゃんと出てます?

出てますよ!

ちなみにエディター内には「会話xx」というショートコード用のボタンがあるらしいのですが、私の画面には見当たりませんでした…。直書きでも困る内容でもないので我慢します。(エンジニア的にこの対応はどうなんだ…??)

右側にキャラクターを表示してみよう

会話なので左右にキャラクターを配置しておしゃべりさせてみたいですよね。右側に配置するにはショートコードに「r」を追加すればOKです。

サンプル

[st-kaiwa(数字) r]コメント[/st-kaiwa(数字)]

管理人
どうやればいいんだー?

できた!
てふ子

管理人
誰!?びっくりしたぁ

ちょっと会話が雑ですが一応体裁は整いました。

ちなみに201805以降のバージョンではスタイルが若干ずれるのでCSSを修正してください。詳細は公式ページに載っています。(このページはWING購入者のみ見られると思います)

吹き出しの色をカスタマイズ

デフォルトで使うと吹き出しの色が非常に薄いので必要に応じてカスタマイズしましょう。
「外観」>「カスタマイズ」>「オプションカラー」を表示して下のほうにスクロールすると「会話風ふきだしのカラー」というのがあるのでそこで色を指定します。

その他のカスタマイズ

この辺でお気づきかもしれませんが、吹き出しには枠がありません。CSSで自力でカスタマイズするか有料プラグインを購入してください。

まとめ

吹き出しでキャラクターを会話させることができました。吹き出しの色やキャラクターの画像をカスタマイズして楽しく会話させましょう。

てふ子
...ZZZ

えぇ…

スポンサードリンク

-Web関連, WordPress

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.