【Cocoonカスタマイズ】白抜きボックスの枠の色を変える方法

コクーンカスタマイズ

2019.06.05 2019.05.07

Cocoon（コクーン）のエディタのスタイルの中にある「ボックス（白抜き）」は、背景が白で非常にシンプルなボックスなので、様々な場面で使えて便利です。

そんな便利なボックスなのですが、もう少しブログのメインカラーと合わせたかったので、色を変えてみました。

Cocoonのボックス（白抜き）の色のCSS

デフォルトでは、コクーンの白抜きボックスは６色揃っています。

CSSはこちら。

.blank-box.bb-blue {border-color: #b5cdff;}　/*青色*/

.blank-box.bb-red{ border-color: #ff9999; } /*赤色*/

.blank-box.bb-yellow{ border-color: #ffff8e; }/*黄色*/

.blank-box.bb-green{ border-color: #adffd6; }/*緑色*/

.blank-box{ border-width: 2px; border-color: #a9a9a9; }/*灰色*/

上のCSSは、デフォルトよりもパステルな色合いとなっております。

これ以外の色を使いたい場合は、自分の好きな色のカラーコードに貼り変えて、利用して下さい。