アフィリエイト月収3千円から7桁目指して、実践、研究、成果報告します。WordPressカスタマイズもあるよ。

【レスポンシブ対応】CSSだけで、喋っているような「ふきだし」レイアウトを作る方法

更新日:

CSSだけで、喋っているような「ふきだし」レイアウトを作る方法をご紹介します。
横幅固定なら超簡単なんですが、レスポンシブ対応となると、少しだけ難しい!

 

アイコンは、もちろん画像なので、お好きな画像をアップロードして使ってくださいね。
アイコンの大きさは80px以上、正方形にするとキレイに表示されます。

border-radiusやらbox-shadowやら使っているので、IE8以下非対応となります。

HTMLの書き方

★で囲まれたところは、変更して使ってください。

右向き吹き出しの場合

 

 

 

★★ここにテキスト。★★

<!– /balloon-right –>

<!– /balloonbox –>

 

<!– /balloon –>

左向き吹き出しの場合

 

 

 

★★ここにテキスト。★★

<!– /balloon-right –>

<!– /balloonbox –>

 

<!– /balloon –>

CSSの書き方

[crayon-6606dadc4c689158491431/]

CSSでやっていること説明

CSSの構造に興味がある方だけ以下は読んでくださいね。

吹き出し部分はborderを使って三角形を作り、配置しています。
三角部分のボーダーは三角形を2個重ねて少しズラして表現しています。

アイコンは絶対位置で表示し、上のdivでマージンを取って表示させています。

ふきだしをもっと簡単に表示させたい!

WordPressでサイトを作っていて、ふきだしをもっと簡単に表示させたい! という方は、「ふきだし会話をWordPressショートコード化して簡単に表示させる方法」を見てくださいねー。

  • B!