本記事では画像の下にその説明が書かれてるよ!

【ブログの吹き出し作り方】プラグインWord Balloonをインストールして設定してみよう!

Procreate
スポンサーリンク

Procreateで描いたイラストをワードプレスの吹き出しアイコンとして表示させてみましょう!オリジナルイラストが吹き出しとして登場するとサイトにオリジナル感が出ていいですよね!イラストだけでなく写真も吹き出しとして登場させれます。

ワードプレスで吹き出しプラグインのインストール方法とアバター登録方法を併せてご紹介します!今回インストールする吹き出しプラグインは「Word Balloon」です。

インストールの方法からご覧になる場合はこちらをクリックしてページを移動してください。

ProcreateとはiPad専用の有料イラスト制作アプリです。ブラシの種類が豊富で、Apple Pencilを使えば力の入れ方次第で線に強弱をつけることもできます。アニメーション機能にも対応しています。
青山さん
青山さん

吹き出しにちょうどいいサイズってあるの?

推奨サイズは350×350pxで実際の表示サイズは128×128pxとされているけど、イラストを作成するときはサイズを大きくして描いても問題ないよ!

うーたみ
うーたみ

イラスト作成キャンバスサイズ

ワードプレスの吹き出しの推奨サイズは350×350pxとされてますが、プロクリエイトで350×350pxのキャンバスでイラストを描こうとすると少し小さいので、今回は1280×1280pxで正方形のキャンバスを立ち上げて描いていきます。

青山さん
青山さん

1280×1280pxじゃないといけないの?

1000×1000pxでもいいし、描きやすいサイズでOKだけど正方形がいいと思うよ!

うーたみ
うーたみ

キャンバスの作成は、画面右上のプラスボタンからキャンバスの作成画面を開きます。ピクセルを選択して、幅1280×高さ1280pxと入力します。

ゴリたみ
ゴリたみ

Apple Pencilで書いて入力することもできるよ!

吹き出しアイコンはウェブ上で使うものなので、カラープロファイルはRGBを選択します。RGBとはコンピューターやディスプレイに使う発色方式です。

RGBについて詳しくはこちらの記事をご覧ください。

キャンバスサイズ1280×1280pxのドット絵です。

このアイコンイラストを吹き出しとして表示出せてみます。

こんにちは~!吹き出しにするとこんな感じだよ!

350×350pxと1280×1280pxのイラストで比較

こっちがキャンバスサイズ350×350pxだよ!

こっちがキャンバスサイズ1280×1280pxだよ!


どちらのキャンバスサイズでも問題はないので、1280×1280pxのキャンバスの方が大きくて描きやすいかと思います。

Word Balloonをインストールする

管理画面の「プラグイン」から「新規追加」選択して、
検索に「Word Balloon」と入力します。

インストール
有効化


「Word Balloon(吹き出し)」というプラグインが表示されるので、「今すぐインストール」をクリックします。インストールが終わりましたら「有効」をクリックします。

吹き出しにアイコンイラストを登録する

3種類のイラストとイラストの名前を無料でアバターとして登録できます。4種類以上登録したい場合は有料版を購入する必要があります。
ただ、無料版でも登録できるのが3種類までで、登録せずにその都度好きなイラストを吹き出しとして使うことができます。

うーたみ
うーたみ

登録しているイラスト以外のイラストも吹き出しと表示させることはできますが、名前は表示させることはできないよ。

管理画面の「設定」から「Word Balloon」をクリックします。


「画像を選択」からイラストをアップロードします。
アバターの名前の入力をして、アバターの登録をクリックして登録完了です。
メモは任意で入力して下さい。

3種類のアバターを登録できました。

ねこたみ
ねこたみ

GIFアニメーションもアバターとして登録できるよ。

GIFアニメーションとは複数の静止画をパラパラ漫画のように表示させて動画のようにみせる画像のことだよ!

うーたみ
うーたみ

実際に吹き出しを使用してみる

投稿画面から吹き出しを使用するには、画面左上のプラスボタン入力画面に出るプラスボタンからWord Balloonを選択します。

【アバターの変更】

登録した他のアバターに変更するときは、画面右の「ブロック」にある「アバター」から変更したいアバターをプルダウンから選択します。

登録外のイラストを吹き出しとして使用する

Water Balloonに登録してないイラストを吹き出しとして使用するには、吹き出しを入力してから
アバターをクリックします。「メディアの選択とアップロード」画面になりますので、すでにワードプレスに読み込んであるイラストを使用する場合は「メディアライブラリ」からイラストの選択をします。まだ読み込んでいないイラストは「アップロード」からアップロードします。

これで登録していないイラストも吹き出しとして使用することができます。ただし、アバターとして登録されていないので名前を表示させることはできません

吹き出しのカスタマイズ

吹き出しの形や色などはカスタマイズが可能です。吹き出しを出したあと吹き出しを選択した状態で、画面右の「ブロック」から「アバター」を選択して枠に影を付けたり、枠を四角にしたりできます。
「吹き出し」を選択すると、吹き出しのカスタマイズができます。

アバターの枠線を「周辺に枠線を入れる」にをONにして、
角丸に「四角」を選択するとこのようになるよ!

青山さん
青山さん

サイトにオリジナル感を出すのに吹き出しのアバターはオリジナルイラストを使用するのもいいね!

ぜひ作成してみてね!

うーたみ
うーたみ

記事に影響を与えずにアバター画像を変更する方法についてはこちらの記事をご覧ください。

全身のドット絵を吹き出しの画像にするとこんな感じだよ!

動物などのドット絵もやってます!

ブサエモいイラストの制作も承っております。

オリジナルキャラクター作成します☆

コメント