cssでキャラクターを喋らせてみたいつもこのブログを読んでくれている人、ツイッターを見てくれている人なら気付いたかもしれませんが、最近このブログに変化が起きたんです。
ほらほら、以前と違って決定的に違う部分がありますよね？
そうです！
当ブログのキャラクター、おばけが喋れるようになったんです！！
そして、見た目も可愛くなったんです！
吹き出しでキャラを喋らせるのは人様のブログを見てずっと憧れていたので、実現できてからは喋らせまくってますw （それがここ最近の記事）
毒づいたこともキャラに言わすと柔らかくなるので助かっていますよ。
例えば…
ほらね？？
今回はそんなキャラクターのリニューアル＆吹きだしを使って喋らせるまでの流れをご紹介します！
ブログのキャラクターをリニューアルしよう
吹き出しを入れるにあたり、気になったのがキャラクターデザインです。
実名・顔出しなんてする勇気のない僕はハンドルネームを「風街おばけ」にすることに決定した際、キャラクターを製作しました。
それがこれ！
フリー素材をもとに加工して描いたものです。
プロフィールアイコンや自己紹介記事にしか登場していなかったので、初めて見るって人も多いんじゃないでしょうか？
これはこれで気に入ってはいたのですが、少し暗い気がします…。
人前に出すには、なんかどんよりしてる！
どうせ喋らせるならもうちょっと可愛くしようと思い、クッソ重たいフォトショを使ってリニューアルを決行しましたよ。
ちなみに過去に描いたイラストを晒した記事もあるので、興味ある人は読んでくれると嬉しいです。
リニューアル中の様子。
アイコンをリニューアルするべく死ぬほど重たいフォトショと格闘してる pic.twitter.com/RKP08ChgLr
— 風街おばけ (@obake_kzmc) 2018年5月18日
そしていろいろ迷走した結果、完成したのがこちら！
どうでしょうか！？
だいぶ可愛くなりましたよね？？
具体的にどこをいじったのかを書くと
- 線を細くする
- まつ毛を生やし目を可愛くする
- ほっぺを少し赤く染める
- 耳とシッポを生やす
- オシャレにリボンを装着
- 全体の配色をパステルカラー寄りに変更
といった感じです。
原形は留めつつ、ポップにしてみました。
前のおばけがオスなら、こっちはメスですねw
ネコが好きなので、中にはネコが入ってるってイメージで描きましたよ。
ちなみにペンタブもないのでペンツールをカチカチすること数時間…。
我ながら重たいフォトショで頑張りました。
よし、次はこのおばけを喋らせますよ！
cssで吹き出しの設定をしてキャラを喋らせよう
おばけ（♀）を喋らせるため、自分好みのデザインをした吹き出しcssを探しました。
参考にさせていただいた記事はこちら！
- 吹き出しアイコン用にリサイズした100px_100pxのキャラ画像
- キャラ画像のURL
を用意し、先程の記事のcssをはてなブログの管理画面から
「デザイン」→「カスタマイズ」→「デザインcss」の欄にコピペするだけでOK！
ちなみにキャラ画像のURLは一旦ブログに画像をアップし、HTML編集モードにすれば簡単に確認できましたよ。（はてなフォトライフにアップして確認するのもアリ）
個人的にデフォルトだとアイコンが小さく感じたので、サイズを60pxから80pxに変更しました。
その他に吹き出しの色や文字の位置など細かいところを微調整して、ついに完成！
無事におばけが喋れるようになりました…！！
はてなブログで吹き出しを作ってみた／まとめ
キャラクターを喋らせるデザインは難しそうと思い後回しにしていたのですが、やってみると案外簡単でした！
キャラの画像さえ用意できれば、サクッとブログ内で喋らせることができますよ。
僕の場合、キャラクターの製作と吹き出しの微調整に時間がかかってしまいましたが、特にこだわりがなければ30分あれば実装できると思います。
興味がある人はぜひ試してみてはいかがでしょうか？
次はヘッダー画像作りにチャレンジしてみようと思います！
ちなみに、こんな感じでブログに関することや日常のことをおばけが呟いてるので、良かったらツイッターもフォローしてくださいね！
ツイッター／風街おばけ（@obake_kzmc）
