PR

マーカーを好きな色に変えるCSSカスタマイズ/cocoon備忘録

アイキャッチ画像
記事内に広告が含まれています。
スポンサーリンク
Kura
Kura

WordPress初心者のわたしが悩みながら調べながらカスタマイズしてきた「COCOON備忘録」です。同じく悩んでいる人にお役に立てれば幸いです。

この記事では、

マーカーやアンダーラインマーカーを
好きな色に変更する方法

を説明しています。

マーカー設定する画像
マーカーの選択画面
NAMI
NAMI

ブログのイメージに合わないという人にはおすすめですね。

初期設定では黄色赤色青色の3色ですが、

わたしはアンダーラインマーカーの黄色をベージュに、青色くすんだブルーに変更しています。

\\Let’s try!//
Kura
Kura

❶ 好きなカラーを決めて、

❷ cssコードのカラーを変更し、

❸ cssに追記していきましょう。

スポンサーリンク

好きな色を決める

好きな色のカラーコードを準備しましょう。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
Kura
Kura

カラーコードを調べたり、好きな色を探したりするときに使っています。

✔︎ 拡張カラーとして設定した色をつかうとブログの統一感がましてお洒落ですね。

拡張色の設定画像
ダッシュボード→cocoon設定→エディッター

CSSのカラーコードを変更する

#000000のカラーコードを変更したい色のカラーコードに変えます。

✔︎ 黄色マーカー

.marker {background-color: #b3f0aa; }

✔︎ 赤色マーカー

.marker-red {background-color: #f7d492; }

✔︎ 青色マーカー

.marker-blue {background-color: #b0e8e5; }

✔︎ 黄色アンダーラインマーカー

.marker-under {
background: linear-gradient(transparent 60%, #b3f0aa 60%);
}

✔︎ 赤色アンダーラインマーカー

.marker-under-red {
background: linear-gradient(transparent 60%, #f7d492 60%);
}

✔︎ 青色アンダーラインマーカー

.marker-under-blue {
background: linear-gradient(transparent 60%, #b0e8e5 60%);
}

CSSに追記するところ

❶ ダッシュボード → 外観 → カスタマイズ

CSS追記場所の説明画像
ダッシュボード→外観→カスタマイズ

❷ 追記CSS

Css追記場所の説明画像
追加CSS

❸ CSSコードを入力し「公開」にて反映させる。

CSSを貼り付ける場所の画像
CSSコードをペースト→公開

わたしが変更した黄色アンダーラインマーカー青色アンダーラインマーカーのCSSコード

.marker-under {
background: linear-gradient(transparent 60%, #dcd2c2 60%);
}
.marker-under-blue {
background: linear-gradient(transparent 60%, #cdd8d8 60%);
}

マーカー色が変更できたか確認するには?

新しいプレビューを開けてマーカー色が変わっているか確認してみてくださいね。

変更したのに変わらない画像
変更したのに変わらない?
新しいプレビューの開き方の説明画像
新しいプレビューを開く

安心してください。変わってます。

プレビューで見たマーカーの色の画像
変更したマーカー
Kura
Kura

こちらのマーカーを設置するところも変わりません。

マーカー設定する画像
マーカーの選択画面

まとめ

マーカーやアンダーラインマーカーの色を変更するCSSカスタマイズ方法でした。

「こんなイメージのブログにしたい」とデザインが浮かんでも、

WordPress初心者でしたので、再現するために

悩みながら調べながらここまで亀歩みでカスタマイズしてきました。

これからもそれは続いていくと思います。

そんな自分のために備忘録をかねて書いた記事でした。

この記事をかいた人
Kurage

41歳主婦
刺し子をはじめて数年、その奥深さに震えています。
海にそばに住んで、たゆたう月を眺めて12年。
刺し子のこと、のんびり暮らしを言葉に紡いだ、雑記ブログ

Kurageをフォローする
Cocoons備忘録
スポンサーリンク
Kurageをフォローする
海月-kurage blog-

コメント

タイトルとURLをコピーしました