Cocoonの吹き出しをもっとLINE風にするCSS

Cocoonには簡単に自作の吹き出しを作成して利用出来る機能が備わっています。
その中にのようなLINE風の吹き出しがあります。

カスタマイズ前は

このような吹き出しが作れます。

今回は、CocoonのLINE風吹き出しをさらに本家風にカスタマイズするCSSです。

冷静な男

ここまで再現する必要性をあまり感じませんが…

草村

（それな）

草村

小ネタ的なCSSですが
せっかくなので紹介します！

この記事の目次

【コピペでOK】吹き出しをもっとLINE風にするCSS
コードをカスタマイズする
あとがき
1. 修正履歴

【コピペでOK】吹き出しをもっとLINE風にするCSS

次のコードを子テーマのstyle.cssに追加するだけです。
今回はコードがものすごく長いです！

/* 吹き出しをもっとLINE風にする<<ここから>> */
.sbs-line {
    background: #7392c0;
    margin: 1em 0;
    padding: 10px 5px;
    position:relative;
    flex-direction: column;
    align-items: flex-start;
}
.sbs-line+.sbs-line {
    margin-top: -1em;
    padding-top: 0;
}
.sbs-line .speech-person {
    width: auto;
    min-width: auto;
}
.sbs-line .speech-icon {
    width: 50px;
    max-width: 50px;
    position: absolute;
    left: 5px;
}
.sbs-line .speech-icon img {
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: none;
}
.sbs-line .speech-name {
    color: #fff;
    font-weight bold;
    text-align: left;
    margin: 0 0 .2em;
    position: relative;
    z-index: 1;
}
.sbs-line .speech-balloon {
    max-width: 20em;
    color: #222;
    line-height: 1.5;
    border: none;
    border-radius: 25px;
    padding: .5em 1em;
}
.sbs-line.sbp-r .speech-balloon {
    margin: 0 5px 0 0;
}
.sbs-line.sbp-l .speech-balloon {
    margin: 0 0 0 5px;
}
.sbs-line.sbp-r .speech-balloon:before,
.sbs-line.sbp-l .speech-balloon:before {
    content: '';
    display: block;
    width:18px; height:35px;
    background: none;
    border: none;
    top: -20px;
}
.sbs-line.sbp-r .speech-balloon:before {
    box-shadow:inset 3px -15px 0 -5px #85e249;
    border-radius: 0 40px 40px 0;
    right: -8px;
}
.sbs-line.sbp-l .speech-balloon:before {
    box-shadow:inset -3px -15px 0 -5px #fff;
    border-radius: 40px 0 0 40px;
    left: -8px;
}
.sbs-line.sbp-l {
    min-height: 70px;
    padding-right: 10px;
    padding-left: 63px;
}
.sbs-line.sbp-r {
    padding-left: 10px;
    align-items: flex-end;
}
.sbs-line.sbp-r .speech-person {
    flex-direction: row-reverse;
}
.sbs-line.sbp-r .speech-icon,
.sbs-line.sbp-r .speech-name {
    display: none;
}
.sbs-line .speech-balloon:after {
    content: none;
}
/* 吹き出しをもっとLINE風にする<<ここまで>> */

表示サンプル

こちらが表示サンプルです。ちょっと本家っぽくなりましたか？

なっているといいな～

目次に戻る

コードをカスタマイズする

人物位置(右)の表示を変更する

「人物位置(右)」は強制的に画像と名前が非表示なります。
人物画像を表示したい場合は以下のコードを追加します。

/* 人物位置:右で画像を表示 */
.sbs-line.sbp-r {
    min-height: 70px;
}
.sbs-line.sbp-r .speech-icon {
    display: block;
    right: 5px; left: auto;
}
.sbs-line.sbp-r {
    padding-right: 63px;
}

名前を表示する場合は以下のコードを追加。

/* 人物位置:右で名前を表示 */
.sbs-line.sbp-r .speech-name {
    display: block;
}

表示サンプル

草村

名前を表示

草村

人物画像を表示

草村

両方追加すれば人物画像と名前どちらも表示できます

全体の横幅を変更する

横幅を変更したい場合は以下のコードを追加します。
480pxの部分を変更する事で幅を調整できます。

/* 横幅を狭くする */
.sbs-line {
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
}

表示サンプル

スマホサイズっぽく横幅を狭くしてみましょう

margin-**:auto;は中央寄せ用の記述ですよ

指定した幅より狭いデバイスで表示している場合、変化はありません

吹き出しの横幅を変更する

吹き出しの横幅を変更したい場合は.sbs-line .speech-balloon{}内のmax-width: 20em;の値を変更する事で幅を調整できます。

.sbs-line .speech-balloon {
    max-width: none;
}

表示サンプル

吹き出しの横幅を最大値まで伸ばしました。なが～～いテキストは吹き出しが端まで伸びていきます。

ほぉ

それっぽいヘッダーを付けてみる

