会話風ページ第2弾 Word Balloon

この記事を読むのに必要な時間は約 5 分です。

[word_balloon id="1" name="くまはち" name_position="under_avatar" position="L" size="S" radius="w_b_radius" balloon="talk"]いや~便利なプラグイン見つけてしまったなー[/word_balloon] [word_balloon id="7" name="まどか" name_position="under_avatar" position="R" size="S" radius="w_b_radius" balloon="talk"]SpeechBubbleでよかったんじゃないの?[/word_balloon] [word_balloon id="1" name="くまはち" name_position="under_avatar" position="L" size="S" radius="w_b_radius" balloon="talk"]比べるまでもなくこのプラグインだよ[/word_balloon] [word_balloon id="2" name="れいこ" name_position="under_avatar" position="R" size="S" radius="w_b_radius" balloon="talk"]え~また覚えなきゃいけないの?[/word_balloon] [word_balloon id="1" name="くまはち" name_position="under_avatar" position="L" size="S" radius="w_b_radius" balloon="talk"]覚えるというレベルでもないよ 簡単すぎて・・・ まぁ、僕の解説読んでみて[/word_balloon]

プラグインのインストール

プラグイン追加 プラグイン → 新規追加 で [ Word Balloon ]を検索したら上記画像と同じように表示されます。 「今すぐインストール」→「有効化」をクリックしてインストール完了です。  

設定

設定は、管理画面の左側メニューの設定の中にWord Balloonがあります。 [wc_row] [wc_column size=”one-half” position=”first”] アバター 設定 [/wc_column] [wc_column size=”one-half” position=”last”] アバターは、画像をクリックしてメディアが開くので持ってる写真使うもよし 他から画像をダウンロードするもよし 画像サイズに合わせて表示する画像のサイズや右か左か選べます。 吹き出しの形は個人の好みもあると思うので任意に設定 定型文は、5つあるのでお約束のセリフなど入れていると挿入時に楽かもですね 別に最初はなくてもOKですね その都度、入れてもOKなので・・・ 設定終わると「登録」ボタンをクリックして設定完了です。 これを人数分何度かやっておくだけで設定終わりです。 [/wc_column] [/wc_row] アバターリスト 複数登録したらこんな感じのリストができています。  

使い方

エディター エディターの赤丸のアイコンがWord Balloonのアイコンになります。 アイコンが吹き出しの形なのでわかりやすいです。 [wc_row] [wc_column size=”one-half” position=”first”] アイコンをクリックしたら右記の画像のポップアップが開いてセリフや吹き出しの向きなどをその都度、設定可能です。 OKであれば「挿入」ボタンクリックでショートコードが投稿エディターの中に挿入されます。 不安な方は、プレビューで確認しながらページ作成するとわかりやすいです。 [/wc_column] [wc_column size=”one-half” position=”last”] バルーン挿入 [/wc_column] [/wc_row] ショートコード こんな感じでショートコードが挿入されています。 向きを間違った時は、position=””の部分でLとRで書き換えもアリですね。 SpeechBubbleのときを思い出してください。 お世辞にもここまで便利ではなかったと思います。    

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!