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の吹き出しはグループじゃない場合名前が表示されないので不思議な位置にしっぽが向いてるんですね。
どこから喋ってんねん!
修正履歴
修正前のコード(抜粋)
.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>
画像作成にあたり圧縮・変換に使用したツール
- Cocoonのデフォルトスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れた場合は追加したコードを削除してください。
- 表示確認はWindows/Chrome, Firefox, Edge、iPhone8/Safariで行っています。
- CSSが反映されない場合は以下のページをご確認ください。
WordPressテーマ設定(CSS等含む)を変更しても反映されない場合のトラブルシューティング方法 | Cocoon
CSSが効かない・反映されないときの対処法まとめ - 不具合を発見しましたらお手数ですが該当記事のコメント欄へご連絡おねがいします(返信にはお時間をいただく場合があります)