「吹き出しの会話形式」でブログを表示をする方法　(Google「Blogger」の場合)

2021年10月3日 14:56

現在、昨年Facebookに投稿した「地図アート」関連の記事をnoteにまとめていますが、当研究所顧問の千葉先生からコメントを会話形式にしたら見やすいのでは？とのご提案があり、試しています。最初はnoteで表示しようかと思ったのですが、レイアウト機能がシンプルなので会話形式では表示できない模様。

Google「blogger」ならレイアウトの機能が豊富なので、試してみたところ、それっぽいのが出来ました。吹出しとかアイコンのデザインはもう少し変更したいですね。。。

●完成形のイメージ

●実際のブログ
（プレビュー、おためしです。外から見れるか分かりませんが）

●左の会話用HTMLの説明

<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('画像のURL');">
</div>
<div class="talk-left">
ここに左の会話を書く
<b>[名前] <b/><br>
[内容] <br>
[日付] <br>
</div>
</div>
<div class="talk-end"><br>
ここに画像のタグを書く
</div>

●右の会話用のHTMLの説明

<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('画像のURL');">
</div>
<div class="talk-right">
ここに右の会話を書く
<b>[名前] <b/><br>
[内容] <br>
[日付] <br>
</div>
</div>
<div class="talk-end"><br>
ここに画像のタグを書く
</div>

●HTML(コピペお試し用)


<!--右の会話-->
<div class="talk-wrap">
 <div class="right-icon" style="background-image: url('https://1.bp.blogspot.com/-vl2v9cYOR0c/YVks2-er6WI/AAAAAAAAABI/AkQ5PtygJr0A_1XKPQqN78InLqSw8lNQgCLcBGAsYHQ/s320/chibasensei-icon.jpg');"> </div>
 <div class="talk-right"> <b>千葉 達朗</b><br /> 地理院地図　DEMも世界中含まれていたんですね<br /> 2020年7月23日　8:31<br /> </div>
</div>
<div class="talk-end"> </div>
<!--左の会話-->
<div class="talk-wrap">
 <div class="left-icon" style="background-image: url('https://1.bp.blogspot.com/-l8kn_Y07AP0/YVks09RC3MI/AAAAAAAAABE/6jTd0KET1XglrP4Eo_pcdU7Cf9-4OIM2wCLcBGAsYHQ/s320/yamada-icon.jpg');"> </div>
 <div class="talk-left"> <b>やまだ こーじ</b><br /> そうなんですよね。海外は国内とはスケール感が違い、ダイナミックな面白さがありますよね。今回の色の設定は、先日教えていただいた光反射率「R=sin^2 δ」の計算式をもとに、カラーコードを算出しました。こんな感じです。輝度が少し一致しないので、更に改良してます。<br /> 2020年7月23日　9:55<br> </div>
</div>
<div class="talk-end"> <br />
 <div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-umeno5UNNY8/YVkrKMC9lMI/AAAAAAAAAA8/QF99UFYNrQk7AyaX1LL90vsGBewq2UPeACLcBGAsYHQ/s1254/200722_%25E5%25B9%25B2%25E6%25B8%2589%25E8%2589%25B2%25E8%25A8%2588%25E7%25AE%2597%25E3%2582%25B7%25E3%2583%25BC%25E3%2583%2588.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="852" data-original-width="1254" height="217" src="https://1.bp.blogspot.com/-umeno5UNNY8/YVkrKMC9lMI/AAAAAAAAAA8/QF99UFYNrQk7AyaX1LL90vsGBewq2UPeACLcBGAsYHQ/s320/200722_%25E5%25B9%25B2%25E6%25B8%2589%25E8%2589%25B2%25E8%25A8%2588%25E7%25AE%2597%25E3%2582%25B7%25E3%2583%25BC%25E3%2583%2588.jpg" width="320" /></a> </div>
</div>

●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: 180%;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa;
border: 3px solid #fff;
margin-bottom: 10px;
}
.talk-left{
float:right;
position: relative;
background: #fff;
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 70%;
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: 180%;
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa;
border: 3px solid #FFF;
margin-bottom: 10px;
}
.talk-right{
float:left;
position: relative;
background: #fff;
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 70%;
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ここまで*****/
/*--------------------------------------*/

●CSSの追加方法はこちら

●吹き出しのCSSについて参考にしたサイト

●HTMLの整形ツール（bloggerのHTMLを整形するのによい）

ぜひ、お試しください～！！

P.S.元記事をたどって行ったら、こちらの記事を見つけました。

https://akiueo.hatenablog.com/entry/css-fukidashi-design-conversation-201411

吹き出しが割とシンプルでいいかも。。

この記事が気に入ったらサポートをしてみませんか？

「吹き出しの会話形式」でブログを表示をする方法 (Google「Blogger」の場合)

「吹き出しの会話形式」でブログを表示をする方法　(Google「Blogger」の場合)