Bloggerで会話形式の吹き出しを表示させる方法

Blogger
Bloggerで会話形式の吹き出しを表示させたい!!

まつさん
スタイルシートとHTMLの記述で可能ですよ

上の例のようにBloggerでも吹き出しを会話形式で表示させることは可能です。今回は下記の記事を参考にさせていただきました。

HTML

<!--右の会話-->
<div class="talk-wrap">
 <div class="right-icon" style="background-image: url('画像URL');"> </div>
 <div class="talk-right"> <b>Blogger</b><br />Bloggerで会話形式の吹き出しを表示させたい!!</div>
</div>
<div class="talk-end"> </div>
<!--左の会話-->
<div class="talk-wrap">
 <div class="left-icon" style="background-image: url('画像URL');"> </div>
 <div class="talk-left"><b>まつさん</b><br />スタイルシートとHTMLの記述で可能ですよ</div>
</div>
<div class="talk-end"> 
</div>
  

画像は正方形のものを用意するとよいかと思います。元記事のCSSをそのまま適用するとアイコン部分の拡大率が高いので正方形の画像でフィットするように加筆・修正しています。

CSS

/*--------------------------------------*/
/*****会話のCSSここから*****/
.talk-wrap{
display: block;
clear: both;
margin:0 auto 3px auto;
}
.talk-wrap p{
margin:0;
}
.left-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: cover;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa;
border: 3px solid #fff;
margin-bottom: 10px;
overflow: hidden;}
.talk-left{
float:right;
position: relative;
background: #fff;
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 80%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa;
margin-bottom: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #666;
position: absolute;
left: -20px;
top: 25%;
margin-top: -9px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fff;
position: absolute;
left: -16px;
top: 25%;
margin-top: -8px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: cover;
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa;
border: 3px solid #FFF;
margin-bottom: 10px;
overflow: hidden; 
}
.talk-right{
float:left;
position: relative;
background: #fff;
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 80%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa;
margin-bottom:10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #666;
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #fff;
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px;
}
.talk-end{
clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 65%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 65%;
}
}
/*****会話のCSSここまで*****/
/*--------------------------------------*/
  

吹き出しの幅を変更したい場合には .talk-left .talk-right の width: 80%; の箇所で調整してみてください。