2019-02-05Cocoonには簡単に自作の吹き出しを作成して利用出来る機能が備わっています。ようなLINE風の吹き出しがあります。カスタマイズ前はこのような吹き出しが作れます。今回は、CocoonのLINE風吹き出しをさらに本家風にカスタマイズするCSSです。【コピペでOK】吹き出しをもっとLINE風にするCSSコードをカスタマイズする人物位置(右)の表示を変更する全体の横幅を変更する吹き出しの横幅を変更するそれっぽいヘッダーを付けてみるあとがき修正履歴スポンサーリンク【コピペでOK】吹き出しをもっとLINE風にするCSS次のコードを子テーマのstyle.cssに追加するだけです。*/表示サンプルこちらが表示サンプルです。本家っぽくなりましたか?なっているといいな~目次に戻るコードをカスタマイズする人物位置(右)の表示を変更する「人物位置(右)」は強制的に画像と名前が非表示なります。人物画像を表示したい場合は以下のコードを追加します。63px;}名前を表示する場合は以下のコードを追加。すれば人物画像と名前どちらも表示できます全体の横幅を変更する横幅を変更したい場合は以下のコードを追加します。480pxの部分を変更する事で幅を調整できます。20em;の値を変更する事で幅を調整できます。none;}表示サンプル吹き出しの横幅を最大値まで伸ばしました。なが~~いテキストは吹き出しが端まで伸びていきます。ほぉそれっぽいヘッダーを付けてみる以下のコードを追加するとヘッダーをつけられます。none;}表示サンプルヘッダーっぽい物が付きました連続してLINE風吹き出しがあっても先頭だけにヘッダーが付きます連続してない場合は...それぞれの先頭にヘッダーが付きます目次に戻るあとがき以上、風吹き出しをもっとLINE風にするCSSでした。見るとLINEの吹き出しはグループじゃない場合名前が表示されないので不思議な位置にしっぽが向いてるんですね。画像を使用しないコードに変更しました。base64エンコードをしていましたが、パーセントエンコードの方が軽量でした。SimoSimo吹き出ししっぽに使用していた画像SVGファイルをbase64エンコードして文字列化しています。※WordPressでは現状SVGファイルはアップロード不可になっています。こんな画像を使用しています。(画像を簡単に変換)当ブログに掲載されているCSSについてCocoonのデフォルトスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れた場合は追加したコードを削除してください。Edge、iPhone8/Safariで行っています。CSSが反映されない場合は以下のページをご確認ください。