アラフィフアドセンサーのみやです。
いろんなサイトを見ていると吹き出しで会話形式のサイトがありますよね。
同じ内容を確認してもただ文章がずらずらと並んでいるよりも、
会話形式になっている方が読みやすい、
漫画の好きな日本人は、つい読んでしまうと言われています。
色で文字装飾するのも限界があるので、会話形式も取り入れると効果的ですね。
プラグインで吹き出しが簡単に作れます。
Speech bubbleのインストール
まずは WordPress の管理画面から
プラグインSpeech bubbleと検索してください。
出てきたら新規追加して、いますぐインストールし有効化しておきましょう。
Speech bubbleの設定
まずはキャラ設定！
まずはキャラ設定からしましょう。
キャラクターの画像はご自分の好きな画像を用意してください。
フリー素材の画像から選んでもいいですし、デザイナーに依頼して作ってもらうのもいいですね。
などで安価で請け負ってくれるデザイナーさんが見つかりますよ。
サーバーからアップロードする
キャラ画像が用意できたら、 サーバーからアップロードします。
お使いのサーバーのWordPress のフォルダの中のSpeech bubbleの「img」フォルダを探します。
ドメイン> public_html> wp-cont>plugins>speech_bubble>img
この「img」フォルダ内に画像をアップロードします。
ファイル名には英数字を使ってくださいね。
Xサーバーを例に説明します。
Xサーバーのサーバーパネルにログインします。
Speech bubbleを使ってみよう！
有効化したら早速、投稿してみましょう。
記事作成画面から 編集します。
このコードをコピペしてプレビューしてみてください。
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="〇〇さん"] おはよう[/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="△△さん"] こんばんは[/speech_bubble]
デフォルトだとこんな感じになります。
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”〇〇さん”] おはよう[/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”△△さん”] こんばんは[/speech_bubble]
中のセリフは上のコードでいうと「おはよう」「こんばんは」 の部分を書き換えると変わります。
このままだと味気ないので、少し工夫をしたいという方はいろいろとやってみてくださいね。
吹き出しの設定について
画像も自分が好きなものに変えられますが、画像の向き(左右)、名前も設定できます。
キャラクターの画像の設定の仕方
サーバーにアップロードした画像の名前を「1.jpg」または「2.jpg」と入れ変えます。
大きさは100×100pxに自動でリサイズされますので何もしなくても OKです。
キャラクターの向きについて
右→R1 左→L1
で指定します。
キャラクターの名前について
キャラクターの名前は「name=””」の部分で変更します。
何も記入しない、空白にすれば表示されません。
吹き出しの種類について
吹き出しの種類は9種類あります。
デフォルトはdropになっています。
上のコードの”drop”←この部分を変更すると吹き出しの種類が変わります。
それぞれの吹き出しを設定してみます。
尚、画像については次の３つで設定してみました。
dounano.jpg
iei.jpg
koreda.jpg
drop(デフォルト)
画像を「dounano」で書き換えました。片方だけに名前を指定しました。
[speech_bubble type=”drop” subtype=”L1″ icon=”dounano.jpg” name=””] 名前はなしです[/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”dounano.jpg” name=”どうなの？”] どうなのって名前ってどうなの？[/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="dounano.jpg" name=""] 名前はなしです[/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="dounano.jpg" name="どうなの？"] どうなのって名前ってどうなの？[/speech_bubble]
rtail
画像を「iei」で書き換えました。両方に名前を指定しました。
[speech_bubble type=”rtail” subtype=”L1″ icon=”iei.jpg” name=”いえ～い”] 言えい？[/speech_bubble]
[speech_bubble type=”rtail” subtype=”R1″ icon=”iei.jpg” name=”イエイ”] 高嶋じゃないよ☆[/speech_bubble]
[speech_bubble type="rtail" subtype="L1" icon="iei.jpg" name="いえ～い"] 言えい？[/speech_bubble] [speech_bubble type="rtail" subtype="R1" icon="iei.jpg" name="イエイ"] 高嶋じゃないよ☆[/speech_bubble]
pink
pinkはこんな感じ、かわいいですね。
[speech_bubble type=”pink” subtype=”L1″ icon=”koreda.jpg” name=”〇〇さん”] ピンクってなんか恥ずかしい・・[/speech_bubble]
[speech_bubble type=”pink” subtype=”R1″ icon=”koreda.jpg” name=”△△さん”] かわいいけどね[/speech_bubble]
[speech_bubble type="pink" subtype="L1" icon="koreda.jpg" name="〇〇さん"] ピンクってなんか恥ずかしい・・[/speech_bubble] [speech_bubble type="pink" subtype="R1" icon="koreda.jpg" name="△△さん"] かわいいけどね[/speech_bubble]
std
[speech_bubble type=”std” subtype=”L1″ icon=”iei.jpg” name=”miya”] どうも～[/speech_bubble]
[speech_bubble type=”std” subtype=”R1″ icon=”iei.jpg” name=”女性A”] はい？[/speech_bubble]
[speech_bubble type="std" subtype="L1" icon="iei.jpg" name="miya"] どうも～[/speech_bubble] [speech_bubble type="std" subtype="R1" icon="iei.jpg" name="女性A"] はい？[/speech_bubble]
吹き出しの中で一番シンプルですね。
In
これはLINEの吹き出しっぽいです。
[speech_bubble type=”ln” subtype=”L1″ icon=”koreda.jpg” name=””] おはよう[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”koreda.jpg” name=””] こんばんは[/speech_bubble]
[speech_bubble type="ln" subtype="L1" icon="koreda.jpg" name=""] おはよう[/speech_bubble] [speech_bubble type="ln" subtype="R1" icon="koreda.jpg" name=""] こんばんは[/speech_bubble]
In-flat
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”koreda.jpg” name=”ライン？”] Inと少し違うね[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R1″ icon=”koreda.jpg” name=”これださん”] 似てるけどね[/speech_bubble]
[speech_bubble type="ln-flat" subtype="L1" icon="koreda.jpg" name="ライン？"] Inと少し違うね[/speech_bubble] [speech_bubble type="ln-flat" subtype="R1" icon="koreda.jpg" name="これださん"] 似てるけどね[/speech_bubble]
fb
[speech_bubble type=”fb” subtype=”L1″ icon=”dounano.jpg” name=”〇〇”] これは・・[/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”dounano.jpg” name=”△△”] facebook風？[/speech_bubble]
[speech_bubble type="fb" subtype="L1" icon="dounano.jpg" name="〇〇"] これは・・[/speech_bubble] [speech_bubble type="fb" subtype="R1" icon="dounano.jpg" name="△△"] facebook風？[/speech_bubble]
fbflat
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”iei.jpg” name=”a”] これもいいね！[/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”iei.jpg” name=”b”] ですね[/speech_bubble]
[speech_bubble type="fb-flat" subtype="L1" icon="iei.jpg" name="a"] これもいいね！[/speech_bubble] [speech_bubble type="fb-flat" subtype="R1" icon="iei.jpg" name="b"] ですね[/speech_bubble]
think
thinkはsubtypeを変更すると変わります。
L1→L2
R1→R2
に変えるだけで考えてるバージョンに吹き出しが変わります。
[speech_bubble subtype=”L2″] おはよう[/speech_bubble]
[speech_bubble subtype=”R2″] こんばんは[/speech_bubble]
[speech_bubble subtype="L2"] おはよう[/speech_bubble] [speech_bubble subtype="R2"] こんばんは[/speech_bubble]
[speech_bubble type=”pink” subtype=”L2″ icon=”koreda.jpg” name=”miya”] 疲れてきた・・[/speech_bubble]
[speech_bubble type=”pink” subtype=”R2″ icon=”koreda.jpg” name=”pink”] 色々試してみてね[/speech_bubble]
[speech_bubble type="pink" subtype="L2" icon="koreda.jpg" name="miya"] 疲れてきた・・[/speech_bubble] [speech_bubble type="pink" subtype="R2" icon="koreda.jpg" name="pink"] 色々試してみてね[/speech_bubble]
指定されたところを書き換えればいいだけなので覚えてしまえば簡単にできます。
ショートコードはAdd Quick Tagに登録しておけば、ボタンひとつで入力できますので便利です。
[todokuform mail_id=”●” form_color=”blue”]
コメント