はてなブログでLINE風の会話形式の吹き出しを使ってみた！

どうも、ヨリミチです。
今回はLINE風の吹き出しに挑戦してみました。
皆さんもぜひ楽しいんでやってみてください。

参考サイト

基本はこちらのコードをいじっただけです。 www.notitle-weblog.com

www.tawashix.com

バックアップ

CSSの知識ゼロで直感でいじったのでブログのバックアップ必須です。

サブブログが余っているなら新規に作ってそこで試すのもいいよ

CSSコード

一番下の「クラス名」「画像のURL」は書き換えて、デザインCSSにコピペ

/* LINE風吹き出し　*/
.entry-content .me-line,
.entry-content .you-line {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 12px;
    border-radius: 16px;
    z-index: 1;
}
.entry-content .me-line {
    background-color: #abf18c;
    margin: 20px 20% 40px 0;
}
.entry-content .you-line {
    border: 2px solid #999;
    background-color: #fff;
    margin: 20px 0 40px 19%;
}
.entry-content .me-line::before,
.entry-content .you-line::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    z-index: 2;
}
.entry-content .me-line::before {
    border-right: 2px solid #abf18c;
    border-bottom: 2px solid #abf18c;
    background-color: #abf18c;
    right: -7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.entry-content .you-line::before {
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    background-color: #fff;
    left: -7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.entry-content .me-line::after,
.entry-content .you-line::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -10px;
    border-radius: 40px;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.entry-content .me-line::after {
    right: -110px;
}
.entry-content .you-line::after {
    left: -110px;
}
@media screen and (max-width: 620px) {
    .entry-content .me-line,
    .entry-content .you-line {
        width: 70%
    }
    .entry-content .me-line {
        margin-right: 30%;
    }
    .entry-content .you-line {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .me-line::after,
    .entry-content .you-line::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .me-line::after {
        right: -84px;
    }
    .entry-content .you-line::after {
        left: -84px;
    }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

例

.kumatan::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/W/WalkingYorimichi/20180815/20180815100720.jpg
);}
.kumami::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/W/WalkingYorimichi/20180815/20180815100727.jpg
);}

LILNE風に会話してみる

記事の編集モードは「Markdown」でした方が楽です。

<p class="me-line kumatan">どう？</p>
<p class ="you-line kumami">なにこれ？</p>

どう？

なにこれ？

吹き出しだよ

やるやん

以上です。