吹き出しイラストは、文字だけの記事や画像有の記事においても、ほんのりとした柔らかさを表現でき利用価値が結構高く、楽しみながらブログ運営ができるのでインストールしておきましょう。
ここでは「World Balloon」のプラグインを使った吹き出しについて伝えていきます。
吹き出しイラストで記事を書いていくのは結構手間もありましたが、今ではプラグインをインストールし画像登録しておくだけで、簡単で楽に吹き出しを作成できるようになり、ブログ運営を飽きさせないツールとなっております。
Contents
吹き出しプラグインWorld Balloonのインストール方法
それではプラグインをインストールしていきます。
「プラグイン」にカーソルを合わせると、「新規追加」が表示されますのでクリックします。
「キーワード」へ「Word Balloon」と入力すると、「Word Balloonプラグイン」が表示されますので、「今すぐインストール」をクリックし「有効化」します。
しかし、「今すぐインストール」が表示されず、インストールすることができない場合がありますので、その際は、有効の下にある「詳細情報」を選択しクリックします。
「すぐインストール」が表示されてる場合は「今すぐインストール」をクックし、「有効化」をクリックして、下の記事を飛ばして、青太文字「インストールしたプラグイン「Word Balloon」が表示されてます」へすすんでください。
「Word Balloon」の「YAHMAN」さんのブラウザが表示されますので、枠で囲んでいる「word balloon」を選択クリックします。
更に、上記の表示がされますので、再度「Word Balloon」をクリックします。
「Word Balloon」のプラグインに「ダウンロード」が表示されますので、選択クリックしてください。
「ダウンロード」をクリックすると、Zipがダウンロードされますので、適当な箇所へ保存します。
ここでは分かりやすくデスクトップに保存しました。
これで「Word Balloon」のプラグインの用意ができましたので、保存したZipファイルをプラグインへインストールします。
WordPressの管理画面へ入ります。
管理画面(ダッシュボード)へ入りましたら、プラグインにカーソルを合わせ表示された「新規追加」をクリックします。
「プラグインを追加」が表示されますので、「ファイルの選択」をクリックし保存していたZipをクリックすると、上記の画像のように「ファイルの選択」の右サイドにZipが表示されます。
表示されましたら、「今すぐインストール」をクリックします。
「プラグインのインストールが完了しました」と表示されましたら、「プラグインを有効化」をクリックします。
すると、インストールしたプラグイン「Word Balloon」が表示されてますので、「無効化」表示が確認できましたら、インストールが無事完了したということですので、そのままで結構です。
プラグインについては、今後もインストールの機会があるでしょうから、プラグインの追加のキーワード右サイドにネームを入れてインストールしてください。
今回の「Word Balloon」の「今すぐインストール」が表示されない対応の場合と違い、ネームを入れると自動で多くのプラグインが表示されるので、必要なプラグインのネームを確認し、「互換性」表示のプラグインをインストールするようにしてください。
吹き出しイラストWord Balloonの設定方法
Word Balloonには今回インストールした無料のプラグインと有料のプラグインがありますが、ここでは無料の設定方法を伝えていきます。
無料Word Balloonでは、吹き出しのイラストが3つ登録できます。
イラストの画像はjpgでもpngでも構いませんので、状況に合わせて選んでください。
それでは登録していきます。
管理画面の「設定」にカーソルを合わせると、「Word Balloon」が表示されますので、選択クリックします。
イラストの登録画面が表示されましたら、「画像選択」をクリックします。
「画像選択」をクリックすると、事前に「メディア追加」していた画像が表示されます。
メディア追加していた画像に✅を入れ、「選択」をクリックします。
画像のサイズは500×500のピクセル正方形でメディアに追加しました。
はい、このように画像が取り込まれました。
「名前」の箇所には自動で挿入されるわけではありませんので、お気に入りの名前を入力してください。
ここに入力したネームが表示されることになります。
「メモ」は任意で構いません。(今回は無記入です)
画像とネームがOKであれば、「アバターの登録」をクリックします。
そうしますと、「アバターのリスト」に画像、名前、IDが登録されました。
この要領で、お気に入りイラスト、写真等々を登録してください。
アバターを入れ替えたりした場合、IDが変更されます。
IDが変更されると、「Word Balloon」画像は表示されませんので、アバターリストで「設定」「IDの変更」(画像取り入れた際に自動で変更IDが表示されるので、最初登録したIDの数字を記入)で最初に登録したアバターIDに変更すると、自動で変更画像が表示されます。今回の例ではid1で表示されてます。編集は、「管理画面」の「設定」にカーソルを合わせ「Word Balloon」から行えます。
例ではIDは1に表示されてますが、これは最初に登録したIDナンバーで、アバターを変更するたび(無料版)ID2やID3などの表示がされます。
登録しなおした回数だけIDの数が6や7など大きくなります。
すると、既存の記事中のコードのIDはそのままですから、アバターは表示されなくなっています。
ですから、「設定」「アバターリスト」で最初に登録したID番号に変更すれば、自動的に既存記事中のコードのIDと番号が一致しますので、画像は表示されるという訳です。
登録したイラスト画像を記事に挿入
それでは、登録したイラスト画像を記事に挿入してみましょう。
管理画面の「記事投稿の新規追加」画面です。
記事作成画面は「テキスト」で作成していきます。
「ビジュアル」だと見だしタグなどのコードが表示されませんので、テキストで行います。
画像で分かりますように、記事作成画面に投稿カーソルが表示されています。
ここにイラスト画像と吹き出し文字を表示させていきます。
投稿画面の上部、「吹き出し」をクリックします。(プラグインをインストールし、有効化の時点で自動表示されます)
はい、このように吹き出し作成画面が立ち上がります。
イラストは「SUGER」の名前の箇所をクリックすると、登録している数(無料は最大3つ)だけ表示されます。
右左の矢印で左や右の表示選択もできます。
アバターの向きや吹き出しの文字カラー、吹き出しの背景カラー、吹き出し位置など様々なことが瞬時にできますので、いろいろ試してみてください。
作成方法の動画も下記に用意してますので、確認してみてください。
ただやはり、扱ってみるのが一番慣れるのが早いです。
イラストの位置、吹き出しの言葉等々が良ければ、「右端のブルーの下矢印」をクリックします。
記事作成画面にはコードとともに、作成した言葉も表示されました。
では実際の記事にはどのように表示されるのか、「プレビュー」で確認してみます。
はい、きれいな吹き出しができましたね。
吹き出しはデフォルトのままの場合、左右から飛び出てくるようです。
動かしたくない、上下からの動きにしたいなどの変更もできますので、試してみてください。
ちなみにですが、当ブログで表示させているキャラの大きさと、吹き出しの選択は下記のとおりです。
➀アバター画像をクリックして、➁アバターサイズ「大」を選択。
➂吹き出し画像をクリックして、➃吹き出しサイズ「21PX」を選択。
➄吹き出し「しっぽ」を選択。この時点でカラーは自動でしたので、そのままを選択してます。
次に、話の相手側を右サイドで表示しました。
右側画像の
➀をクリックすると、登録していたアバター女性のネームが表示されたので選択。
➁の右矢印をクリックすると、女性の画像が右側で表示された。
➂の吹き出しカラーも自動表示でしたので、このままを選択してます。カラーの変更はできます。画像サイズや吹き出しピクセルがデフォルトに戻った場合、再度選択が必要です。
デフォルトのままでいい場合は、変更の必要はないです。
有料版World Balloonはアバターを数多く登録できる
それではここからは、有料版の案内をいたします。
(アフィリはありませんが、PROを使用している方は登録してもらえると1ヶ月無料延長がつきます。こちらは案内のみです。)
有料版には下記のような利点があります。
価格は選択ができます。
使用方法はこちらで確認できます。
「吹き出しイラスト画像を設置する方法」でした。
吹き出し用のイラスト画像を選びたい場合は、無料のイラストを好きなだけDLできるイラストダウンロードサイトが便利です。