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

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

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

カスタマイズ前は

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

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

冷静な男

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

草村

(それな)

草村

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

スポンサーリンク

【コピペで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の吹き出しはグループじゃない場合名前が表示されないので不思議な位置にしっぽが向いてるんですね。

実際のLINE画面吹き出し部分のスクリーンショット

どこから喋ってんねん!

修正履歴

 修正前のコード(抜粋)

.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ファイルを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について

コメント

タイトルとURLをコピーしました