【保存版】優しく彩る。ナチュラル吹き出し図鑑
ブログの雰囲気をふわっと柔らかくする、ベージュや茶系を中心とした吹き出し素材です。1クリックでコピーして使ってくださいね。
アンティーク・リネン
布の質感と白いドットレースを合わせた、一番人気のデザインです。
癒しのひとときを
コードをコピーする ＋
<div style="position:relative;display:inline-block;padding:25px 20px;color:#6d5d50;background:#ede7de radial-gradient(#dbd3c9 1px,transparent 1px);background-size:3px 3px;border-radius:50%/15%;text-align:center;min-width:180px;"><style>.lace::before{content:'';position:absolute;top:0;left:10%;right:10%;height:10px;background:radial-gradient(circle,#fff 3px,transparent 3px);background-size:10px 10px;}.lace::after{content:'';position:absolute;bottom:-10px;left:40px;border:10px solid transparent;border-top-color:#ede7de;border-right-width:0;}</style><span class="lace">ここに文字</span></div>ミルクティー・シンプル
どんな背景にもスッと馴染む、柔らかなサンドベージュの吹き出しです。
毎日の暮らしに、彩りを。
コードをコピーする ＋
<div style="position:relative;display:inline-block;padding:15px 25px;background:#e9e4dc;color:#5a544b;border-radius:15px;"><style>.simple::after{content:'';position:absolute;top:50%;left:-12px;margin-top:-8px;border:8px solid transparent;border-right:12px solid #e9e4dc;}</style><span class="simple">ここに文字</span></div>くすみピンクベージュ
ほんのり甘い、大人のくすみカラー。女性らしい雰囲気に最適です。
可愛すぎない絶妙カラー
コードをコピーする ＋
<div style="position:relative;display:inline-block;padding:15px 25px;background:#eededb;color:#8e7d6f;border-radius:30px 30px 30px 5px;font-weight:bold;">ここに文字</div>縦書きサンドベージュ
余白に置くとお洒落。和のトーンにも合う縦書きスタイルです。
凛とした佇まい。
コードをコピーする ＋
<div style="position:relative;display:inline-block;writing-mode:vertical-rl;padding:20px 12px;background:#d9d2c5;color:#5a544b;border-radius:10px;min-height:120px;letter-spacing:0.2em;text-orientation:upright;"><style>.vert::after{content:'';position:absolute;top:20px;right:-10px;border:8px solid transparent;border-left:10px solid #d9d2c5;}</style><span class="vert">ここに縦書きメッセージ</span></div>ワンポイント・モカ
補足情報やポイント説明に使いやすい、ミニサイズの濃いめベージュ。
Point! 読みやすさ重視
コードをコピーする ＋
<div style="position:relative;display:inline-block;padding:8px 18px;background:#b3a598;color:#fff;border-radius:50px;font-size:0.9em;font-weight:bold;"><style>.mini::after{content:'';position:absolute;bottom:-8px;left:20px;border:6px solid transparent;border-top-color:#b3a598;}</style><span class="mini">ここに文字</span></div>🎨 吹き出しの使用イメージ
カバーブロックに「くすみピンクベージュ」を重ねた例です。
落ち着いたトーンで、大人可愛い雰囲気に仕上がります。
＼ こちらもあわせてチェック！ ／
✨ ふんわり可愛い「水彩吹き出し」も見てね！ご利用規約（免責事項）
- 本素材（コード）は、個人・商用を問わず無料でご利用いただけます。
- 著作権は放棄しておりません。コードの再配布、販売、自作発言はご遠慮ください。
- 動作確認はしておりますが、お使いの環境によりデザインが崩れる場合があります。本素材の使用によって生じたトラブルや不具合について、当ブログは一切の責任を負いかねます。
- 個別のカスタマイズ方法や不具合に関するサポートは行っておりません。
コメント