【WordPress】Cocoonのマーカーの色を変更する方法

WordPress

Cocoonのマーカーの色は、黄色赤色青色の3色ですが、青色はあまり使わないから違う色にしたいとか、ブログのイメージに合わせてパステルカラーに変更したい、という場合があります。

そんな場合は、CSSを変更することで色の変更が可能です。


変更する色を決める

変更する色を決める方法は、ネットの色見本帳を見て決めるなど、いろいろありますが、ここではWindows付属の「ペイント」で指定する方法を紹介します。

(1)ペイントの「色の編集」をクリックします。

marker-1-01


(2)①基本色のどれかをクリックします。
   ②クリックし、好きな色を選択します。
   ③カラーコードをコピーします。

marker-1-02


変更する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を追加する方法は、以下のブログを参照してください。