ブログでふきだしを使って会話形式にしている表現を見たことがあるかと思います。
これ、なんとBloggerでもできます！
※別のBloggerブログでの例
本記事ではふきだしのCSSの作成方法と、その使用方法について解説します。
ふきだし（会話文）のCSS追加方法
先ず、ふきだしのデザインをCSSで行います。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
ふきだし（会話文）CSS
CSSは以下のブログを参考にさせて頂きました。
参考ブログ様
OHAMAstyle【誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS】
火消しに行って油を注ぐ【Bloggerで使える「吹き出し」で会話形式の記事を書く方法】
CSSのデザインを少しだけいじって、実際に別のBloggerブログで試した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: 100%;
background-position: center;
float:left;
display:inline-block;
margin-bottom: 10px;
margin-left: 10px;
}
.talk-left{
float:right;
position: relative;
background: #F4C7C3; /*背景色*/
padding: 3%;
border-radius: 10px;
width: 80%; /*ふきだし横幅*/
margin-top:10px;
margin-bottom: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
position: absolute;
left: -20px;
top: 30%; /*ふきだし位置*/
margin-top: -9px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #F4C7C3; /*背景色*/
position: absolute;
left: -16px;
top: 30%; /*ふきだし位置*/
margin-top: -8px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 100%;
background-position: center;
float:right;
display:inline-block;
margin-bottom: 10px;
margin-right: 10px;
}
.talk-right{
float:left;
position: relative;
background: #F4C7C3; /*背景色*/
padding: 3%;
border-radius: 10px;
width: 80%; /*ふきだし横幅*/
margin-top:10px;
margin-bottom:10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
position: absolute;
right: -20px;
top: 30%; /*ふきだし位置*/
margin-top: -9px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #F4C7C3; /*背景色*/
position: absolute;
right: -16px;
top: 30%; /*ふきだし位置*/
margin-top: -8px;
}
.talk-end{
clear:both;
}
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 70%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 70%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 70%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 70%;
}
}
ふきだし（会話文）の作成方法
基本のCSSが追加できたら、呼び出しコードを使って記事本文で使用できます。
左のふきだしコード
<div class="talk-wrap"><div class="left-icon" style="background-image: url('画像のURL');"></div><div class="talk-left">左ふきだし入力</div></div><div class="talk-end"></div>
右のふきだしコード
<div class="talk-wrap"><div class="right-icon" style="background-image: url('画像のURL');"></div><div class="talk-right">右ふきだし入力</div></div><div class="talk-end">
</div>
ただ、都度アイコン画像の設定などを行なう必要があります。
アイコン画像の設定などを簡略化するため、個別ページでふきだし用のページをつくる方法を解説したいと思います。
ふきだし（会話文）ページの作成方法
個別ページの作成方法が分からない場合、個別ページ（固定ページ）の作成方法で解説しているのでそちらでご確認ください。
今回作成する個別ページは公開にせず非公開のままでOKです。
ふきだし用のページを作成したら、タイトル下の一番左のアイコンで【HTMLビュー】に切り替えて、先程のふきだしコードを貼り付けます。
<div class="talk-wrap"><div class="left-icon" style="background-image: url('画像のURL');"></div><div class="talk-left">左ふきだし入力</div></div><div class="talk-end"></div>
<p><br /></p>
<div class="talk-wrap"><div class="right-icon" style="background-image: url('画像のURL');"></div><div class="talk-right">右ふきだし入力</div></div><div class="talk-end">
</div>
その後【HTMLビュー】から【作成ビュー】に切り替え、同じページでアイコンに使用したい画像をアップロードします。
アップロードした画像を右クリックし、【画像リンクをコピー】で画像リンクをコピーします。
再び【HTMLビュー】に切り替え、コードの「画像のURL」の文字をドラッグし、右クリックして【貼り付け】で画像リンクを貼り付けます。
以上を左右のふきだし２か所で行ってください。
終わったら、プレビューで確認してみましょう。
ふきだし（会話文）使用方法
記事の投稿で【HTMLビュー】に切り替えて、上記でつくったコードをコピーして貼り付けて使用します。
「右ふきだし入力」「左ふきだし入力」の部分に文章を入力して使ってください。
冒頭で使用したこちらの画像での例です。
この場合の記事本文は……
<div class="talk-wrap"><div class="left-icon" style="background-image: url('画像のURL');"></div><div class="talk-left">知ってる？<br />Bloggerでもこんなふきだしを使うことができるんだよ！</div></div><div class="talk-end"></div>
<p><br /></p>
<div class="talk-wrap"><div class="right-icon" style="background-image: url('画像のURL');"></div><div class="talk-right">本当に？<br />すごいね！<br />どうやってやるのか教えて！！</div></div><div class="talk-end"></div>
……と、このようになっています。（画像のURLは省略しています。）
改行は<br />で可能です。
ふきだし（会話文）を使う際には、作成したふきだし用のページからコピーして使うようにすれば、使い勝手が良いと思います。
Bloggerでもふきだしが使える！
少し手間はありますが、Bloggerでも工夫すればふきだし（会話文）が使えます。
当ブログでは使用機会がないと思ったので別ブログで試したのですが、そちらでは今後使ってみたいと思っています。
Bloggerに慣れてきたら、ふきだしなど色々と試してみてくださいね！
追記（2025/6/10）
別ブログでは現在、感情を込めた文章にポイント的にふきだしを使うようになりました。
それに伴い、吹き出しのデザインを枠線有りの灰色系にしました。
また、スマホやタブレットでデザインが崩れないよう微調整を行っています。
（別ブログのテーマはQooQです。テーマによっては調整が必要です。）
以下に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: 100%;
background-position: center;
float:left;
display:inline-block;
margin-bottom: 10px;
margin-left: 10px;
}
.talk-left{
float:right;
position: relative;
background: #eee; /*背景色*/
padding: 3%;
border-radius: 10px;
width: 75%; /*ふきだし横幅*/
border: 2px solid #ddd; /*枠線*/
margin-top:10px;
margin-bottom: 10px;
margin-right: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #ddd; /*枠線*/
position: absolute;
left: -20px;
top: 50%; /*ふきだし位置*/
margin-top: -9px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #eee; /*背景色*/
position: absolute;
left: -16px;
top: 50%; /*ふきだし位置*/
margin-top: -8px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 100%;
background-position: center;
float:right;
display:inline-block;
margin-bottom: 10px;
margin-right: 5px;
}
.talk-right{
float:left;
position: relative;
background: #eee; /*背景色*/
border: 2px solid #ddd; /*枠線*/
padding: 3%;
border-radius: 10px;
width: 75%; /*ふきだし横幅*/
margin-top:10px;
margin-bottom:10px;
margin-left: 10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #ddd; /*枠線*/
position: absolute;
right: -20px;
top: 50%; /*ふきだし位置*/
margin-top: -9px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #eee; /*背景色*/
position: absolute;
right: -16px;
top: 50%; /*ふきだし位置*/
margin-top: -8px;
}
.talk-end{
clear:both;
}
@media screen and (max-width: 768px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 70%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 70%;
}
}
@media screen and (max-width: 480px){
.left-icon{
width: 70px;
height: 70px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 70px;
height: 70px;
}
.talk-right{
width: 65%;
}
}
