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

[no_toc]

確認

下のような「ふきだし」(画像を左に配置)を表示するコードを生成します!
>>画像右配置はこちらから!
つきのひと

アイウエオあいうえお!



ふきだし作成フォーム

名前:画像:セリフ:

コード

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;
}

このブログがお役に立てて、もしも「応援したい!」と思って頂けた時のために、「Amazonほしいものリスト」を公開しています 。