ふきだし自動生成ツール（画像左）ブログなどにお使いください！

[no_toc]

確認
ふきだし作成フォーム
コード
1. htmlコード
2. CSSコード

確認

下のような「ふきだし」（画像を左に配置）を表示するコードを生成します！
＞＞画像右配置はこちらから！

つきのひと

アイウエオあいうえお！

ふきだし作成フォーム

コード

wordpressのテキスト編集モードなど、htmlを扱うことのできるところにコピペして使ってください！

htmlコード

  
<div class="div_conversation_">
 <div class="conversation_img_">
  <img src="http://luuluuul.com/wp-content/uploads/2017/10/twitter%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E8%83%8C%E6%99%AF%E7%99%BD.jpg" /><br/>
  <p>つきのひと</p>
 </div>
 <div class="fbox_" id="conversation_text_">アイウエオあいうえお！</div>
</div>

コピペして使ってください！スタイルシートの貼り付け先はご自身の設定をご確認ください！

CSSコード


.fbox_ {
    position: relative;
    right:-3%;
    display:inline-block;
    padding:10px ;
    text-align:left;
    background-color:#eee;
    border:6px solid #eee;
    margin: 5px 6px 5px 5px;
    border-radius: 7px ;
    box-shadow:0px 0px 14px 0px  #ffffff ;
    width:75%;
}
.fbox_:after, .fbox_:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
}
.fbox_:after {
    top: 15px;
    right: -30px;
    border: 12px solid transparent;
    border-left: 17px solid #eee;
}
.div_conversation_{
}
.conversation_img_{
 margin:0px;
 float:right;
 width:20%;
 text-align:center;
 font-size:12pt;
}
.conversation_img_ img{
  margin:0px;
}