最近美味しい物を食べ過ぎちゃっている、Shonan Boyブロガーことぺぺ（id:akabaneyama150）でございます。
昨日の記事を読んでくれた方は見てくれたと思います。
そう、吹き出し形式を始めて使ってみました！！
お～、いつの間にそんな高度なこと出来るようになったんだ。笑
超弱小ブロガーなのに、よくできたなと。
はい、それも色々な方のブログ情報やアドバイスでなんとか使えるようになりました。
ありがとうございます(*^-^*)
ということで、今日は吹き出し形式をブログに導入するまでを書きます。
まだ、やったことがない人はすこしでも参考になれば、幸いです。
導入のキッカケ
前からやりたかったんですよ！！
でも、これはどうやってやるんだ？、と思ってました。
はてなブログでも他のブログでもこの吹き出しを上手く使って、いかにも会話しているように見せているブログ多いですよね。
いいな～、いいな～。しゃれてるな～と指をくわえてみていました。
でも、毎日の記事を書くので手いっぱいでなかなか導入する機会がありませんでした・・・
そんな時です、またしてもこの方がボクのもとに降りてきてくれました！！
ボクのお師匠さん、ポジ熊（id:pojihiguma)さんがこんな記事を書いてくれました。
お～、なんと！！！！
これこれこれ！！！！！
これをまさしく探していたんですよ！！！！！！
なんというタイムリーな、記事。
本当にいつもありがとうございます。
なにはともあれ、実際にやってみた
まずポジ熊さんの記事にリンクが張ってあった方の記事。
この記事でベースのやり方はほぼ分かると思います。
手順は
- まずはCSSにコードをコピペする
- ブログHTML編集に切り替えて、吹き出しを挿入したい場所にコードを入れる
ボクが実際使ったコードなどはこちらの記事を参考にさせてもらいました。ありがとうございます。
とても分かりやすいので、これでほとんどできちゃいました。
ただボクの場合、吹き出しに使う人物の写真（イラスト）がどうしても設定できませんでした。
自分のファイルにある画像を右クリックしても「画像アドレスをコピー」が出てこなかったのです・・・
なんでだろう？
調べてみると、どうやら一回ブログなどWEB上に画像を上げないとURLが取得できないみたいです。
なるほど、原因はこれですね。
ということで、自分のブログの記事に吹き出しで使いたい画像（イラスト）を投稿して、URLを取得しました。
※そのあとに画像を削除しても問題ありませんので安心してください。
あとはジョージさん（id:george-gogo)の記事の通りに設定すればOKです。
いや～、無事出来ました。
良かった良かった。(*'ω'*)
スマホサイトがえらいことに・・・
@akabaneyama スマホから見るとこの記事の会話のところ、css崩れてる気がします！
— ぴょの@はてなブログ (@pyonononn) December 5, 2016
ぴょのさんがスマホサイトの問題点を指摘してくれました。
ありがたや～！！
全然スマホサイトの方を忘れていました。
こちらのブログ記事を参考にさせてもらいました。ありがとうございました。
そして、修正しました。
@akabaneyama いえいえ、良かったです！(^ ^)
— ぴょの@はてなブログ (@pyonononn) December 6, 2016
いや～、こういうのってすごくいいですよね～！！
間違ってるよ～とか、ここをこうした方がいいよ～とか、気付いたら指摘してくれたり、アドバイスくれたり。
だから、はてなブログはやめられませんね。
こういう環境に感謝感謝です。
おわり
いや～、なんとか形になりましたね～。
まだ、少し修正する部分もありますけど、とりあえずは良しとしましょう。笑
そして、初めての吹き出し（会話）形式を使った記事がこちらです。
なんか、オリジナルキャラのイラストとか作りたくなりました。笑
これで少しはブログらしくなってきましたかね～。
参考にさせてもらいましたみなさん、 ありがとうございました！！