憧れのふきだし💭をやっと作ることができました。
何が一番難しかったか⁇
それは自作のアイコンです！
では、順に！
自作のアイコンを作る。
自分で作ったアイコンを使いたかったけど、
人の顔ってホント難しい！
私には才能はない！とつくづく実感しました。
でも頑張った！
ピンタレスト
ピンタレストというアプリがあります。
これはレシピやインテリア、ファッションコーデなど試したくなるアイデアを発見しましょう。 という、アイデアがびっしり詰まったアプリです。
その中で、人の顔の表現の仕方など参考にしました。
顔を描きたいけど、イメージが湧かない・・・
そんな時に参考になります。
顔だけでなく色んなアイデアがあるので見てるだけで楽しいですよ？
アイビスペイント
ピンタレストのアイデアを参考にして、アイビスペイントでイラストを描きました。
apps.apple.com
初心者ですので、細かいところはお許しを！
注意点
ふきだしに使う場合は、正方形のサイズに調整してからブログに取り込むと画像が崩れなくて済みます。
では、
アイコンが用意できたので早速ふきだしを。
もちろんコピペです！
吹き出しのつくり方
Kome（@chankomeppy）さんのCSSとHTMLをコピペさせていただきました。
【はてなブログ】WordPressみたいな会話形式の吹き出しを使おう💓（コピペOK / 初心者向け） - 【ちゃんこめBlog】インド在住OLの雑記ブログ
KomeさんのCSSには、ややこしい書き換えなんかがないのですごくやりやすかったです。
おまけに考えてる風のモクモクのふきだしも作れます。
Koｍeさんの説明はすごく分かり易かったので、私が戸惑った所だけを少し。
私はマークダウン記法を使いました。
① 空欄に写真を貼り付けます
② 名前を表示したい場合はここに
③ ここにテキストも空欄に
ちゃんと入れやすいように空欄が設けられいます。 そのまま入れればいいんですね？
私はわざわざ［ふきだし内テキスト］の部分を消してそこに文字を入れてしまったよ・・・
これでふきだしの準備は完了！
さて、どうかな？
問題発生！
ふきだしが表示されない！
汗・汗・汗・・・
なんで？？？
解決方法
デザインCSSには優先順位があるようです。
上に行くほど順位が上がるので、上手くいかないときは上部に貼りなおすだけで表示されるようになりました。
解決!
よかった・・・
おわりに
アイコンさえ用意すれば、ふきだしはコピペで簡単にできます。 私は自分のオリジナルイラストをどうしても作りたかったのですごく時間がかかってしまいましたが。。。
無料のイラストでかわいいものもたくさんあります。
でも、自分でオリジナルのアイコンを作るのはすごく楽しかったです。 挫折しそうになった時もありますが・・・
よかったら挑戦してみてくださいね？
では！
