4849885882_3c0ea5f820_z

ブログで会話を漫画の吹き出しみたいにしたいんですけど、どうしたらいいのかしら？
CSSを使えば簡単にできるよ！
え～！そうなんですか？
それは、ぜひ知りたいです。
まず、吹き出しのCSSは、こんな感じだね。
.fukidasi {
position: relative;
margin-top: 10px;
margin-left: 30px;
padding: 30px 20px;
width: 75%;
background-color: #f0f0f0;
border: none;
border-radius: 6px;
float: left;
}
.fukidasi::after {
position: absolute;
top: 20px;
left: -45px;
content: ”;
width: 0;
height: 0;
border: 20px solid transparent;
border-right: 25px solid #f0f0f0;
}
あらまあ！
結構コードの量が多いんですね。
吹き出しのためのコードが、一番多いね。
あとは、そんなことないよ。
キャラクターの画像を用意して、それを content で指定してあげるだけだよ。
まず、キャラクターをどう表示するかのCSSは、例えば、こんな感じかな？
.char-face {
position: relative;
margin-top: 10px;
float: left;
width: 15%;
border-radius: 50%;
clear: both;
}
ここでは、キャラクターの画像を丸く表示してるんですね。
そうそう。
四角く表示したいなら、border-radiusは、書かなくていいよね。
そして、キャラクターの画像をcontent で指定してあげる。
例えば、char01として、こう書いてみた。
.char01 {
content: url(画像のURL);
}
char02、03、04と登場人物や表情ごとに画像を変えるのもいいね。
これは、簡単ですね。
実際に、html で書くときには、どうすればいいんでしょう？
html ね。
例えば、キャラクター1の会話はこう書くんだよ。
<div class=”char-face char01″></div>
<div class=”fukidasi”>会話の内容</div>
あら！
こんなに簡単なんですね。
そうだね。
cssをしっかり書けば、html を書くときに楽になるよね。
会話形式のブログが、こんなに簡単に書けるのなら、いろいろ楽しいブログが書けそうです。
ありがとうございました。
css3になって、とても多くのことがcssで出来るようになっているからね。
会話形式のブログ、書いたら見せてね。
楽しみにしてるから。
はい、面白いものが書けそうなので、楽しみにしていて下さい。

 

今回のCSS、スマートフォンで見ると吹き出しがキャラクターの下に落ちてしまいます。

モバイル対応にするには、fukidasi クラスのpadding や width を調整してみて下さいね。

ちなみに、Wordpressのプラグイン「Speech Bubble」を使えば、同じようなことができます。

でも、こんなに簡単なcssでできてしまうので、わざわざプラグインを入れるほどでもないかな？と思います。

Amazonプライム会員なら無料で読めるビジネス書4選

上を目指すために読んでおきたい8冊

 

私が買ってよかったパソコン＆iPhone関連商品 トップ8