吹き出しで遊んでみる！

●左だけ使う●

★やってみたらできた！

 

今回も来てくださってありがとうございます。

 

今回は二回目になる「吹き出し」のやり方です。前回はコードを書かないやり方でした。二回目はコードを使ったらどうなるのかを書こうと思います。

 

　 　 　

●選ばれなかったチョコケーキ

darucoro

 

※サンダーバード2号さんの沢山のケーキの中から1つを描きました。 

 

 

先ずはCSSを記述する所ですが....。

フッター・ヘッダーなどどこに記述しても良いみたいです。

僕は記事上・記事下に記述してます。

 

●CSS

※吹き出しで検索したら沢山出て来ます。

/*左向き三角*/

<style>

.balloon2-left {

  position: relative;

  display: inline-block;

  margin: 1.5em 0 1.5em 15px;

  padding: 7px 10px;

  min-width: 120px;

  max-width: 100%;

  color: #555;

  font-size: 16px;

  background: #FFF;

  border: solid 3px #555;

  box-sizing: border-box;

}

.balloon2-left:before {

  content: "";

  position: absolute;

  top: 50%;

  left: -24px;

  margin-top: -12px;

  border: 12px solid transparent;

  border-right: 12px solid #FFF;

  z-index: 2;

}

.balloon2-left:after {

  content: "";

  position: absolute;

  top: 50%;

  left: -30px;

  margin-top: -14px;

  border: 14px solid transparent;

  border-right: 14px solid #555;

  z-index: 1;

}

.balloon2-left p {

  margin: 0;

  padding: 0;

}

</style>

注：はてなCSSは<style>・</style>で囲まないと上手く行きません。

●HTML

※HTML編集にして記述するのはこんな感じです。

CSSが入力されていれば、ちょっとした記述で会話形式が作れます。

<div class="balloon2-left">こんな感じです</div>

●実際にはこうなります！

こんな感じです

 

※この吹き出しだけで対談形式は出来るかな？

●左だけで会話出来る？

こんにちワン！少し話さない？

いいよぉ～

 

 

 

 

●実際のコードはかんな感じです！

 

<p><img src="好きな画像1 align="left" /></p>

<div class="balloon2-left">こんにちワン！少し話さない？</div>

</div>

<p> </p>

<p><img src="好きな画像2 align="left" hspace="50" /></p>

<div class="balloon2-left">いいよぉ～</div>

 

 ※align="left" →「絵」の左に言葉を回り込ませる

※hspace="50"→「絵」の左右にスペースを作る

 

 色んなやり方が有ると思います！

試してみたら、思わぬ方法が見つかるかもしれません。

 

 

まだまだ

 

 

●よくわかって無いです！

 

 〇お知らせ！〇  

 

試行錯誤してHTML/CSSやってます。

間違いなども有ると思いますがご容赦頂ければ幸いです。

◎頑張ります◎

 

 

また来てくれる日を
楽しみにしています。

 

ワードプレス記事もよろしくお願いします。QRコードがHPの入り口です！

QRコードをタップ 

 

☆D-BLOG☆