【コピペOK】簡単！LINEのような会話風吹き出しの作り方

ブログをはじめるとああしてみたいこうしてみたいなど色々な考えが浮かんでくるかと思います。

かくいう僕もブログをはじめかれこれ数年が経つのですが、ここにきて吹き出しがほしいと思うようになってきました。

色々なブログでよく目にするLINEっぽい会話風のやつですね。

でもやりたいなぁとは思ってもどうしたら良いのかわからないと。

ということでコピペで誰でも簡単にできる会話風吹き出しの作り方とその手順・やり方などのカスタマイズ方法をまとめていきたいと思います。

会話風吹き出しの完成形をみてみる

まず吹き出しの完成形をみてみましょう。

おなまえ

LINE風の吹き出しです。

連続で喋ると吹き出しのしっぽは付かない形になります。

HTMLとCSSでできます。

続けても、しっぽをつけたいときは間にbrと入力。

グループじゃないとき。

このようによくLINEとかにある吹き出しのような感じですね。

コピペでできるブログの吹き出し

ではここからは選んだ吹き出しのHTMLとCSSをコピーし、各ブログサービスに貼り付けていきます。

まずはCSSです。こちらを

wordpressであれば「カスタマイズ」→「追加CSS」のところにコピペしてください。

はてなブログであれば「デザイン」→「カスタマイズ」→「{}デザインCSS」のところにコピペしてください。

/*==============
LINE風フキダシ
===============*/
/*フレームとフォント*/
.kaiwa.line {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 10px 0;
background: #769ece;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Helvetica Neue", "Lucida Sans Unicode", "Arial";
font-size: 16px;
color: #333;
line-height: 1.4;
overflow: hidden;
}
/*フキダシ共通*/
.kaiwa.line .fukidasi {
position: relative;
display: inline-block;
max-width: 192px;
margin: 8px 0 0;
padding: 9px 14px;
border-radius: 19px;
overflow-wrap: break-word;
clear: both;
box-sizing: content-box;/*はてな用*/
}
/*フキダシ左*/
.kaiwa.line .fukidasi.left {
float: left;
margin-left: 62px;
background: white;
}
/*グループのときのフキダシ*/
.kaiwa.line .name + .fukidasi.left {
margin-top: 5px;
}
/*フキダシ右*/
.kaiwa.line .fukidasi.right {
float: right;
margin-right: 12px;
background: #7adc40;
}
/*相手の名前*/
.kaiwa.line .name {
clear: right;
margin-left: 62px;
color: white;
}
/*ユーザアイコン*/
.kaiwa.line .icon {
position: absolute;
width: 40px;
height: 40px;
left: -54px;
top: -2px;
border-radius: 20px;
}
/*グループのときのユーザアイコン*/
.kaiwa.line .name + .left .icon {
top: -1.8em;
}
/*しっぽ共通*/
.kaiwa.line .fukidasi::after {
position: absolute;
content: "";
width: 24px;
height: 36px;
top: -21px;
}
/*しっぽ左*/
.kaiwa.line .fukidasi.left:after {
left: -10px;
border-radius: 18px 0 6px 18px/18px 0 1px 18px;
box-shadow: -3px -15px 0 -5px white inset;
}
/*しっぽ右*/
.kaiwa.line .fukidasi.right::after {
right: -10px;
border-radius: 0 18px 18px 6px/0 18px 18px 1px;
box-shadow: inset 3px -15px 0 -5px #7adc40;
}
/*フキダシが続いてしっぽがないとき*/
.kaiwa.line .left + .left::after,
.kaiwa.line .right + .right::after {
content: none;
}

それぞれの吹き出しはCSSをいじくると多少大きさや丸み、色など変えることができますが、ひとまず今回はあくまでも簡単に手間なくできるという点を重視してこのまま進めます。

それが終わったら次はHTMLです。こちらを記事のHTML部分に貼り付けてください。その後反映するかプレビューで確認するとできているはずです。会話の内容は下のコード内にある日本語の部分を変えればできます。

<div class="kaiwa line">
    <div class="name">
        おなまえ
    </div>
    <div class="fukidasi left">
        <img class="icon" src="img/icon.png" alt="">LINE風です。
    </div>
    <div class="fukidasi left">
        続けて喋るとフキダシのしっぽはつきません。
    </div>
    <div class="fukidasi right">
        HTMLとCSSでできます。
    </div>
    <br><!-- 次のフキダシにしっぽをつけたいときはbrを挿入 -->
    <div class="fukidasi right">
        続けても、しっぽをつけたいときは間にbrを入れます。
    </div>
    <div class="fukidasi left">
        <img class="icon" src="img/icon.png" alt="">グループじゃないとき。
    </div>
</div>