【LION MEDIA】　ＬＩＮＥE風の吹き出しを活用することで、記事の分かり易さ向上を実現

【LION MEDIA】　カスタマイズ応用編（LINE風吹き出し設定）、見栄えも分かりやすさも向上！

記事を投稿していくと、説明をする上で吹き出しを使用したいくなる場面があります。更に、会話を吹き出しにしたくなるときもあり、LINE風の吹き出しが出来れば！？と思うときがありますよね。そんな方にオススメです。

LINE MEDIAでも簡単に単純な吹き出しからLINE風の吹き出しまで作成することが可能です。LINE MEDIAの標準のCSS設定には、吹き出しは組み込まれておりませんので、CSS定義を追加することで対応します。

単純な吹き出し

単純な吹き出し設定ですが、LION MEDIAの標準のCSSには組み込みされておりませんので、CSSにデザインを追加する必要があります。CSSに追加する定義と、実際に画面（HTML）側で定義する内容を以下に記載しますので、コピーして活用してください。

以下の吹き出しを例として内容を記載します。

僕もお母さんに何かプレゼントするワン！お母さんに喜んで欲しいワン！

CSSの定義

.balloon5 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}
.balloon5 .faceicon {
    float: left;
    margin-right: -90px;
    width: 80px;
}
.balloon5 .faceicon img{
    width: 100%;
    height: auto;
    border-radius: 30%;
}
.balloon5 .chatting {
    width: 100%;
}
.says {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #ffeef1;
}
.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #ffeef1;
}
.says p {
    margin: 0;
    padding: 0;
}

HTMLの定義

<div class="balloon5">
    <div class="faceicon">
        <img class="alignnone wp-image-1061" src="https://rpa-affiliate.com/wp-content/uploads/2018/04/20180406_icon.jpg" alt="" width="200" height="144" />
    </div>
    <div class="chatting">
        <div class="says">
            <span style="color: #0000ff;"><strong>僕もお母さんに何かプレゼントする<span style="color: #ff0000;">ワン！</span>お母さんに喜んで欲しい<span style="color: #ff0000;">ワン！</span></strong></span>
        </div>
    </div>
</div>

LINE風の吹き出し設定

LINE風な吹き出し設定ですが、LION MEDIAの標準のCSSには組み込みされておりませんので、CSSにデザインを追加する必要があります。CSSに追加する定義と、実際に画面（HTML）側で定義する内容を以下に記載しますので、コピーして活用してください。

以下のLINE風の吹き出しを例として内容を記載します。

fan

YouTuberになろうと思ったきっかけはなんですか

桐崎えいじとかタケヤキみたいなユーチューバーを知って漏れもやりたいって思ってはじめました。

CSSの定義

.balloon {
    margin: 40px 0;
    padding : 0 40px;
    position: relative;
}
.balloon:after,.balloon:before {
    clear: both;
    content: "";
    display: block;
}
.balloon-image-left {
    position: absolute;
    left: 0;
    margin: 0;
    width: 60px;
    height: 60px;
}
.balloon-image-right {
    position: absolute;
    right: 0;
    margin: 0;
    width: 60px;
    height: 60px;
}
.balloon figure img {
    width: 100%;
    height: 100%;
    border-radius: 30%;
    margin: 0;
}
.balloon-image-description {
    padding: 5px 0 0;
    font-size: 10px;
    text-align: center;
}
.balloon-text-right {
    position: relative;
    margin-left: 40px;
    padding: 10px;
    border: 1px solid #ffeef1;
    border-radius: 10px;
    float: left;
    max-width: 100%;
    background: #ffeef1;
}
.balloon-text-left {
    position: relative;
    margin-right: 40px;
    padding: 10px;
    border: 1px solid #32cd32;
    border-radius: 10px;
    float: right;
    max-width: 100%;
    background: #32cd32;
}
.balloon p {
    margin: 0 0 20px;
}
.balloon p:last-child {
    margin-bottom: 0;
}
/* 会話 */
.balloon-text-right:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #ffeef1;
    top: 15px;
    left: -20px;
}
.balloon-text-right:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #ffeef1;
    top: 15px;
    left: -19px;
}
.balloon-text-left:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #32cd32;
    top: 15px;
    right: -20px;
}
.balloon-text-left:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #32cd32;
    top: 15px;
    right: -19px;
}
/* 考え毎 */
.think .balloon-text-right,.think .balloon-text-left {
    border-radius: 30px;
}
.think .balloon-text-right:before {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 15px;
    left: -12px;
}
.think .balloon-text-right:after {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: 20px;
    left: -19px;
}
.think .balloon-text-left:before {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 15px;
    right: -12px;
}
.think .balloon-text-left:after {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: 20px;
    right: -19px;
}

HTMLの定義

<div class="balloon">
    <figure class="balloon-image-left">
        <img class="" src="https://rpa-affiliate.com/wp-content/uploads/2018/04/20180416_eda_06.png" alt="" width="149" height="107" /><figcaption class="balloon-image-description"></figcaption>fan
    </figure>
    <div class="balloon-text-right">YouTuberになろうと思ったきっかけはなんですか</div>
    </div>
    <div class="balloon">
        <figure class="balloon-image-right"><img class="" src="https://rpa-affiliate.com/wp-content/uploads/2018/04/20180414_eda_02.jpg" alt="" width="200" height="150" />
        </figure>
    <div class="balloon-text-left"><span style="color: #ffffff;">桐崎えいじとかタケヤキみたいなユーチューバーを知って漏れもやりたいって思ってはじめました。</span>
    </div>
</div>