今回は会話形式のブログ記事を簡単に作成することができるWordpressのプラグイン「Speech Bubble」についてご紹介しましょう。
文章というのは、こうやってツラツラと書くよりも・・・。
[speech_bubble type=”ln” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]こうやって会話形式にして方が読みやすくないですか？[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”aite.jpg” name=”ユーザー”]本当だ！なんだか漫画を見ているみたい！！[/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]このように会話を入れることで内容を分かりやすく伝えることができるのがメリットですね！[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”aite.jpg” name=”ユーザー”]そうですね。何より見ていて面白いです！！なんで結城さんは全部これにしないんですか？[/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]・・・。ということで今回は「Speecd Bubble」の基本的な使用方法についてです。[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”aite.jpg” name=”ユーザー”]え？なぜ無視！？[/speech_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]
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「drop」 [/speech_bubble]
[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「std」 [/speech_bubble]
こんな風に変化します。
吹き出しの種類の例をご覧ください。（fb,fb-flat,ln,ln-flat,pink,rtail,think）
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「fb」 [/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「fb-flat」 [/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「ln」 [/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「ln-flat」 [/speech_bubble]
[speech_bubble type=”pink” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「pink」 [/speech_bubble]
[speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「rtail」 [/speech_bubble]
[speech_bubble type=”think” subtype=”L1″ icon=”1.jpg” name=”Aさん”]吹き出し種類「think」 [/speech_bubble]
お好みの吹き出しを選んでいきましょうね！
②アイコンの配置等の変更方法
次はアイコンの配置等を変更する方法についてです。
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] Aさんだよ [/speech_bubble]
赤字で囲った箇所を変更していきます。
- L1→左側に配置で会話形式
- R1→右側に配置で会話形式
- L2→左側に配置で妄想形式
- R2→左側に配置で妄想形式
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”Aさん”]アイコンの配置は「L1」 [/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”Aさん”]アイコンの配置は「R1」 [/speech_bubble]
[speech_bubble type=”drop” subtype=”L2″ icon=”1.jpg” name=”Aさん”]アイコンの配置は「L2」 [/speech_bubble]
[speech_bubble type=”drop” subtype=”R2″ icon=”1.jpg” name=”Aさん”]アイコンの配置は「R2」 [/speech_bubble]
こんな感じですね。
対話形式にするなら右左を交互に使い分けるといいでしょう。
③アイコン画像を変更する方法
一番やりたいのはアイコン画像を変更することだと思います。
オリジナルのキャラクターを表示させると、もっと楽しくなるでしょう！
しかし、これが結構面倒なんですよね～・・・笑
まあFTPソフトを使用すれば、簡単にできるので頑張ってみましょう！！
【参考記事】FTPソフトFFFTPの使用方法
【1】FFFTPを起動してサーバーに接続します
『接続』を押して、サーバーに接続しましょう。
※パスワード等は参考記事をご覧ください。
【2】対象となるサイトのフォルダをクリックする
複数サイトを運営している場合は、対象とするサイトを間違えないようにしましょう。
僕の場合は「yuukivp.com」なのでこちらを選択。
【3】「public_html」フォルダを選択しましょう
【4】「wp-content」フォルダを選択
【5】「plugins」フォルダを選択
【6】「speech bubble」フォルダを選択
【7】「img」フォルダを選択
すると以下のような画面になり、この「img」フォルダにspeech bubbleのアイコン画像の保存場所があるのです。
つまり、このフォルダにアイコンにしたい画像を貼り付ければokということですね。
【8】アイコン画像を準備する
アイコンに使用する画像の名前は半角英数字にしましょう。
【9】アイコン画像を「img」フォルダに貼り付ける
これで、指定のフォルダに貼り付けが完了しましたので、実際に③アイコン画像の名前を変更してみましょう。
今回は、
[speech_bubble type="drop" subtype="L1" icon="yuuki.jpg" name="A さん"] Aさんだよ [/speech_bubble]
というように、先ほど貼り付けたファイル名「yuuki.jpg」と入力しました。
すると会話の表示はこうなります↓↓
[speech_bubble type=”drop” subtype=”L1″ icon=”yuuki.jpg” name=”Aさん”]どうもこんにちは結城おさむです！ [/speech_bubble]
ふう、これで完了ですね。
順番通りにやればそこまで難しくないので是非やってみてくださいね！
キャラの名前と会話内容
あとはキャラの名前と会話内容ですね。
[speech_bubble type="drop" subtype="L1" icon="yuuki.jpg" name="A さん"] Aさんだよ [/speech_bubble]
赤文字にした部分を修正していけばOKです。
キャラの名前は「Aさん」ではなく、「結城おさむ」ですね！
会話内容は自分の入れたいコメントを入れていきましょう。
[speech_bubble type=”drop” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]どうもこんにちは結城おさむです！ [/speech_bubble]
これで完成ですね！！
あとはこのコードをAddQuickタグに設定してワンクリックで使用できるようにすればいいでしょう。
あとがき
[speech_bubble type=”drop” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]今回は会話形式のブログを作ることができる「SpeechBubble」の基本的な使い方についてご紹介しました。[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”aite.jpg” name=”ユーザー”]これなら、文章を読むのも面倒な人でもスラスラ読めますね！[/speech_bubble]
[speech_bubble type=”drop” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]そうですね！オリジナリティあふれるキャラクターを作っていき、楽しいブログを作っていきましょう！[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”aite.jpg” name=”ユーザー”]なんで結城さんは全部これにしないんですか？[/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”yuuki.jpg” name=”結城おさむ”]・・・。それでは今回はこれにて失礼します！[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”aite.jpg” name=”ユーザー”]え！？またスルー！！？[/speech_bubble]
数年前まで田舎でくすぶっていたサラリーマンだった僕が、たった1つのブログを作ったことで人生が変わりました。
副業で始めたブログビジネスで、週1回だけ働いて月24万円の収入を得られるようになり、今ではストレスフリーな毎日を送れています。
- 自宅やカフェで自由に働けるノマドライフに興味がある
- 脱サラして、人間関係に疲れることない人生を叶えたい
- ブログで収入を得るために何から始めていいか分からない…！
- 帰りのチケットを取らなくても海外旅行に行ける生活に憧れる
開放感にあふれた人生を描くために初心者向けのブログ入門書を無料でプレゼントしています。
ゼロスタートの人にも「あ、ブログってこうやって稼げるんだ！」と反響をいただき、分かりやすい動画・文章でやさしく解説をしています。
僕のメルマガ登録者さん限定で、今だけ0円で配布をしていますがいつ値上げをするか分かりませんので、今のうちに無料プレゼントをお見逃しなく。
ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、すぐにプレゼントが手に入ります。
