今回はこんな風に簡単に吹き出しができちゃうプラグインをご紹介します

 

 

✔この記事で分かること

 

  • 無料テーマCocoonでの吹き出しの作り方
  • 会話形式の吹き出しが作れるプラグインWord Balloonの導入の仕方
  • Word Balloonを使った吹き出しの作り方
  • Word Balloonを使った吹き出しのカスタマイズ

 

 

ワードプレス初心者でも簡単に吹き出しが作れちゃいます。

記事に使うとだいぶ印象が変わりますよ!

 

早速はじめてみましょう!

 

 

 

Cocoonでの吹き出しの作り方

 

Cocoonはワードプレスの人気無料テーマです。

実際にCocoonの管理画面で見ていきましょう。

 

 

 

[Cocoon設定]>[吹き出し]をクリック

 

 

 

右側の[編集]をクリックします。

 

※筆者は変更済みなのでネコが出ていますが、実際はデフォルトの画像と名前が出てきます。

 

 

 

 

 

 

タイトルは自分が探しやすいようにつけるためのものです。

その下の名前はアイコンの下に出てくる名前になります。

 

 

 

 

 

 

アイコン画像の変更は、赤枠の選択をクリックして好きな画像を選びます。

 

 

 

 

 

吹き出しのスタイルや人物の位置(左右どちらか)、アイコンに丸や四角の枠を付けるかなどを

好みに合わせて選ぶことができます。

 

 

 

 

完成したら保存をクリックします。

 

 

 

記事の投稿欄で見てみましょう。

 

 

 

 

ここに吹き出しという名前で出てくるので、その中から使いたいデザインを選ぶだけで出来上がりです。

 

 

よく使うデザインを登録しておくと
ワンクリックで呼び出せちゃいます。

 

簡単で便利、この吹き出し機能が標準装備されているのは本当に素晴らしいです。

 

しかもいくつでも作成可能です。

 

使わない手はありませんね。

 

 

 

 

 

プラグインWord Balloonの導入の仕方

 

次は吹き出しを作成できるプラグインWord Balloonのインストールの方法を解説します。

 

これもWord Balloonで作りました

 

 

まずはワードプレスの管理画面に行きます。

 

 

プラグイン]>キーワードで[Word Balloon]を検索

 

 

 

今すぐインストール]>[有効化]をクリック

 

これでインストールは完了です。

 

では実際に作ってみましょう。

 

 

 

Word Balloonを使った吹き出しの作り方

 

Word Balloonをインストールし、有効化してから投稿画面に行きます。

 

 

 

すると、吹き出しマーク(赤枠部分)が追加されます。

 

場所はそれぞれのテーマによって左右しますが、上の編集ゾーンのどこかには現れます。

 

 

吹き出しマークをクリックすると以下のような画面が出てきます。

 

 

 

 

 

  1. :クリックして好きな画像を選択
  2. :ミステリーマン(デフォルト)でないものを選択。なぜか名無しの権兵衛という名前だった
  3. :セリフを記入
  4. :キャラクターの位置を選択
  5. :セリフを押すと以下の画面が現れる

 

 

 

 

吹き出しの種類を選ぶことができます。

試しに「ぽっち」を選んだところ、画面のようなオレンジのモノが出てきました。

 

ここまでが基本です。

これで完成でもOK。

その場合は水色のダウンロードボタンを押せば完成です。

 

 

 

 

 

Word Balloonを使った吹き出しのカスタマイズ

 

ここからは応用編です。

細かな設定をすることで、よりオリジナリティのある吹き出しを作ることができます。

 

アバター

 

 

アバターでは、キャラクターのサイズや表示名を変更することができます。

 

 

 

 

  1. :クリックするとアバターの設定画面が出る
  2. :キャラクターのサイズを大・中・小から選ぶことができる
  3. :名前の場所を選択できる
  4. :表示名を付けることができる(③で非表示にすれば出てこない)
  5. :名前の色を変更することができる

 

 

 

 

 

キャラクターを囲む枠線の有無とその影の有無も選べます。

 

 

 

 

吹き出しマーク

 

 

赤枠の吹き出しマークをクリックします。

 

 

 

 

ここでは吹き出しの中の文字の色、サイズ枠線の色、影の有無などを変更することができます。

 

 

 

アイコン

 

 

アイコンでは、アバターに装飾をすることができます。

 

 

 

 

  1. :アイコンのマークをクリック
  2. :アイコンの種類を選択
  3. :ここに出る
  4. :位置やサイズを変更できる

 

 

 

効果

 

効果では、吹き出しやアバターに動きを付けることができます。

 

 

 

 

  1. :「効果]のアイコンをクリック
  2. :アバターの動きを選択できる
  3. :アイコンの動きを選択できる
  4. :吹き出しの動きを選択できる

 

 

 

フィルター

 

フィルターでは、アバター・アイコン・吹き出しにぼかしなどのフィルターをかけることができます。

 

 

 

 

 

ステータス

 

ステータスでは、コメントや効果音などを付けることができます。

 

 

 

 

コメントに「ぽよん」と入れてみたら、吹き出しの右下に出ました。

音声ファイルも添付できるようです。

 

 

完成

 

 

ダウンロードボタンを押したら完成です。

 

 

 

Word Balloonまとめ

 

 

色々な記事を読んでいて、人気ブロガーさんのところには特に必ずと言っていいほどある吹き出し。

 

簡単に作ることができ、記事が楽しく見えるので、ぜひ上手に取り入れていきたいところです。

 

Cocoonは初めから入っているのでとても楽です。

 

他のテーマでも今回ご紹介したプラグイン「Word Balloon」を使えば誰でも導入することができます。

 

オリジナルの吹き出しを作り、サイトをより魅力的にってみてくださいね。

 

 

おつかれさまでした!

最新情報をチェックしよう!