虎狛星

節約4割と投資3割と起業3割

スポンサードリンク

はてなブログでLINEっぽい吹き出しを表示させる方法

今までブログの記事を手で書いてたんですけど、めんどくさくなっちゃって、今音声入力で記事を書いているこはくです。
なかなかいいですよ。
音声も結構拾ってくれるますし。ちょっと推敲する時間が必要ですが。
今回ははてなブログでLINEっぽい吹き出しを表示させる方法について書きます。
LINEみたいな吹き出しとはなんぞやと言いますとですね、

こんなんですよ。

ちゃんと表示されてます?

実はプレビューには表示されないんですよね。
悲しい…。

注意事項

もちろん、こんなのいらねえよ!という方はカスタマイズしなくて大丈夫です(笑)。
カスタマイズしてみよーかなと思った人には注意事項があります。
必ず、PCとスマホで表示されるか確認して下さい。
あと、

カスタマイズは自己責任で行ってください。

何かトラブルが起きても責任は負いかねます。

免責事項ってやつです。

https://www.mile-monk.work/entry/credit/cic

ライン風のCSS

以下のCSSコードをはてなブログのダッシュボードにある右側のバーからデザインを選択して、デザインCSSと言う場所に貼り付けると、準備が完了します。

一番下のデザインCSSってやつです。

/* 吹き出し */
.自分の名前::after {background-image:url(画像のURL);}
.相手の名前::after {background-image:url(画像のURL);}
.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;
    }
}

https://www.mile-monk.work/entry/amc/entry

表示方法

えー表示方法がですね、下のタグを使っていただければ、LINEの対話形式が表示されると思います。
僕ははてな記法を使ってるんですけど、他の記法で表示されるかはわかりません。
個人的にはずっとはてな記法を使っているのではてな記法が1番オススメです。

<p class="me-line kohaku">おにく?</p>
<p class ="you-line buta">?</p>

おにく?

うぇいうぇい

参考サイト

こちらのサイトのコードを参考にさせていただき、少しいじりました。

www.tawashix.com
www.notitle-weblog.com

追記。最近、この本を買った。CSSのトグルメニューの作り方や、グリッドデザインなど、参考になる部分がとても多くと良い本だった。HTMLやCSSでもっとカスタマイズしたい人におすすめ。

HTML5&CSS3ステップアップブック

HTML5&CSS3ステップアップブック

まとめ

反映されなかったらその時はごめんなさいです。
あとで、「反映しなかったぞふざけんな」とか言わないでください。
ガラスのハートなんで傷ついちゃう…。
あと、カラーコードは下記サイトなどを参考にしてください。
色を変えるのに便利です。
www.colordic.org

スポンサードリンク