【Cocoonのマーカー】規定の色から変更する3行CSS:カスタマイズ

Cocoonカスタマイズ。マーカー色を変更するアイキャッチ ワードプレス

Cocoonのマーカーを、好きな色にカスタマイズする方法をご紹介します。

Cocoonマーカーの既定の色

Cocoonマーカーの既定の色である「黄色マーカー」の色を変更してみたいと思います。

「投稿の編集」画面から、スタイル → マーカー → 黄色マーカー にて、
マーカーを引いたときの色の部分です。


 
 

「黄色マーカー」の実際の色は、下図になります。

「スタイル」メニューから、「黄色マーカー」をクリックした際に、
黄色ではなく、ピンクのマーカーが付くように変更してみたいと思います。

 

CSSカスタマイズ方法

CSSのスタイルシートに以下のコードを追加します。

.marker {
background: linear-gradient(transparent 0%, #FFDDFF 0%);
}

 

マーカーの色を変更できた

「スタイル」メニューから、「黄色マーカー」をクリックした際に、
ピンク色のマーカーを引きことができました。

「黄色マーカー」をクリックしたのに、ピンクマーカーになるので、
変な感じがするかもしれませんが、ワードプレスを使う自分がわかっていればOKと思っています。

 

ちなみに「テキスト」タブの画面だと、赤枠の「黄色マーカー」をクリックすると、
ピンク色のマーカーを引くことができます。

 

【Cocoonトップページ】背景色をたった3行のCSSでカスタマイズする
...
【Cocoonエントリーカード】フォントをたった3行のCSSで変更する
...