Cocoonのマーカーの色は、黄色、赤色、青色の3色ですが、青色はあまり使わないから違う色にしたいとか、ブログのイメージに合わせてパステルカラーに変更したい、という場合があります。
そんな場合は、CSSを変更することで色の変更が可能です。
変更する色を決める
変更する色を決める方法は、ネットの色見本帳を見て決めるなど、いろいろありますが、ここではWindows付属の「ペイント」で指定する方法を紹介します。
(1)ペイントの「色の編集」をクリックします。
(2)①基本色のどれかをクリックします。
②クリックし、好きな色を選択します。
③カラーコードをコピーします。
変更するCSSを作成する
下記CSSのカラーコードを好きな色に変更します。
/** マーカーの色 **/
.marker { /*黄色マーカー*/
background-color: #FFEB3B;
}
.marker-red { /*赤色マーカー*/
background-color: #F3989B;
}
.marker-blue { /*青色マーカー*/
background-color: #64B5FF;
}
.marker-under { /*黄色アンダーラインマーカー*/
background: linear-gradient(transparent 60%, #FFEB3B 60%);
}
.marker-under-red { /*赤色アンダーラインマーカー*/
background: linear-gradient(transparent 60%, #F3989B 60%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
background: linear-gradient(transparent 60%, #64B5FF 60%);
}
CSSを追加する
上記CSSを追加する方法は、以下のブログを参照してください。