18分SHAREツイートシェアはてブLINEPocketサイト内でもよく使う「吹き出し」の形のデザイン。文章の途中で挟むことで見やすくなり、より分かりやすくなり、滞在時間も上昇すると言われています。使い方が分かっているという人は飛ばしてもらっても構いません。紹介しているHTMLは記事中にそのまま貼り付け、CSSはstyle.cssなど、各ブログサービスのCSSを設定している場所に貼り付けましょう。外観テーマエディターstyle.cssにCSSを貼り付けです。はてぶでも、Amebaでもコピペだけで簡単に使用可能ですので、サクッと検索してやってみましょう!また、ここで紹介している吹き出しは、大体下側のみに余白が少しあるだけです。ブログ内で使用して、余白がもう少し欲しい・・・と思う方は、以下の記事を参考に調節してみてください!CSSのmarginとpaddingの使い方!複雑な関係性を抑えよう!余白設定で大事になるmarginとpaddingについて、今回は紹介していきます!このmargin・padding(とborder・box-sizingとの関係性)も覚えておかなければならないプロパティの一つです。今回は、要素の余白を設定する、marginとpaddingについて学んでいきます。2.基本の吹き出し4つ基本的な吹き出しを紹介していきます。:beforeという疑似要素を使用して三角形をつくり、それをうまい具合に配置することで吹き出しの基本的なデザインを作ります。transparent;}3.基本の吹き出し―枠線付き4つ枠線付きの吹き出しは、:beforeも:afterも使用します。画像は分かりやすいように色を多少変えていますが、サイズの違う三角形を2つ使用して、枠線のついた吹き出しに見せています。transparent;}4.吹き出しの角を丸める吹き出しの角の部分を丸める方法は簡単です。〇px;をCSSに追加するだけです。transparent;}いずれも、一度紹介したCSSに1行足しただけです。簡単にアレンジできるので、覚えておきましょう!5.思っている風吹き出し何かを思っている風の吹き出しです。15px;}6.影付きの吹き出し影付きの吹き出しでは、:beforeで三角を、:afterで影の三角部分を作っています。そのため、枠線付きで影付きを作るのは難易度が高くなります・・・。transparent;}7.お知らせに使う吹き出し文字の左上に動く吹き出しがあればだれでも見てしまうものです。吹き出しの角を丸くする、文字をPointなどに変えるなど、アレンジは自由自在です。}}8.画像に吹き出しを追加する画像の横や、画像の下に吹き出しを追加します。以下の記事を参考・多少改変しました。CSSコピペでOK!画像にサルワカ風の吹き出しを入れようそうです、これはサルワカさんが多用しているもので、画像を使って説明する際に、非常に分かりやすくなるため便利です。画像は、600px×600pxを使用しました。できるだけ正方形に近い画像の方がいいのかなと思います。}}9.まとめ今回は、吹き出しについてサンプルをまとめてみました!吹き出しは、基本的に囲み枠+三角形でできるため、以下の囲み枠のデザインサンプル例を元に三角形を組み合わせれば、自分好みのオリジナルなものも作ることができます!ぜひ以下の記事を参考にオリジナルの吹き出しを作ってみたり、より見やすい記事づくりをしていきましょう!CSSコピペするだけ!ボックスデザイン(囲み枠)25選【色別サンプル62種】ブログで使用するHTML,CSSでできるおしゃれなボックスが欲しい!でも、自分のブログに見合った色がなかなか見つからない・・・。