Procreateで描いたイラストをワードプレスの吹き出しアイコンとして表示させてみましょう!オリジナルイラストが吹き出しとして登場するとサイトにオリジナル感が出ていいですよね!イラストだけでなく写真も吹き出しとして登場させれます。
ワードプレスで吹き出しプラグインのインストール方法とアバター登録方法を併せてご紹介します!今回インストールする吹き出しプラグインは「Word Balloon」です。
インストールの方法からご覧になる場合はこちらをクリックしてページを移動してください。
![](https://u-tami-1.com/wp-content/uploads/2021/04/procreate.png)
![青山さん](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し-1-1.gif)
吹き出しにちょうどいいサイズってあるの?
推奨サイズは350×350pxで実際の表示サイズは128×128pxとされているけど、イラストを作成するときはサイズを大きくして描いても問題ないよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
目次
イラスト作成キャンバスサイズ
![](https://u-tami-1.com/wp-content/uploads/2022/07/4-1024x768.png)
ワードプレスの吹き出しの推奨サイズは350×350pxとされてますが、プロクリエイトで350×350pxのキャンバスでイラストを描こうとすると少し小さいので、今回は1280×1280pxで正方形のキャンバスを立ち上げて描いていきます。
![青山さん](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し-1-1.gif)
1280×1280pxじゃないといけないの?
1000×1000pxでもいいし、描きやすいサイズでOKだけど正方形がいいと思うよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
![](https://u-tami-1.com/wp-content/uploads/2022/07/5-1024x768.png)
キャンバスの作成は、画面右上のプラスボタンからキャンバスの作成画面を開きます。ピクセルを選択して、幅1280×高さ1280pxと入力します。
![](https://u-tami-1.com/wp-content/uploads/2021/07/名称未設定のアートワーク-62-1024x768.png)
![ゴリたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
Apple Pencilで書いて入力することもできるよ!
![](https://u-tami-1.com/wp-content/uploads/2022/07/6-1024x768.png)
吹き出しアイコンはウェブ上で使うものなので、カラープロファイルはRGBを選択します。RGBとはコンピューターやディスプレイに使う発色方式です。
RGBについて詳しくはこちらの記事をご覧ください。
![](https://u-tami-1.com/wp-content/uploads/2022/06/統合-2.png)
キャンバスサイズ1280×1280pxのドット絵です。
このアイコンイラストを吹き出しとして表示出せてみます。
![](https://u-tami-1.com/wp-content/uploads/2022/06/統合-2.png)
こんにちは~!吹き出しにするとこんな感じだよ!
350×350pxと1280×1280pxのイラストで比較
![](https://u-tami-1.com/wp-content/uploads/2021/07/350px.png)
こっちがキャンバスサイズ350×350pxだよ!
![](https://u-tami-1.com/wp-content/uploads/2022/06/統合-2.png)
こっちがキャンバスサイズ1280×1280pxだよ!
どちらのキャンバスサイズでも問題はないので、1280×1280pxのキャンバスの方が大きくて描きやすいかと思います。
Word Balloonをインストールする
![](https://u-tami-1.com/wp-content/uploads/2021/07/無題-1.png)
![](https://u-tami-1.com/wp-content/uploads/2021/07/検索-1-1024x399.png)
管理画面の「プラグイン」から「新規追加」を選択して、
検索に「Word Balloon」と入力します。
![](https://u-tami-1.com/wp-content/uploads/2021/07/インストール-1024x393.png)
![](https://u-tami-1.com/wp-content/uploads/2021/07/有効化-1024x393.png)
「Word Balloon(吹き出し)」というプラグインが表示されるので、「今すぐインストール」をクリックします。インストールが終わりましたら「有効」をクリックします。
吹き出しにアイコンイラストを登録する
3種類のイラストとイラストの名前を無料でアバターとして登録できます。4種類以上登録したい場合は有料版を購入する必要があります。
ただ、無料版でも登録できるのが3種類までで、登録せずにその都度好きなイラストを吹き出しとして使うことができます。
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
登録しているイラスト以外のイラストも吹き出しと表示させることはできますが、名前は表示させることはできないよ。
![](https://u-tami-1.com/wp-content/uploads/2021/07/設定.png)
管理画面の「設定」から「Word Balloon」をクリックします。
![](https://u-tami-1.com/wp-content/uploads/2021/07/アバター.png)
「画像を選択」からイラストをアップロードします。
アバターの名前の入力をして、アバターの登録をクリックして登録完了です。
メモは任意で入力して下さい。
![](https://u-tami-1.com/wp-content/uploads/2021/07/image-1024x435.png)
3種類のアバターを登録できました。
![ねこたみ](https://u-tami-1.com/wp-content/uploads/2022/06/名称未設定のアートワーク-7-1.gif)
GIFアニメーションもアバターとして登録できるよ。
GIFアニメーションとは複数の静止画をパラパラ漫画のように表示させて動画のようにみせる画像のことだよ!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
実際に吹き出しを使用してみる
![](https://u-tami-1.com/wp-content/uploads/2021/07/+ボタン-1024x256.png)
![](https://u-tami-1.com/wp-content/uploads/2021/07/image-1.png)
投稿画面から吹き出しを使用するには、画面左上のプラスボタンか入力画面に出るプラスボタンからWord Balloonを選択します。
【アバターの変更】
![](https://u-tami-1.com/wp-content/uploads/2021/07/アバター変更-1024x218.png)
登録した他のアバターに変更するときは、画面右の「ブロック」にある「アバター」から変更したいアバターをプルダウンから選択します。
登録外のイラストを吹き出しとして使用する
![](https://u-tami-1.com/wp-content/uploads/2021/07/登録外.png)
Water Balloonに登録してないイラストを吹き出しとして使用するには、吹き出しを入力してから
アバターをクリックします。「メディアの選択とアップロード」画面になりますので、すでにワードプレスに読み込んであるイラストを使用する場合は「メディアライブラリ」からイラストの選択をします。まだ読み込んでいないイラストは「アップロード」からアップロードします。
これで登録していないイラストも吹き出しとして使用することができます。ただし、アバターとして登録されていないので名前を表示させることはできません。
![](https://u-tami-1.com/wp-content/uploads/2021/07/no-name.png)
吹き出しのカスタマイズ
吹き出しの形や色などはカスタマイズが可能です。吹き出しを出したあと吹き出しを選択した状態で、画面右の「ブロック」から「アバター」を選択して枠に影を付けたり、枠を四角にしたりできます。
「吹き出し」を選択すると、吹き出しのカスタマイズができます。
![](https://u-tami-1.com/wp-content/uploads/2022/06/統合-2.png)
アバターの枠線を「周辺に枠線を入れる」にをONにして、
角丸に「四角」を選択するとこのようになるよ!
![青山さん](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し-1-1.gif)
サイトにオリジナル感を出すのに吹き出しのアバターはオリジナルイラストを使用するのもいいね!
ぜひ作成してみてね!
![うーたみ](https://u-tami-1.com/wp-content/uploads/2022/06/吹き出し.gif)
記事に影響を与えずにアバター画像を変更する方法についてはこちらの記事をご覧ください。
![](https://u-tami-1.com/wp-content/uploads/2021/07/テンプレートRGB.png)
全身のドット絵を吹き出しの画像にするとこんな感じだよ!
![](https://u-tami-1.com/wp-content/uploads/2021/07/名称未設定のアートワーク.png)
動物などのドット絵もやってます!
![](https://u-tami-1.com/wp-content/uploads/2022/06/瞬きアニメーション.png)
![](https://u-tami-1.com/wp-content/uploads/2021/07/名称未設定のアートワーク-7.png)
ブサエモいイラストの制作も承っております。
![](https://u-tami-1.com/wp-content/uploads/2021/07/名称未設定のアートワーク-22.png)
オリジナルキャラクター作成します☆
![](https://u-tami-1.com/wp-content/uploads/2022/07/名称未設定のアートワーク-1.gif)
コメント