以下のコードを追加するとヘッダーをつけられます。

/* LINE風吹き出しにヘッダーをつける */
.sbs-line:before {
    content: 'LINE';
    color: #fff;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    width: 100%;
    padding: .5em 0;
    background: #263047;
    position: absolute;
    top: 0; left: 0;
    display: block;
}
.sbs-line {
    padding-top: calc(2em + 10px);
}
.sbs-line+.sbs-line:before {
    content: none;
}

表示サンプル

ヘッダーっぽい物が付きました

連続してLINE風吹き出しがあっても先頭だけにヘッダーが付きます

連続してない場合は…

それぞれの先頭にヘッダーが付きます

目次に戻る

あとがき

以上、風吹き出しをもっとLINE風にするCSSでした。

よくよく見るとLINEの吹き出しはグループじゃない場合名前が表示されないので不思議な位置にしっぽが向いてるんですね。

どこから喋ってんねん！

修正履歴

2019-05-27: 人物画像の影が出ないように変更

2019-03-03: 画像を使用しないコードに変更しました。

修正前のコード(抜粋)

.mngs-line .sbs-line.sbp-r .speech-balloon:before,
.mngs-line .sbs-line.sbp-l .speech-balloon:before {
    width: 18px;
    height: 18px;
    background: top left/100% 100% no-repeat;
    border: none;
    border-radius: 0;
    top: 0;
}
.mngs-line .sbs-line.sbp-r .speech-balloon:before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNi4yMjMiIGhlaWdodD0iMjIuMDMiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjODVFMjQ5IiBkPSJNMjYgLjAzYy45NjkuMzgxLTEuMjY0IDguNDgxLTYgMTMtNS45MDIgNS42MzItMTQgOS0xNCA5bC02LTE1czExLjk3Ny40MDkgMTgtMmM2LjA0Mi0yLjQxNyA3LjA4OS01LjM1OCA4LTV6Ii8+PC9zdmc+');
    right: -8px;
}
.mngs-line .sbs-line.sbp-l .speech-balloon:before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNi4yMjMiIGhlaWdodD0iMjIuMDMiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGIiBkPSJNOC4yMjMgNS4wM2M2LjAyMyAyLjQwOSAxOCAyIDE4IDJsLTYgMTVzLTguMDk4LTMuMzY4LTE0LTlDMS40ODcgOC41MTEtLjc0Ni40MTEuMjIzLjAzYy45MS0uMzU4IDEuOTU4IDIuNTgzIDggNXoiLz48L3N2Zz4=');
    left: -8px;
}

余談: base64エンコードをしていましたが、パーセントエンコードの方が軽量でした。

.mngs-line .sbs-line.sbp-r .speech-balloon:before {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26.223' height='22.03'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%2385E249' d='M26 .03c.969.381-1.264 8.481-6 13-5.902 5.632-14 9-14 9l-6-15s11.977.409 18-2c6.042-2.417 7.089-5.358 8-5z'/%3E%3C/svg%3E");
}
.mngs-line .sbs-line.sbp-l .speech-balloon:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26.223' height='22.03'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M8.223 5.03c6.023 2.409 18 2 18 2l-6 15s-8.098-3.368-14-9C1.487 8.511-.746.411.223.03c.91-.358 1.958 2.583 8 5z'/%3E%3C/svg%3E");
}

SVGをCSSのbackground-imageで使えるようにエンコードするツール | SimoSimo

吹き出ししっぽに使用していた画像

SVGファイルをbase64エンコードして文字列化しています。
※WordPressでは現状SVGファイルはアップロード不可になっています。

こんな画像を使用しています。

SVGファイルの中身

<svg xmlns="http://www.w3.org/2000/svg" width="26.223" height="22.03"><path fill-rule="evenodd" clip-rule="evenodd" fill="#85E249" d="M26 .03c.969.381-1.264 8.481-6 13-5.902 5.632-14 9-14 9l-6-15s11.977.409 18-2c6.042-2.417 7.089-5.358 8-5z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="26.223" height="22.03"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M8.223 5.03c6.023 2.409 18 2 18 2l-6 15s-8.098-3.368-14-9C1.487 8.511-.746.411.223.03c.91-.358 1.958 2.583 8 5z"/></svg>

画像作成にあたり圧縮・変換に使用したツール

当ブログに掲載されているCSSについて

Cocoonのデフォルトスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れた場合は追加したコードを削除してください。
表示確認はWindows/Chrome, Firefox, Edge、iPhone8/Safariで行っています。
CSSが反映されない場合は以下のページをご確認ください。
WordPressテーマ設定（CSS等含む）を変更しても反映されない場合のトラブルシューティング方法 | Cocoon
CSSが効かない・反映されないときの対処法まとめ
不具合を発見しましたらお手数ですが該当記事のコメント欄へご連絡おねがいします（返信にはお時間をいただく場合があります）

目次に戻る