【Cocoon】吹き出し（フラット）の色を変える（コピペ可）

Cocoonの吹き出し機能って便利ですね！

自作の吹き出しを作成して利用する方法

サイト訪問者にわかりやすく表示できる吹き出し機能の利用方法です。アイコンのセリフのように表示させることで、訪問者に分かりやすく説明できるかもしれません。

早速、リンデンバウムのブログでも使ってみました。

Nozomi

キャラットでアイコンも作っちゃったよ♪

でも、「フラット」デザインだと、背景色と吹き出し色の明度が近くてなんか見にくい……
↓こんな感じ

Cocoonは「白」をメインにしたテーマだから、デフォのままだと気にならない仕様なのでしょう。要するに(メインカラム)背景色を変えたオイラが悪いだ。

なので、吹き出し（フラット）の色を変えることにしました。

基本の吹き出し色変え用CSS
他にもCocoonカスタマイズしてみた

基本の吹き出し色変え用CSS

子テーマのスタイルシート(style.css)に、以下を追加。

/*吹き出し フラット（色変更）*/
 .sbs-flat .speech-balloon{
    background-color: #好きな色;
    border-color: #好きな色;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #好きな色;
      border-left-color: #好きな色;
}

↑こんなかんじで、背景色（background-color）だけ変えて遊ぶこともできます。（しかしそれはもう「フラット」ではないという…）

ピンク（コピペ可）

/*吹き出し フラット（ピンク）*/
 .sbs-flat .speech-balloon{
    background-color: #ffccee;
    border-color: #ffccee;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #ffccee;
      border-left-color: #ffccee;
}

スカイブルー（コピペ可）

/*吹き出し フラット（スカイブルー）*/
 .sbs-flat .speech-balloon{
    background-color: #cce6ff;
    border-color: #cce6ff;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #cce6ff;
      border-left-color: #cce6ff;
}

クリーム（コピペ可）

/*吹き出し フラット（クリーム色）*/
 .sbs-flat .speech-balloon{
    background-color: #fff4b3;
    border-color: #fff4b3;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #fff4b3;
      border-left-color: #fff4b3;
}

ダークグレイ（コピペ可）

背景が濃色なので、文字色は白にしてあります。

/*吹き出し フラット（ダークグレイ）*/
 .sbs-flat .speech-balloon{
    background-color: #696969;
    border-color: #696969;
    color: #fff;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #696969;
      border-left-color: #696969;
}

ダークグリーン（コピペ可）

背景が濃色なので、文字色は白にしてあります。

/*吹き出し フラット（ダークグリーン）*/
 .sbs-flat .speech-balloon{
    background-color: #004d00;
    border-color: #004d00;
    color: #fff;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #004d00;
      border-left-color: #004d00;
}

他の色にしたい場合

何色を使えばいいのか迷う場合は、今使用しているスキンの色から取ってみてください。統一感が出てよいですよ。帯締の色に迷ったら、着物か帯から一色取るのと同じです。

スキンで何の色（16進数でのカラーコード）を使っているか知りたい場合は、親テーマ→skins→スキン名→style.css (skins/スキン名/style.css)に書いてあります。

いろんな色を並べて考えてみたい場合は、下のサイトが便利ですよ～。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

ちなみに、元々どこで吹き出しのスタイルを指定しているかというと
親テーマ→scss→speech-balloon.scss (scss/speech-balloon.scss)です。
このファイルを参考にすれば、他の吹き出しのスタイルもいじれると思います。

ただ、scssと書かれているだけあってscssなので、そのまま子テーマのスタイルシートにコピペでポンと済ませようとすると
「何入れ子にしてんじゃこのクソが！！」(Expected RBRACE!!)
って怒られてブルブルするはめになります。全部がそうとは限りませんが、css方式の記述に直す必要があるでしょう。

はーCocoonいじりたのし～。