ブログに吹き出しをつける方法/会話形式のプラグインで作ってみよう
この記事の読了時間は約 3 分です。
この記事は
・WordPress(ワードプレス)で会話形式(吹き出し)をつけたい人
のための解説です。
WordPressで吹き出しを作るにはどうしたらいいの?
ずっと平社員の国吉さん
質問。質問!!
ちびちゃんびさん。
いつも「吹き出し」でブログかいているからぼくも吹き出しをつけたいんだけど、どうしたいいの?
ちびちゃんびさん。
いつも「吹き出し」でブログかいているからぼくも吹き出しをつけたいんだけど、どうしたいいの?
ちびちゃんび
うん。めっちゃ簡単だからまねしてみてね。
こんな感じでブログのなかで吹き出しをつける方法をご紹介します。【Speech Bubble】というプラグインを使って操作します!
【Speech Bubble】導入の仕方
1.WordPressのダッシュボードから「プラグイン」を選択
2.新規追加から右側にある窓枠に【Speech Bubble】と入力する

3.Speech Bubbleが出てきますので「今すぐインストール」をクリック

4.「有効化」をクリック

ちびちゃんび
これでインストールは完了したよ。
【Speech Bubble】を使って記事を投稿する方法
1.ダッシュボードからいつもどおりに「投稿」→「新規追加」をクリック
2.「ビジュアルモード」もしくは「テキストモード」でこの↓コードをコピーして張り付けてみる。
下の枠の中にソースコードがあるので、コピーしてみてね。
右に長くてみれない・・って言うときは、四角の中をクリックしてみて、
真ん中らへんにある、紙が2枚重なったやつ

1 2 |
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] 歯が痛い・・・ [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"] 歯医者にいく?[/speech_bubble] |
実際にはりつけたら、下のような感じになったよ。
A さん
歯が痛い・・・
B さん
歯医者にいく?
【Speech Bubble】会話/セリフ変更の仕方
1.セリフの変更は▲▲▲、●●●のところに入力しすると、できるよ。
1 2 |
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] ▲▲▲ [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"] ●●●[/speech_bubble] |
ちびちゃんび
必ず、括弧と括弧 ]ここに文字を入力[ の間に文字をに入れるようにしてね。
【Speech Bubble】キャラ・人の名前の変更の仕方
1.「国吉さん」、「ちびちゃんび」のようにキャラの名前を変更することもできるよ。
1 2 |
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="●●●"] わたし女よ [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="▲▲▲"] ぼくは男さ[/speech_bubble] |
ちびちゃんび
必ず、name=の後ろにあるダブルコーテーション ”” ←これの中に名前を入れるといいよ。
【Speech Bubble】アイコン・画像の変更の仕方
ちびちゃんび
アイコン・画像に関しては、とりあえず元となる画像を準備する必要があるよ
下のような感じで、正方形で作ってくださいね。サイズは
私はの場合は300×300pxで作ったけど、四角だったら、いいはずよ。

つくったら、自分のサーバーにアップします。
アップロードの方法は、動画で解説します。しばしお待ちを・・・
ずっと平社員の国吉さん
へぇ。画像もいくつか作っておけば
いろんな表情があって、おもしろい!!
いろんな表情があって、おもしろい!!
ずっと平社員の国吉さん
グ~グ~・・・zzz
ずっと平社員の国吉さん
うわ・・こわいよ~
ずっと平社員の国吉さん
おこっているぞ!
【Speech Bubble】アイコンの位置を変更する方法
アイコン・画像の位置も、変更できますよ!ちびちゃんび
ちゃんびは左
ずっと平社員の国吉さん
僕は右
1 2 |
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] 左がいい [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] ぼくは右さ[/speech_bubble] |
ちびちゃんび
subtype=の後ろにある“L1”をの部分を変更すればいいよ。L1は左、R1は右だね
ずっと平社員の国吉さん
左にきてみよう!
ちびちゃんび
え・・・近いですけど
ちびちゃんび
・・・・右にきてみた!
【Speech Bubble】吹き出しの種類を変更する方法
1.吹き出しのタイプの変更もできるよ。種類はなんと!9種類
「drop・std・ fb・ fb-flat・
ln-flat・ pink・ rtail・ think」
1 2 |
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] わたし女よ [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] ぼくは男さ[/speech_bubble] |
ちびちゃんび
こっちも簡単!
一番初めのほうにある[speech_bubble type=”drop” というところの dropを、好きなものに変更すればいいんだよ。9種類ってすごいね。
一番初めのほうにある[speech_bubble type=”drop” というところの dropを、好きなものに変更すればいいんだよ。9種類ってすごいね。
ずっと平社員の国吉さん
へぇ。すごいね。今の吹き出しはFacebookって感じだね
ちびちゃんび
これがdrop
ちびちゃんび
これがstd
ちびちゃんび
これがfb-flat
ずっと平社員の国吉さん
ピンクだよ!ピンク
ちびちゃんび
うん。9種類もあって、すごいね!だからいろいろと試してみてね
会話形式にすると読みやすいさ、とか
面白い記事になるからSEOにも良いって言われているよ。
ぜひ、チャレンジしてね。
それではニフェーデービタン

この記事を読んだ人はこんな記事も読んでいます。
タグ:Speech Bubble, スピーチバブル, 会話形式, 吹き出し
ブログ拝見しました。
LINEで吹き出しを目にする機会が多いので、
私もですが、文章がスムーズに頭に入ってきて
とても好感を持ちました。
またよらせていただきます。
アキモトさん
こんにちは!
ブログ読んでいただいてありがとうございます!
またがんばります。