ワードプレスで、見出しを吹き出しのデザインにしているブログを良く見かけます。
それで、今回は吹き出しをCSSで作ってみることにしました。
<div>タグでコードを書いていますが、ここを<h2>のような見出しタグに変更してカスタマイズすると吹き出し型の見出しを作ることができますよ。
ぜひ活用してみてください。
CSSで吹き出しを作る方法
右向きの吹き出し
角丸ボックスに、ボーダーの左辺だけを見せた幅も高さも0のボックスを付けています。
背景を塗って、文字色を白で表示。
背景を塗って、文字色を白で表示。
このHTMLタグの「コメント」の部分に任意の文章を入れます。
|
1 |
<div class="baloon-right">コメント</div> |
そして、スタイルシートに以下のスタイルを記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.baloon-right{ margin-right:20px; margin-top:10px; margin-bottom:10px; padding:10px; border-radius:10px; position:relative; height:auto; width:50%; border: 1px solid #e6a117; float:right; background-color: #e6a117; color: #fff; } .baloon-right:before{ position: absolute; left: 100%; top: 20%; content:" "; border-left: 20px solid #e6a117; border-top: 10px solid transparent; border-right: 20px solid transparent; border-bottom: 10px solid transparent; } |
左向きの吹き出し
角丸ボックスに、ボーダーの右辺だけを見せた幅も高さも0のボックスを付けています。
白色の幅も高さも0のボックスをずらして重ねることで、吹き出し部分にボーダーがあるように見せています。
白色の幅も高さも0のボックスをずらして重ねることで、吹き出し部分にボーダーがあるように見せています。
このHTMLタグの「コメント」の部分に任意の文章を入れます。
|
1 |
<div class="baloon-left">コメント</div> |
そして、スタイルシートに以下のスタイルを記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.baloon-left{ margin-left:20px; margin-top:10px; margin-bottom:10px; padding:10px; border-radius:10px; position:relative; height:auto; width:50%; border: 1px solid #e6a117; float:left; } .baloon-left:before{ position: absolute; right: 100%; top: 20%; content:" "; border-right: 20px solid #e6a117; border-top: 10px solid transparent; border-left: 20px solid transparent; border-bottom: 10px solid transparent; } .baloon-left:after{ position: absolute; left: -38px; top: 20%; content:" "; border-right: 20px solid #fff; border-top: 10px solid transparent; border-left: 20px solid transparent; border-bottom: 10px solid transparent; } |
下向きの吹き出し
角丸ボックスに、ボーダーの上辺だけを見せた幅も高さも0のボックスを付けています。
背景を塗って、文字色を白で表示。
背景を塗って、文字色を白で表示。
このHTMLタグの「コメント」の部分に任意の文章を入れます。
|
1 |
<div class="baloon-up">コメント</div> |
そして、スタイルシートに以下のスタイルを記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.baloon-up{ margin-bottom:20px; margin-top:10px; padding:10px; border-radius:10px; position:relative; height:auto; width:100%; border: 1px solid #e6a117; background-color: #e6a117; color: #fff; } .baloon-up:before{ position: absolute; left: 10%; bottom: -40px; content:" "; border-top: 20px solid #e6a117; border-right: 10px solid transparent; border-bottom: 20px solid transparent; border-left: 10px solid transparent; } |
上向きの吹き出し
角丸ボックスに、ボーダーの下辺だけを見せた幅も高さも0のボックスを付けています。
白色の幅も高さも0のボックスをずらして重ねることで、吹き出し部分にボーダーがあるように見せています。
白色の幅も高さも0のボックスをずらして重ねることで、吹き出し部分にボーダーがあるように見せています。
このHTMLタグの「コメント」の部分に任意の文章を入れます。
|
1 |
<div class="baloon-down">コメント</div> |
そして、スタイルシートに以下のスタイルを記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.baloon-down{ margin-top: 20px; margin-bottom: 10px; padding:10px; border-radius:10px; position:relative; height:auto; width:100%; border: 1px solid #e6a117; } .baloon-down:before{ position: absolute; right: 10%; top: -40px; content:" "; border-bottom: 20px solid #e6a117; border-right: 10px solid transparent; border-top: 20px solid transparent; border-left: 10px solid transparent; } .baloon-down:after{ position: absolute; right: 10%; top: -38px; content:" "; border-bottom: 20px solid #fff; border-right: 10px solid transparent; border-top: 20px solid transparent; border-left: 10px solid transparent; } |
ジェネレータの紹介
必要事項を入力すると、吹き出しのCSSを出してくれる便利なジェネレーターもあります。CSSが良く分からない場合でも、これなら使えそうです😊
http://cssarrowplease.com/
