【超簡単】ブログ記事に吹き出しを入れるやり方【画像付き解説】
ブログの記事でよく見るあの吹き出し
↓
![ブログ記事吹き出し完成](https://togaran-afiri.com/wp-content/uploads/2020/02/27完成.jpg)
これ、使ってみたいな~と思って試してみました。
CSSとかいじらない簡単でおすすめなやり方です♪
WordPressに吹き出しを作るプラグインを入れる
ワードプレスのプラグインを使う簡単なやり方を解説します。まず管理画面から。
プラグイン⇒新規追加
![吹き出しプラグインの追加](https://togaran-afiri.com/wp-content/uploads/2020/02/1プラグイン導入-1024x318.jpg)
プラグインの検索窓に
LIQUID SPEECH BALLOON
と入力して、検索結果にこのプラグインが出てきたらインストール。
![LIQUID SPEECH BALLOONプラグインのインストール](https://togaran-afiri.com/wp-content/uploads/2020/02/2検索-1-1024x531.jpg)
インストールできたら有効化しよう。
![LIQUID SPEECH BALLOONプラグインの有効化](https://togaran-afiri.com/wp-content/uploads/2020/02/3.有効化.jpg)
投稿画面で吹き出しを挿入する
吹き出しの作り方。まずはWordPressの投稿画面へ。
Gutenberg(グーテンベルグ)エディタのプラスマークを押して……
![WordPressの投稿画面で吹き出しを作る](https://togaran-afiri.com/wp-content/uploads/2020/02/4投稿画面の+を押して.jpg)
フキダシを選択。
![LIQUID SPEECH BALLOON 投稿画面からの吹き出し作成方法](https://togaran-afiri.com/wp-content/uploads/2020/02/5フキダシを選択.jpg)
人型のアイコンと吹き出しが出てきます。
![LIQUID SPEECH BALLOONで吹き出し作成](https://togaran-afiri.com/wp-content/uploads/2020/02/6吹き出しが出た.jpg)
文字入力してみた。
![LIQUID SPEECH BALLOONを使って作ったフキダシ](https://togaran-afiri.com/wp-content/uploads/2020/02/7文字入力できるよ.jpg)
プレビュー画面はこれ。
(ちなみにこの↓ブログで使ってるテンプレートはLION MEDIA)
![LIQUID SPEECH BALLOONで吹き出しを作ってみた見え方](https://togaran-afiri.com/wp-content/uploads/2020/02/8こんな感じ.jpg)
おお~。とりあえずこれで最低限の吹き出しは作れますね!
別のやり方で吹き出しを挿入する
ブロックを選択したときに右に出るフキダシマークをクリック。
![LIQUID SPEECH BALLOONの吹き出しの出し方](https://togaran-afiri.com/wp-content/uploads/2020/02/9右の吹き出しマークでもOK.jpg)
このやり方でも吹き出しが作れます。
![LIQUID SPEECH BALLOONを使った吹き出しの作り方](https://togaran-afiri.com/wp-content/uploads/2020/02/10こんな感じね.jpg)
どちらにせよフキダシマークを押せばOKってことですね。
吹き出しのカスタマイズはここで!
作ったフキダシを選択した状態でサイドバーを見ると……
![LIQUID SPEECH BALLOONの吹き出しカスタマイズ](https://togaran-afiri.com/wp-content/uploads/2020/02/11サイドバーでカスタマイズ可能!.jpg)
このサイドバーの設定項目でカスタマイズできます。
けどその前に……
吹き出しの設定をしよう
設定⇒LIQUID SPEECH BALLOON
で吹き出しプラグインの設定画面に。ここで設定していきます。
![LIQUID SPEECH BALLOONの詳細設定](https://togaran-afiri.com/wp-content/uploads/2020/02/12設定.jpg)
吹き出しキャラの名前と画像を設定する
LIQUID SPEECH BALLOONの設定画面。
名前⇒吹き出しの下に出る文字
(キャラクター・アバターの名前)
画像URL⇒吹き出しキャラの画像の場所
ってことです。
さっそく左の入力欄に名前を入れて画像URLをクリック。
![LIQUID SPEECH BALLOONの設定画面で画像を設定する](https://togaran-afiri.com/wp-content/uploads/2020/02/13名前を入力して画像にカーソル合わせて画像ボタン.jpg)
自分のメディアライブラリのページに行くので
吹き出しに使う画像をクリックします。
私の素材はこの写真。
![LIQUID SPEECH BALLOONの吹き出しアバター画像を選ぶ](https://togaran-afiri.com/wp-content/uploads/2020/02/14自分のメディアライブラリのページに行くので好きな画像をクリックしてね.jpg)
画像の詳細画面に。
リンクをコピーって欄があるから
そこのURLをコピー。
(Ctrl+Aで全選択⇒Ctrl+Cでコピーすると楽)
![LIQUID SPEECH BALLOONの画像URL](https://togaran-afiri.com/wp-content/uploads/2020/02/15リンクをコピーってとこのURLコピー-1024x584.jpg)
さっきの設定画面に戻って右の欄にURLを貼り付けて。
変更を保存のボタンを押して設定完了。
![LIQUID SPEECH BALLOONの画像URLの貼り付け](https://togaran-afiri.com/wp-content/uploads/2020/02/16変更を保存.jpg)
設定画面には、標準~11まで入力欄があるけど
足りなくなったら追加ボタンで下にアバター入力欄が出ます。
今回の設定は
標準⇒猫ちゃん
01⇒犬くん
……で、こうなった↓
![LIQUID SPEECH BALLOONの吹き出し標準設定の表示](https://togaran-afiri.com/wp-content/uploads/2020/02/17標準に設定したやつが表示されるよ-1.jpg)
標準って欄に設定したキャラが
初期設定で表示されるみたいですね。
吹き出しキャラを替える
設定したキャラの入れ替えができます。
サイドバーの
フキダシ設定⇒アバター
で入れ替え。
![ブログの吹き出しのアバター一覧](https://togaran-afiri.com/wp-content/uploads/2020/02/18吹き出しクリックしてサイドバーのアバターで変更できるよ-2.jpg)
標準(猫ちゃん)⇒犬くんに変更してみた。
2キャラいれば会話ができますね!
![ブログの吹き出しのアバターを変える](https://togaran-afiri.com/wp-content/uploads/2020/02/19変更できた.jpg)
吹き出しの向きを逆に
サイドバーの
向き⇒右
で犬くんは右に移動。
![ブログの吹き出しの向きを変える](https://togaran-afiri.com/wp-content/uploads/2020/02/20向きで反対方向-1024x282.jpg)
(オプションで縦並びを選択してるとできないっぽい)
吹き出しのデザインを選ぶ
同じくサイドバーで吹き出しのデザインが変えられます。
バブル、四角、破線、シャドウ、枠なしから選択。
デザイン⇒シャドウ
でこんな感じ↓
![ブログの吹き出しのデザインを変える](https://togaran-afiri.com/wp-content/uploads/2020/02/21デザイン替えたり-1024x298.jpg)
吹き出し内の文字サイズの変更
標準、小、大の3種類から。
サイズ⇒大
にしてみた。
![ブログの吹き出しの文字サイズを大きくする](https://togaran-afiri.com/wp-content/uploads/2020/02/22文字を大きくしたり-1024x357.jpg)
吹き出しの長さを短くする
オプション⇒短い
で吹き出しの横幅が短くなります。
![ブログの吹き出しの長さを短くする](https://togaran-afiri.com/wp-content/uploads/2020/02/23短くしたり-1024x242.jpg)
吹き出しの位置を縦にする
オプション⇒縦並び
で吹き出しの下にキャラが移動します。
さっきも言ったけどこの状態だと
吹き出しの向き変更(左右)はできないよう。
![ブログの吹き出しと画像を縦並びに](https://togaran-afiri.com/wp-content/uploads/2020/02/24縦にしたりできるよ!-1024x369.jpg)
吹き出しの背景色の変更
サイドバーの
色設定⇒背景色
で吹き出しのバックの色が違う色で塗りつぶされます。
これ↓は琥珀色……カッコイイ。
![ブログの吹き出しの背景色を変える](https://togaran-afiri.com/wp-content/uploads/2020/02/25色も変えられます-1024x357.jpg)
吹き出しの文字色の変更
色設定⇒文字色
で文字の色を変えられます。
![ブログの吹き出しの文字色を変える](https://togaran-afiri.com/wp-content/uploads/2020/02/26文字色も変えられます-1024x503.jpg)
吹き出しプラグインLIQUID SPEECH BALLOONまとめ
LIQUID SPEECH BALLOON、意外と簡単なので
ワードプレス+テーマに吹き出し機能が無い
って人は使ってみてね!
ディスカッション
コメント一覧
まだ、コメントがありません