【cocoonデザイン①】マーカーを好きな色に変更する方法｜使用する色を指定し、ブログに統一感を！

伝えたいこと

今回は、ブログで使用するマーカーの色を変更していこうと思います。　マーカーで使用する色も自身で設定し、より統一感のあるブログを目指します！

ちなみに、変更前はこんな感じです。

ちなみに、文字全部を覆うマーカーを「マーカー」といい、下半分を覆うマーカーを「アンダーラインマーカー」と言います。　今回は、両方とも変更していきます。

「外観」→「カスタマイズ」

「追加 CSS」をクリック

写真の部分に以下のプログラムを打ち込む → 「公開」で変更を保存。
プログラムは次節にあります。コピーして、そのまま貼り付けてください。

以下のプログラムを「追加 CSS」の項目に書き込むことで、マーカーの色を変更することができます。

赤色マーカーのプログラムにある、「#eb4463」というところが色を表しています。ここを自分の好きな色に変更してください。ちなみに、色の決め方はこちらを参考にしてみてください！

/* 赤色マーカーの色を変更するプログラム */
.marker-red {background-color: #eb4463; }

/* 青色マーカーの色を変更するプログラム */
.marker-blue {background-color: #9febe5; }

/* 赤色アンダーマーカーの色を変更するプログラム */
.marker-under-red {
background: linear-gradient(transparent 60%, #eb4463 60%);
}

/* 青色アンダーマーカーの色を変更するプログラム */
.marker-under-blue {
background: linear-gradient(transparent 60%, #9febe5 60%);
}

この記事を書いている、2024/06 現在、このプログラムでマーカーの色を変えることができました！

「投稿」→「投稿一覧」→「表示」というアイコン →「新しいタブでプレビュー」でマーカーの色を確認してみてください。意図通りに変更できたことが確認できていると思います。

変更前

変更後