【コピペOK】CSSで会話形式の吹き出しを作る方法

他の人のブログをいろいろ見ていると、吹き出しを使って会話形式で進めていくスタイルに出会うことがあります。

文字だけの文章に比べて、とても読みやすく、自分も使ってみたい！と思ったことはないでしょうか？

私はとても真似したくなったので、CSSで吹き出しを作ってみました。

ソースを公開しているので、ちょっと試してみたいなーと思っている方はぜひ試してみてください。

ではさっそくソースを見てみよう！

とっても簡単だから試してみてね！

こんな感じの吹き出しが作れます。

プラグインは利用しません。

CSSで吹き出しのデザインを作る

こちらのソースをコピーしてstyle.cssに貼り付けてください。

左側（balloonL）と、右側（balloonR）の2通りを用意しているのでけっこうなボリュームになりました。

flexboxを使って、アイコン画像と吹き出し部分を並べています。

左側の吹き出しを紫、右側の吹き出しを緑にしていますが、色はお好みで変更してください。

記事に吹き出しを入れる

CSSの準備ができたら、記事内に吹き出しを作っていきます。

こちらのソースが、左側の吹き出しです。

imgタグ内にはアイコン画像のURL、
divタグballoon-text-inner内に吹き出しの中に入れたいテキストを記述しよう！

balloonLの部分を、balloonRにするだけで、右側の吹き出しになります。

左右の吹き出しを、AddQuicktagで登録しておくと、1クリックで吹き出しが設置できるのでとても便利です。

まとめ：吹き出しで記事に彩りを！

吹き出しが入ることで、記事がぱっと明るくなります。

また、くだけた表現も入れやすくなるため、読みやすくなります。

うまく取り入れることで、記事のレベルがワンランクアップするね！

書いてる方もちょっと楽しくなるのが吹き出しの隠れたいいところだと私は思います。

皆さんもぜひ使ってみてください。

ではまた！