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

アフィリエイト研究所「アフィけん」

Webデザイン

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

更新日:

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

 

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

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

HTMLの書き方

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

右向き吹き出しの場合

 

 

 

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

<!– /balloon-right –>

<!– /balloonbox –>

 

人物アイコン

<!– /balloon –>

左向き吹き出しの場合

 

 

 

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

<!– /balloon-right –>

<!– /balloonbox –>

 

人物アイコン

<!– /balloon –>

CSSの書き方

CSSでやっていること説明

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

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

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

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

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

-Webデザイン
-, , ,

Copyright© アフィリエイト研究所「アフィけん」 , 2019 All Rights Reserved.