【Cocoonカスタマイズ】吹き出し(フラット)をいじってみた【CSS】

こんばんは、りみ（@limi_log）です。

ブログの背景を、真っ白(#ffffff)から薄いグレー(#f4f5f7)に変えてみました！これぐらいのほうが、コントラスト強すぎなくて好みです。ですが…問題が発覚！Cocoonに標準で搭載されている吹き出し（フラット）は便利な上にとっても可愛いんですが、背景を変えると吹き出しが見えにくくなってしまったんです…。

元のままだと見づらくなってしまったので、背景を白くして、境界がわかりやすいように影をつけてみました。

実際にカスタマイズした吹き出しはこんな感じです！

今日は、このボクが使用したCSSコードと、カスタマイズのポイントについて簡単にご紹介します！

カスタマイズのポイント
1. “before”と”after”
2. “z-index”プロパティ
りみろぐ。で使っているCSSコード
さいごに

カスタマイズのポイント

今回、参考にさせていただいたのは、こちらのサイトです。

CSS影付き吹き出し位置12パターン - Qiita

影付き吹き出しの作り方を毎回調べている気がするのでメモっておく。内側にも要素を設ける方法概要一番無難な方法です。特に事情が無ければこれを選択してください。サイズゼロ要素のborderを太くする方法だと影つきの...

こちらで書かれていたコードを見ていて、ボクがポイントだなと思ったのは2つです。

“before”と”after”

サイトは、<タグ>中身</タグ>のような塊がいくつも並んでページを表示しているのですが、このHTMLタグの塊を要素と呼びます。タイトルにあるbeforeとafterは、実際にHTMLにはタグはないのですが、CSSで見かけ上の要素を作ることができるので、疑似要素と呼ばれています。

そして、beforeは元の要素の直前に要素を作り、afterは元の要素の直後に要素を作ってくれます。

この2つを使いこなすことができれば、HTMLはいじらないまま、サイトの見た目を大きく変化させることができます。HTMLがゴチャゴチャしていると、サイトの評価（スコア）も下がってしまうみたいなので、とても便利な機能です。

“z-index”プロパティ

z-indexはCSSのプロパティ（機能）の1つです。複数の要素が重なっている時に使うプロパティで、要素が重なる順番を指定することができます。CSSはタグ{プロパティ:値;}のように記述するのですが、z-indexでの値は次のように指定できます。

auto（初期値）
- 親の要素と同じ階層になります。指定しなければ、この数値になります。
整数で指定
- 重なりの順番を整数で指定します。数値が大きいほど、上（手前）に表示されます。

z-indexを利用することで、リボンをかけたみたいな表現などの重ねる表現を自由度が増すので、覚えておいて損はないプロパティの1つです。

りみろぐ。で使っているCSSコード

では、当ブログで実際に使用しているコードを紹介します。Cocoonを利用されている方は、コピペしてもらったら吹き出し（フラット）を真っ白背景と影付きに変えられると思います。

思ったよりコードが長くなっちゃったので、折りたたみました。下のボタンをクリックしてご確認ください。

コードを見る

/*吹き出し（フラット）*/
.sbs-flat .speech-balloon,
.sbs-flat .speech-balloon::before,
.sbs-flat .speech-balloon::after {
  background-color: #fff; /* 吹き出しの背景色を指定 */
}
.sbs-flat .speech-balloon {
  position: relative;
  border-color:#fff;/* 背景色と同じ色を指定 */
}
.sbp-r .speech-balloon {
  margin-right:30px;
}
.sbs-flat .speech-balloon::before,
.sbs-flat .speech-balloon::after {
  border:none;
}
.sbs-flat .speech-balloon,
.sbs-flat .speech-balloon::before {
  box-shadow: 0 0 10px 0 rgba(163,163,163,0.50);
}
.sbs-flat .speech-balloon::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 20px; height: 20px; /* 吹き出しサイズ */
  right: -10px; top: 10px; /* 位置 */
  transform: rotate(45deg) skew(-20deg,-20deg); /* 吹き出しの角度 */
}
.sbs-flat .speech-balloon::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.sbs-flat .speech-balloon>* {
  position: relative;
  z-index: 3;
}