吹き出し（会話）形式をブログに導入！設定までに参考にしたサイトなど
スポンサーリンク
移転しました。
約3秒後に自動的にリダイレクトします。
更新日：2017/03/28
Shonan Boyブロガーことぺぺ（id:akabaneyama150）でございます。
ブログでよくLINEみたいなやりとり見かけませんか？
他のブロガーさんとか見てて、いつかやってみたいと思っていました！！
ネットサーファーがリアルサーファーに？！宮崎県日向市PR動画が話題 - Shonan Boy
お～、いつの間にそんな高度なこと出来るようになったんだ。笑
超弱小ブロガーなのに、よくできたなと。
はい、それも色々な方のブログ情報やアドバイスでなんとか使えるようになりました。
ありがとうございます。
ということで、今日は吹き出し（会話）形式をブログに設定・導入するまでを書きます。
まだ、やったことがない人はすこしでも参考になれば、幸いです。
吹き出し（会話）導入のキッカケ
前からやりたかったんですよ！！
でも、これはどうやってやるんだ？、と思ってました。
はてなブログでも他のブログでもこの吹き出し（会話）を上手く使って、いかにも会話しているように見せているブログ多いですよね。
いいな～、いいな～。オシャレだな～と指をくわえてみていました。
でも、毎日の記事を書くので手いっぱいでなかなか導入する機会がありませんでした・・・
そんな時です、またしてもこの方がボクのもとに降りてきてくれました！！
ボクのお師匠さん、ポジ熊（id:pojihiguma)さんがこんな記事を書いてくれました。
お～、なんと！！！！
これこれこれ！！！！！
これをまさしく探していたんですよ！！！！！！
なんというタイムリーな、記事。
本当にいつもありがとうございます。
なにはともあれ、実際にやってみた
まずポジ熊さんの記事にリンクが張ってあった方の記事。
この記事でベースのやり方はほぼ分かると思います。
手順は
- まずはCSSにコードをコピペする
- ブログHTML編集に切り替えて、吹き出し（会話）を挿入したい場所にコードを入れる
ボクが実際使ったコードなどはこちらの記事を参考にさせてもらいました。ありがとうございます。
とても分かりやすいので、これでほとんどできちゃいました。
ただボクの場合、吹き出しに使う人物の写真（イラスト）がどうしても設定できませんでした。
自分のファイルにある画像を右クリックしても「画像アドレスをコピー」が出てこなかったのです・・・
なんでだろう？
調べてみると、どうやら一回ブログなどWEB上に画像を上げないとURLが取得できないみたいです。
なるほど、原因はこれですね。
ということで、自分のブログの記事に吹き出しで使いたい画像（イラスト）を投稿して、URLを取得しました。
※そのあとに画像を削除しても問題ありませんので安心してください。
あとはジョージさん（id:george-gogo)の記事の通りに設定すればOKです。
いや～、無事出来ました。
良かった良かった。
吹き出し（会話）はスマホサイトもチェックしよう
@akabaneyama スマホから見るとこの記事の会話のところ、css崩れてる気がします！
— ぴょの@はてなブログ (@pyonononn) 2016年12月5日
ぴょのさんがスマホサイトの問題点を指摘してくれました。
ありがたや～！！
全然スマホサイトの方を忘れていました。
こちらのブログ記事を参考にさせてもらいました。ありがとうございました。
そして、修正しました。
@akabaneyama いえいえ、良かったです！(^ ^)
— ぴょの@はてなブログ (@pyonononn) 2016年12月6日
いや～、こういうのってすごくいいですよね～！！
間違ってるよ～とか、ここをこうした方がいいよ～とか、気付いたら指摘してくれたり、アドバイスくれたり。
だから、はてなブログはやめられませんね。
こういう環境に感謝感謝です。
おわり
いや～、吹き出し（会話）形式なんとか形になりましたね～。
まだ、少し修正する部分もありますけど、とりあえずは良しとしましょう。笑
そして、初めての吹き出し（会話）形式を使った記事がこちらです。
なんか、オリジナルキャラのイラストとか作りたくなりました。笑
これで少しはブログらしくなってきましたかね～。
参考にさせてもらいましたみなさん、 ありがとうございました！！
まだ、吹き出し（会話）形式やったことない人は、ぜひトライしてみてくださいね。
やる前にはバックアップでCSSとか導入する前にすぐに戻れるように準備もしっかりしましょう！！
ヘッダー画像をオリジナルに変えた！格安がまたろうデザインがおすすめ - Shonan Boy
ブログ初心者は必見！！「ポジ熊」さんという愛のブログアドバイザーを - Shonan Boy
超弱小ブロガーの僕がはてなブログProに決めたポイントとメリット - Shonan Boy
