Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

2017年6月に開設した当ブログも記事数が20を超えて来ました。あまり更新は出来ないのですが、ブログを装飾する意味で、記事本文中にマスコット的なキャラクターを入れて、会話形式のブログを作りたいと思います。

いわゆる 吹き出し と呼ばれる物で、ブログを会話形式で進めていく事が出来ます。身近なところでは、漫画が吹き出しを使っていますね。

下記の様な感じになります。こんなに大きくすると画像ばかりま目立つので、もう少し小さく設定して行きたいと思います。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

これはフリーの素材サイトから吹き出しを貰ってきて作成したのですが、こんな手間のかかる作業をしなくても、WordPressのプラグイン Speech bubble を使えば、あっという間に会話形式のブログが作れてしまいます。そこで、Speech bubbleのインストールから吹き出しの導入までを分かりやすく説明して行きます。

Speech bubbleのインストールと有効化

WordPressの管理画面から「プラグイン」→「新規追加」と進みます。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

「プラグインを追加」ページの検索窓に「Speech bubble」と記入します。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

すると、「Speech bubble (ふきだしプラグイン) 」が表示されるので、「今すぐインストール」→「有効化」と進みます。なお、最新の更新が3年前になっていますが、自分の他のブログで使用していますが、今のところは不具合は無いですね。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

これでSpeech bubbleの導入完了です。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

Speech bubbleを利用するために必要なもの

次にSpeech bubbleを利用するために必要なものを揃えていきます。

  • Speech bubbleで使用する画像
  • FTPソフトの「filezilla」の導入
  • AddQuicktagの有効化

Speech bubbleで使用する画像

吹き出しで表示される画像ですね。自分で書いたオリジナルの画像を使用しても良いですが、フリーの画像サイトで貰うのが手っ取り早いですね。下記の3サイトで間に合うと思います。

今回は下記の2枚の画像を使用します。なべるく正方形の画像を使うのが望ましいです。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった! Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

FTPソフトのfilezillaの導入

WordPressでサイトを作成する時には必ず導入しておきたい FTPソフト です。FTPソフトは色々な種類がありますが、今現在もっとも使い
やすいのが filezilla ですね。過去記事で使い方を紹介しているので下記からどうぞ。

MixHost(ミックスホスト)にFTPソフトを使って接続する方法を紹介します。今回導入するのは...

AddQuicktagの有効化

コチラもWordPressを利用する上で無くてはならないプラグインです。インストール方法はSpeech bubbleと同じです。WordPressの管理画面から「プラグイン」→「新規追加」と進み、検索窓に「AddQuicktag」と入力すると、いちばん最初に表示されるので、「今すぐインストール」→「有効化」しておきます。

filezillaで画像のアップロード

では早速、2枚の画像をfilezillaでアップロードしていきましょう。

filezillaを起動後、①「ファイル」→②「サイトマネージャ」と進みます。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

「新しいサイト」をクッリックすると、「新規サイト」が現れるので、今回、レンタルサーバー会社はエックスサーバーなので、名前を「エックスサーバー」に書き換えます。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

エックサーバーに申込んだ時にメールが届いています。その中の「サーバーアカウント情報」に記載されている情報を記入して行きます。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

いちばん上から順番に解説します。

ホスト FTPホスト
プロトコル FTP-ファイル転送プロトコル
暗号化 明示的なFTP over TLSが必要
ログオンの種類 通常
ユーザ FTPユーザー
パスワード FTPパスワード

もしメールを削除してしまっている時は、「サーバーパネル」→「FTPアカウント設定」→「ドメイン名」→「FTPソフト設定」と進みます。ただ、FTPパスワードだけが記載されていません。しかし、サーバーパスワードと同じという事です。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

最後に「接続」をクリックすると「不明な証明書」という何だか訳が分からない物が表示されるので、「今後もこの証明書を常に信用する」にチェックを入れて、「OK」をクリックします。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

以上でfilezillaの設定完了です。いよいよ先ほどの2枚の画像をアップロードして行きます。

画像の名前は下記の通りです。

  • mars.png
  • tako.png

filezillaの右側から対象ドメインを選択し、「public_html」→「wp-content」→「plugins」→「speech-bubble」→「img」と進みます。左のローカル環境の2枚の画像を右側の対象ドメインのサーバーへアップロードしてやります。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

こんな感じです。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

ショートコードの変更

次に、下記のコードをカスタマイズして行きます。

デフォルトではこんな感じに表示されます。

〇〇くん
こんにちは

△△さん
こんばんは

iconの名前とnameをそれぞれ変更します。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

すると、こんな風に画像と名前が変更されました。

管理人のmars
こんにちは

弟子のタコ社長
こんばんは

吹き出しの種類と左右の向きの変更

吹き出しの種類は勿論、左右の向きも変更可能です。

L1
管理人のmars
なんだチミは?

R1

管理人のmars
なんだチミは?
drop
弟子のタコ社長
タコでんがな

弟子のタコ社長
タコでんがな
std
管理人のmars
タコかよ

管理人のmars
タコかよ
fb
弟子のタコ社長
イカちゃうよ

弟子のタコ社長
イカちゃうよ

fb-flat

管理人のmars
わたしが変なおじさんです

管理人のmars
わたしが変なおじさんです
ln
弟子のタコ社長
LINEか?

弟子のタコ社長
LINEか?
ln-flat
管理人のmars
これもLINE風?

管理人のmars
これもLINE風?
pink
弟子のタコ社長
ハデハデやねw

弟子のタコ社長
ハデハデやねw
rtail
管理人のmars
バックブルー

管理人のmars
バックブルー
think
弟子のタコ社長
瞑想か?

弟子のタコ社長
瞑想か?

AddQuicktagを使いクリック1つでSpeech bubbleを呼び出す方法

ここまではSpeech bubbleの設定方法を紹介しましたが、ここからは、ブログ記事作成時にクリック1つで簡単にSpeech bubbleのコードを挿入する方法を紹介します。

WordPressの管理画面から、「設定」→「AddQuicktag」と進みます。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

開始タグにセリフの前、終了タグにセリフの後ろのコードを記入します。最後に「変更を保存」をクリックします。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

これでテキストモードにタグが追加されました。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

ちょっと使ってみましょう。

まずは、吹き出したい言葉を書き込みます。ここでは「こんにちは。」としました。この文字を左クリックしながらなぞると、文字が青く反転します。この状態でAddQuicktagで設定したタグをクリックします。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

するとクリック1つであっという間にコードが挿入されました。

Speech bubble(吹き出しプラグイン)を使いブログを会話形式にしたった!

できた吹き出しです。

管理人のmars
こんにちは。

もう1つのコードはコチラ。

弟子のタコ社長
 まいどおおきに!タコですw

こんな感じで、Speech bubbleの設定完了です。

まとめ

今回は、ブログを可愛いキャラクターで目立たせる事の出来る吹き出しプラグイン Speech bubble を紹介しました。文章ばかりで殺風景な記事で、合間に上手く吹き出しを使う事によって、閲覧者をより楽しませる事が出来ますね。

弟子のタコ社長
 そうでんな~。

Speech bubbleを有効化して画像をFTPソフトでアップロードするだけで簡単に導入できるので、あなたも是非試してみてはどうでしょうか?

管理人のmars
簡単ですよ。