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

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

キャラットでアイコンも作っちゃったよ♪
でも、「フラット」デザインだと、背景色と吹き出し色の明度が近くてなんか見にくい……
↓こんな感じ
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)に書いてあります。
いろんな色を並べて考えてみたい場合は、下のサイトが便利ですよ~。

ちなみに、元々どこで吹き出しのスタイルを指定しているかというと
親テーマ→scss→speech-balloon.scss (scss/speech-balloon.scss)です。
このファイルを参考にすれば、他の吹き出しのスタイルもいじれると思います。
ただ、scssと書かれているだけあってscssなので、そのまま子テーマのスタイルシートにコピペでポンと済ませようとすると
「何入れ子にしてんじゃこのクソが!!」(Expected RBRACE!!)
って怒られてブルブルするはめになります。全部がそうとは限りませんが、css方式の記述に直す必要があるでしょう。
はーCocoonいじりたのし~。
他にもCocoonカスタマイズしてみた

