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

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>

 

自分の好みの画像を選択する

吹き出しを作る上で欠かせないのが「アイコン」です。もちろんフリー画像を使用している人も一部いるようですが、それだとせっかく手塩にかけて作っているブログが勿体無いので、僕はココナラでブログのアイコンなどを出品されている「いんちょーさん」という方に作ってもらいました。

この方に決めた理由はこんな感じ(下記画像)でアイコンの種類が豊富だったので。今後ブログを書いていると多分色々な用途で使えるものがないと、後々困るだろうな〜と思いこちらにしました!

ココナラ-吹き出しサンプル

いんちょーさんに描いてもらったアイコン達

 

そしてその画像を先程のコピペコードの「img/icon.png」と描いてある場所へペースト。ブログを反映してみると…

 

お茶飲みくん
簡単にできたね!
ゆっくりお茶休憩〜
でしょ?

迷ったらまたこのブログを見てみてね!
元気くん
自信が湧いてきた!

 

できました!簡単ですね。

 

また、もっと吹き出しのバリエーションを増やしたい!や色・形を変えたいという方は別途記事にしたいと思いますので、そちらをご覧ください。

 

それでは楽しいブログライフを〜

1 COMMENT

フナムシ

はじめまして。
大変参考になりました。

右側の吹き出し横にもアイコンを付けたいと思っているのですが、どのようにすればよいでしょうか?
ご教示いただけますと幸いです。

よろしくお願いいたします。

返信する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /home/marukantest/doronkoasobi.xyz/public_html/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048