Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions/short_code.php on line 36
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions/short_code.php on line 36
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions/short_code.php on line 36
CSSだけで作れる「吹き出し」をご紹介します！
会話風のものやワンポイントで使えるものなど、コピペしてお使いください。
コポペするだけでこんな感じに作れるよ！横幅の小さいスマホでみても端までくればテキストが折り返されて表示されるレスポンシブ仕様になってるから安心！
目次
基本の吹き出し
基本となる下向き中央の吹き出しです。
上向き中央の吹き出しです。
左向き中央の吹き出しです。
右向き中央の吹き出しです。
下向きの三角の位置を左側にしました。一番最初の基本となる吹き出しのleft:50%を5%にしただけです。
border-radiusを追加して角を丸くしました。
枠線
枠線だけの吹き出しです。
角を丸くしたい場合は.balloon{}の中にborder-radius:◯◯px;と追加してください。
影が濃く背景あり
影の濃い吹き出しです。
枠線（下のみ）
下だけの吹き出しです。横の表示サイズを80%にしてあります。横幅いっぱいにしたい場合は100%にしてください。
ジェネレーターで簡単！
会話風
左からの会話風の吹き出しです。
右からの会話風の吹き出しです。
HTMLにある画像URLに画像を入れるとこんな感じになります！
反対の場合は背景の色が設定されてます。背景の色が必要ない場合はCSSにある「background-color:#ebffe7;」を削除してください。
ワンポイント利用に最適！丸形
「左斜め下」にある丸い形の吹き出しです。
「左」にある丸い形の吹き出しです。
「左斜め上」にある丸い形の吹き出しです。
「上」にある丸い形の吹き出しです。
「右斜め上」にある丸い形の吹き出しです。
「右」にある丸い形の吹き出しです。
「右斜め下」にある丸い形の吹き出しです。
「下」にある丸い形の吹き出しです。
心の声や考え事
心の声や考え事の時に使えそうな吹き出しです。
心の声や考え事の時に使えそうな吹き出しです。
おしゃれな吹き出しです。
最後に
いかがでしたか？CSSの疑似要素であるbeforeとafterを使うといろいろなことができるようになりますね。
他にもコピペして使えるものを用意したので参考程度に引き続き見ていってください。
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions.php on line 584
よそのコピペではうまくいかなくて前々から滞っていた吹き出しができるようになりそうでうれしいです！
1つ質問ですが、こちらで会話風吹き出しを作ると、キャラの顔がみゆさんのように円いっぱいになりません。
トリミングしているつもりですが、円の下の方に偏ってしまいます。
なにか改善策があればお教えいただけると幸いです。
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions.php on line 584
しるみんさん、コメントありがとうございます。
＞円の下の方に偏ってしまいます
という事ですが、以下2点程お試し下さい。
1）画像サイズが大きすぎではないでしょうか。250px x 250px以内のものを入れてみるとどうなるでしょうか。
2）画像に隙間はないでしょうか。トリミングもしているとのことですが、頭の上に隙間があるとその部分も表示されてしまいます。髪の毛上ぎりぎりにトリミングをし、なるべく隙間なく表示させたい画像を入れてみるとどうなるでしょうか。
どのような状況か把握しきれず、あいまいな回答で申し訳ありません。
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions.php on line 584
みゆ様
こちらこそコメントありがとうございました！
隙間はなかったのですが、ご指摘の通り、画像のサイズに問題がありました。
250×250に変更し、満足いく結果が得られました。
CSSの勉強もしつつ、色々手を加えていきたいです。
この度はありがとうございました。
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions.php on line 584
みゆさま 初めまして。
吹き出しCSSで検索中にこちらが表示されて、ご訪問致しました。可愛い吹き出しの数々に思わずニヤニヤ。
早速アメブロの記事挿入画面へコピペで貼ってみました。丸い画像付きの吹き出しを貼りました。他者様とのコメントやり取りなども参考にしながら挿入しましたところ、丸い画像の外側に四角が表示されていました。この四角を削除するには何か方法がありますでしょうか。教えて頂けると幸いです。どうぞよろしくお願いいたします。
Warning: Trying to access array offset on false in /home/mamafu/miyu-info.com/public_html/wp-content/themes/miyu/functions.php on line 584
kuromi2さん、コメントありがとうございます。
「丸い画像付きの吹き出し」というのは、会話風の中で紹介しているものでしょうか。
丸い画像の外側に四角が表示される原因を調べましたが同じ状況を再現できませんでした。
JPEG画像やPNG画像、サイズが違う画像などでやってみたんですができませんでした。
jsFiddleというものを使用してますので、まずは下記のURL（会話風＞左からの会話風の吹き出し＞Edit in JSFiddleです）の「画像URL」に何でもいいので画像URLを入れてみるとどうなるでしょうか。
基本的にここで表示されたものをそのままコピペすれば同じものを表示できるはずなんですが。
https://jsfiddle.net/jnt958ku/13/
またお返事いただけると嬉しいです。