>> 今すぐブログを始める<<

WordPressの吹き出しを超簡単に作る方法【3分でできます】

どうも!北大生のはる(@_harukitare)です。

今回はWordPressで吹き出しを超簡単に作る方法を解説します。

吹き出しを使えば難しい内容でもわかりやすく説明でき、記事の離脱率が減ってSEOに強い記事が書けます。活用しない手はないですね。

この記事を読めば初心者でも3分でできるようになりますよ~

当ブログでもこんな感じでよく使ってます!
早速見ていきましょ~

目次

WordPressの吹き出しは無料プラグインを使えば一瞬

結論から言うと、WordPressの吹き出しは無料プラグインWord Balloonを使えば一瞬で作ることができます。

プラグインなしでもCSSの知識があれば吹き出しを作れてしまうので、以下のような人におすすめです。

  • CSSの知識がない人
  • 作業を効率化したい人
  • プラグインの数に余裕がある人

プラグインを入れすぎるとサイトの動作が重くなってしまうので注意しましょう!(個人的には15個くらいに抑えるのが良いと考えています。)

WordPress吹き出しプラグイン『Word Balloon』とは

WordPress吹き出しプラグイン『Word Balloon』は日本人のやーまんさん(@b2n_jp)が開発した無料プラグインです。

以前はSpeech Bubbleという吹き出しプラグインが普及していたようですが、WordPress公式サイトで公開停止となったため、現時点ではWord Balloonが最も使われています。

Word Balloonを使うメリットとしては以下のようなものが挙げられます。

  • 直感的に使いやすい
  • CSSの知識がいらない
  • アニメーションがつけられる
  • デザインの細かい設定ができる
  • 最新版のWordPressに対応している

プラグインは一度インストールしても削除できるので、一度お試しとして使ってみましょう。

魅力は十分伝わったと思うので、使い方を見ていきましょう!

WordPress吹き出しプラグイン『Word Balloon』の使い方

balloon-2331488_1920

WordPress吹き出しプラグイン『Word Balloon』の使い方は非常に簡単です。丁寧に解説していきます。

Word Balloonのインストール方法

まずはWordPressにログインして、ダッシュボードの『プラグイン』押しましょう。

するとプラグインブラウザーの画面になるので、右の虫メガネマークを押します。

(138)

そして『word balloon』と検索してプラグインを見つけ、インストールしましょう。

(195)

インストール後は有効化することを忘れないように注意してください。

(196)

Word Balloonの使い方

※今回はビジュアルエディタで解説しますが、他のエディタもほとんど同じように使えるのでご安心ください。

Word Balloonを有効化すると、下の画像のようにボタンができるので押しましょう。

(197)

以下のようなものが出てくるので、まずはアバターを設定しましょう。

人のシルエットになっているところをクリックします。

(212)

アバターの画像を選択する画面になるので、ファイルをアップロードしてメディアライブラリから選択します。

(198)

あとはセリフを入力すれば基本的なところは完了です。

(214)

せっかくなので、細かい設定でどんなことができるのかも解説します。

下の画像の赤枠で囲ったところに並んでいるアイコンを左から順に説明していきますね。

(215)

アバター設定(人型アイコン)

アバター設定では以下のことが設定できます。

  • アバターのサイズ・向き
  • アバターの名前
  • アバターの枠線・影

個人的にはアバターに名前を付けると親しみやすくていいと思います。

ゆづきちゃん
ゆづきちゃん
さかさま~

吹き出し設定(吹き出しアイコン)

吹き出し設定では以下のことが設定できます。

  • 文字の色・大きさ
  • 吹き出しの配置・大きさ

ここは見た目がうるさくなるので1記事1記事に統一感を持たせた方がいいですね。

こんにちは!

アイコン設定(ニコちゃんマーク)

アイコン設定では以下のことが設定できます。

アイコンの種類・位置・大きさ・向き

アイコンの種類には次のようなものがあります(少し省略しています)

  • 上矢印
  • 下矢印
  • はてな
  • ハート
  • 怒りマーク
  • ビックリマーク
  • 音符
  • がーん
  • キラーン
  • どよーん
  • はっ

アイコンをたくさん用意しなくても感情が表現できるのはうれしいですね。

キラーン!
どよーん…
ハート♡

効果設定(キラキラマーク)

効果設定では以下のようなことが設定できます。

アバター・アイコン・吹き出しのアニメーション設定

アニメーションには次のようなものがあります(少し省略しています)

  • 上下
  • 振り子
  • 鼓動
  • 振動
  • 左右
  • 回転
  • 点滅
  • ロール
  • ゴム

面白いですが使いすぎは禁物ですね。強烈に目を引くことは間違いないので、ここぞというときに使いましょう。

鼓動…
振動ううう
ゴム!

フィルター設定(フィルターマーク)

フィルター設定では以下のようなことが設定できます。

アバター・アイコン・吹き出しのフィルター設定

フィルターの種類には次のようなものがあります(少し省略しています)

  • ぼかし
  • 明度
  • コントラスト
  • モノクロ
  • 色調回転
  • 階調反転
  • 透過
  • 彩度
  • セピア

インパクトを与えるのに有効活用していきましょう。

ぼかし~
モノクロ…
色調回転!

ステータス設定(吹き出しマーク)

ステータス設定では以下のようなことが設定できます。

  • コメント
  • サウンド

サウンドは音声ファイルをWordPressに入れることが必要になります。

きどく!
既読

WordPressの吹き出しを超簡単に作る方法まとめ

今回はWordPressの吹き出しを作る方法について解説してきました。

僕は『Word Balloon』かなり気に入っているので、皆さんもよかったら使ってみてください!

よかったらシェアしてね!

コメント

コメント一覧 (3件)

べーこん へ返信する コメントをキャンセル

CAPTCHA


目次
閉じる