今回は会話形式のブログ記事を簡単に作成することができるWordpressのプラグイン「Speech Bubble」についてご紹介しましょう。

ワードプレス会話形式
文章というのは、こうやってツラツラと書くよりも・・・。

結城おさむ
こうやって会話形式にして方が読みやすくないですか?

ユーザー
本当だ!なんだか漫画を見ているみたい!!

結城おさむ
このように会話を入れることで内容を分かりやすく伝えることができるのがメリットですね!

ユーザー
そうですね。何より見ていて面白いです!!なんで結城さんは全部これにしないんですか?

結城おさむ
・・・。ということで今回は「Speecd Bubble」の基本的な使用方法についてです。

ユーザー
え?なぜ無視!?


『Speech Bubble』のインストール方法


ダッシュボード画面から「プラグイン⇒新規追加」の検索窓に『Speech Bubble』と入力してください。

ワードプレス会話形式

そして、表示されたSpeech Bubbleを『今すぐインストール』を押して、インストール完了後に「有効化」をしましょう。

ワードプレス会話形式

まず『Speech Bubble』で会話形式の記事を書いてみよう


『Speech Bubble』の有効化が完了したら、実際に記事を書いてみよう。

ダッシュボード画面から『投稿→新規追加』を選択してください。

ワードプレス会話形式

そして記事本文記入欄に以下のコードを貼り付けてみてください。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] Aさんだよ [/speech_bubble]

[speech_bubble type="drop" subtype="R1" icon="1.jpg" name="B さん"] Bさんだよ [/speech_bubble]


こんなかんじですね↓↓↓
ワードプレス会話形式

そして『プレビュー』ボタンを押して記事を確認すると、こんなかんじになります!
ワードプレス会話形式

Speech Bubbleのコード設定のポイント


コード設定のポイントについてご紹介しましょう。

[speech_bubble type="➀drop" subtype="②L1" icon="③1.jpg" name="➃A さん"] ➄Aさんだよ [/speech_bubble]


[speech_bubble type="➀吹き出しの種類" subtype="②アイコンの配置等" icon="③アイコン画像の名前" name="➃キャラの名前"] ➄会話内容 [/speech_bubble]


黒の部分は変更せず、赤文字の部分を変更することで会話をいじることができます。

➀吹き出しの種類の変更方法


吹き出しの種類は色々ありますが、今回はその一部をご紹介していきましょう。

とりあえず「std」に変更してみましょう。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] Aさんだよ [/speech_bubble]
↓↓↓
[speech_bubble type="std" subtype="L1" icon="1.jpg" name="A さん"] Aさんだよ [/speech_bubble]


Aさん
吹き出し種類「drop」

Aさん
吹き出し種類「std」


こんな風に変化します。

吹き出しの種類の例をご覧ください。(fb,fb-flat,ln,ln-flat,pink,rtail,think)

Aさん
吹き出し種類「fb」

Aさん
吹き出し種類「fb-flat」

Aさん
吹き出し種類「ln」

Aさん
吹き出し種類「ln-flat」

Aさん
吹き出し種類「pink」

Aさん
吹き出し種類「rtail」

Aさん
吹き出し種類「think」


お好みの吹き出しを選んでいきましょうね!

②アイコンの配置等の変更方法


次はアイコンの配置等を変更する方法についてです。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] Aさんだよ [/speech_bubble]


赤字で囲った箇所を変更していきます。

  • L1→左側に配置で会話形式
  • R1→右側に配置で会話形式
  • L2→左側に配置で妄想形式
  • R2→左側に配置で妄想形式

Aさん
アイコンの配置は「L1

Aさん
アイコンの配置は「R1

Aさん
アイコンの配置は「L2

Aさん
アイコンの配置は「R2


こんな感じですね。

対話形式にするなら右左を交互に使い分けるといいでしょう。

③アイコン画像を変更する方法


一番やりたいのはアイコン画像を変更することだと思います。

オリジナルのキャラクターを表示させると、もっと楽しくなるでしょう!

しかし、これが結構面倒なんですよね~・・・笑

まあFTPソフトを使用すれば、簡単にできるので頑張ってみましょう!!

【参考記事】FTPソフトFFFTPの使用方法

【1】FFFTPを起動してサーバーに接続します

『接続』を押して、サーバーに接続しましょう。
※パスワード等は参考記事をご覧ください。
ワードプレス会話形式

【2】対象となるサイトのフォルダをクリックする

複数サイトを運営している場合は、対象とするサイトを間違えないようにしましょう。

僕の場合は「yuukivp.com」なのでこちらを選択。
ワードプレス会話形式

【3】「public_html」フォルダを選択しましょう

ワードプレス会話形式

【4】「wp-content」フォルダを選択

ワードプレス会話形式

【5】「plugins」フォルダを選択

ワードプレス会話形式

【6】「speech bubble」フォルダを選択

ワードプレス会話形式

【7】「img」フォルダを選択

ワードプレス会話形式

すると以下のような画面になり、この「img」フォルダにspeech bubbleのアイコン画像の保存場所があるのです。

%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80

つまり、このフォルダにアイコンにしたい画像を貼り付ければokということですね。

【8】アイコン画像を準備する

アイコンに使用する画像の名前は半角英数字にしましょう。

ワードプレス会話形式

【9】アイコン画像を「img」フォルダに貼り付ける

ワードプレス会話形式
↓↓↓

ワードプレス会話形式

これで、指定のフォルダに貼り付けが完了しましたので、実際に③アイコン画像の名前を変更してみましょう。

今回は、

[speech_bubble type="drop" subtype="L1" icon="yuuki.jpg" name="A さん"] Aさんだよ [/speech_bubble]


というように、先ほど貼り付けたファイル名「yuuki.jpg」と入力しました。

すると会話の表示はこうなります↓↓

Aさん
どうもこんにちは結城おさむです!


ふう、これで完了ですね。

順番通りにやればそこまで難しくないので是非やってみてくださいね!

キャラの名前と会話内容


あとはキャラの名前会話内容ですね。

[speech_bubble type="drop" subtype="L1" icon="yuuki.jpg" name="A さん"] Aさんだよ [/speech_bubble]


赤文字にした部分を修正していけばOKです。

キャラの名前は「Aさん」ではなく、「結城おさむ」ですね!

会話内容は自分の入れたいコメントを入れていきましょう。

結城おさむ
どうもこんにちは結城おさむです!


これで完成ですね!!

あとはこのコードをAddQuickタグに設定してワンクリックで使用できるようにすればいいでしょう。

あとがき


結城おさむ
今回は会話形式のブログを作ることができる「SpeechBubble」の基本的な使い方についてご紹介しました。

ユーザー
これなら、文章を読むのも面倒な人でもスラスラ読めますね!

結城おさむ
そうですね!オリジナリティあふれるキャラクターを作っていき、楽しいブログを作っていきましょう!

ユーザー
なんで結城さんは全部これにしないんですか?

結城おさむ
・・・。それでは今回はこれにて失礼します!

ユーザー
え!?またスルー!!?