こんにちは

WordPress初心者の私がWordPressでブログを作る奮闘記第四弾は

キャライラストが吹き出しで喋ってるみたいに出来るようにしたい!を実現していきます

吹き出しってどんなの?って方のために実装したものがこちらです↓

FWAFWA houseのブログだよぉぉぉ〜!!

そう、これがやりたかった〜!

実装はびっくりするほど簡単な設定だけどやっぱり初心者なのでつまずきました・・

私がつまずいたポイントも一緒に見ていきましょう♪

WordPress用の吹き出しプラグインを入手しよう!

吹き出し実装にあたり[ブログ 吹き出し wordpress]で検索したらすぐに出てきたのがWordPress公式のプラグインでした

https://lqd.jp/wp/plugin/speech-balloon.html

小難しいタグを小難しいタグのどこかに入れ込まないといけないとばかり思っていたら

このプラグインをダウンロードするだけで簡単に吹き出しが作れるなんて感動です

早速ダウンロードしましたよ!

ダウンロードしたファイルはWordPress管理画面の[プラグイン]→[新規追加]からアップロードします

わーい!もう出来た〜!!早速吹き出しで遊ぶぞ〜!

このプラグインを入れると段落などが選べるところに[フキダシ]というのが新たに追加されるそうです

どれどれ・・・

フキダシなくない?

確かにプラグインは追加して有効になっているのに出来ないぞー!

と思っていたら文字の下に[+]マークが出てきて

こっちにあったー!!!

無駄に色々更新したりしたけれど意味はなかったようです笑

フキダシ機能に自分で描いたイラストを設定するためには

あらかじめ管理画面の左メニュー[設定]の[LIQUID SPEECH BALLOON]で画像と名前を設定しておく必要があります

この[名前]は自分が管理するための名前だと思っていた私は分かりやすいファイル名を表記したところ

yurieノーマル

謎のノーマルアピール

どうやら[名前]は誰が喋ってるかを読者さんに分かりやすくするためのものだったみたいです(^^;)

読者さん向けの名前に変えました!

吹き出しは枠の背景色やフォントの色を変えたりも出来ますよ♪

右側に設定できる場所があるのでお好みの吹き出しを作りましょう

ちなみに私は表情別にイラストを書き分けたのですが、台詞によって画像を変えたい時は事前に設定から画像をアップしておき、投稿画面ではアバターから変えることが出来ますよ

ここまでやってみて思いの外キャラクターが小さい事に気がつきました

とても小さい私のイラスト

そこで丸くイラストを切り取って拡大した物に変更する事にしました

Photoshopなどのマスク機能を使うと元のイラストはそのまま切り抜けますよ♪

設定したファイルは一旦[メディア]から削除してアップし直します

その際少しだけリンクの名前が変わる様なので[設定]の[LIQUID SPEECH BALLOON]の名前も変えましょう

キャラクターの顔を大きくした事と丸い背景を作った事でより見やすくなりました!

見やすい気がする!

今回ブログの吹き出し用に作った画像は全部で22種類!

吹き出しを使って適当なセリフで使用例を作りました!

あちゃーーコンソメの方だったかー

洗濯機に靴下1個だけ残ってた・・

焼肉食べ放題いいねー!

磨き抜かれた50円玉をご覧ください!

推しが尊い・・

・・・誰得?

キャラクターが喋ると人間味が出て感情豊かなブログになりますね♪

吹き出しは普通に喋っている感じのと、思ってる感じの2種類から選べます

背景色や文字色を変えてさらに感情が表現できますね!

ただし太字設定にした文字は黒以外反映されないみたいです(なんでだろう)

アイコンは使用場所が限定されない凡庸性のある喜怒哀楽を作ると便利そうですよ♪

フキダシ楽しいのでぜひ挑戦してみてくださいね♪

うまく出来て良かったにゃも!

スポンサーリンク