はてなブログで簡単に会話の吹き出しを記事内に作る方法（HTMLとCSSのみ）

f:id:atenami:20170822201724j:plain

最近のブログやwebメディアでは会話形式の記事が多く見られますよね。とても見やすいので真似をしたいと思っていましたが、cromeの設定とかJavaとか他の難しい設定はやりたくない・・・ということで簡単な方法を探しました。

クリアメモリ様のものが一番簡単だと思います！

本当に助かりました！ありがとうございます！

記事を書く時に直接HTML編集の箇所にコピペしてください。画像ははてなフォトライフなどにアップしたものを使うのが簡単だと思います。この形式だと上のような会話ができます。

ブログのデザイン編集でCSSにコピペしてくださいね。

＊なぜか画像URLはここで指定したものでなくても、直接記事に挿入したもののみ反映されます・・・なぜかしら。

＊吹き出しの大きさや形などはもっと調整してもいいかもしれません♩（私は面倒なのでこのまま・・・）

ヨッピーさんがテキスト記事をアップされていたことがあって、さすがのよっぴーさんのものでもとても読むのが辛かったことから、この会話形式を導入することにしました。最近のブログやwebメディアって本当に画像がうまいこと当てはめてあって読みやすいですよね〜。

ライターアテナミの頭の中