はじめに
こんにちは、Rickyです。
今回は、そうあの憧れの会話風の吹き出しに手を出しましょう。
結論から言いますね。これ・・・・・・・コピペでできます。
もう一度言います。コピペで出来ます。
さらに言わせてもらうと私に会話風の吹き出しを一から作る技術はありません。
エッヘン！！！
ネットに情報があるんだから使わせてもらいましょう。
むしろ使わないと損しています。
もう有りがたく使わせて頂きましょう。
そして「ありがとうございました」を心の中で１０回唱えましょう。
ということで早速やっていきましょう。
もうワクワクが止まりません。
どっかのサイヤ人なら「おらワクワクするだ」って言っているでしょう。
では、さっそく・・・・・・Let`sTry
吹き出しを作ろう
1.アイコンの入手
さあ、アイコンを入手しましょう。
これはもうググってフリーのアイコンを適当に頂きましょう。
さっそく「アイコン フリー」でググりました。
おーいっぱいありますね。
今回はsample作成がメインなんで適当に一つ選びました。
2.CSSコードの入手
コピペで作っていくわけですからこちらもググりましょう。
はい、ありました。
今回のsample作成に使用するコードはこちらです。
〇HTMLのコード
<div class="balloon5">
<div class="faceicon">
<img～>
↑アイコン画像を入れます。
</div>
<dib class="chatting">
<div class="says">
<p>〇〇</p>
↑吹き出しの文字を入れます。
</div>
</div>
</div>
〇CSSのコード
.balloon5 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
.balloon5 .faceicon {
float: left;
margin-right: -90px;
width: 80px;
}
.balloon5 .faceicon img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}
.balloon5 .chatting {
width: 100%;
}
.says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}
.says:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #d7ebfe;
}
.says p {
margin: 0;
padding: 0;
}
いい感じでコピペが出来そうです。
早速sampleを作りましょう
3.sampleの作成
おらワクワクするだ
でででででで・・・・・できたーーーーーーーーー！！！
これは本当にうれしい。いや今までもうれしかったんですが今回のは特にうれしいです。
コピペの元を作成してくださったブロガーさんには感謝しかありません。
これで会話風にするブログも作成できるのでは。
夢が広がります。
まとめ
何回も言いますが今回は今まで一番うれしいし感動しています。
ブログ作成の幅が広がったといっても過言ではないでしょう。
そのくらい私にとってインパクトがありました。
こういう勉強って面白いですよね。
さあ、次は何しようかな。
それでは、失礼します。
