CSSだけで、喋っているような「ふきだし」レイアウトを作る方法をご紹介します。
横幅固定なら超簡単なんですが、レスポンシブ対応となると、少しだけ難しい！
アイコンは、もちろん画像なので、お好きな画像をアップロードして使ってくださいね。
アイコンの大きさは80px以上、正方形にするとキレイに表示されます。
border-radiusやらbox-shadowやら使っているので、IE8以下非対応となります。
HTMLの書き方
★で囲まれたところは、変更して使ってください。
右向き吹き出しの場合
★★ここにテキスト。★★
<!– /balloon-right –>
<!– /balloonbox –>
<!– /balloon –>
左向き吹き出しの場合
★★ここにテキスト。★★
<!– /balloon-right –>
<!– /balloonbox –>
<!– /balloon –>
CSSの書き方
[crayon-674025f16accd473991349/]
CSSでやっていること説明
CSSの構造に興味がある方だけ以下は読んでくださいね。
吹き出し部分はborderを使って三角形を作り、配置しています。
三角部分のボーダーは三角形を2個重ねて少しズラして表現しています。
アイコンは絶対位置で表示し、上のdivでマージンを取って表示させています。
ふきだしをもっと簡単に表示させたい！
WordPressでサイトを作っていて、ふきだしをもっと簡単に表示させたい！ という方は、「ふきだし会話をWordPressショートコード化して簡単に表示させる方法」を見てくださいねー。