Cocoonで使えるおしゃれなマーカーのカスタマイズ＋デザインアイディア

Cocoonマーカーカスタマイズカスタマイズ
この記事は約13分で読めます。

本記事では、Cocoonで使えるマーカーのカスタマイズ方法を紹介します。

ブログ本文中でマーカーを使うと、どこが大切か一目でわかって便利です。

ビジュアルエディタ＋CSSコピペだけでも出来る簡単なカスタマイズから、HTMLを使ってマーカーの種類を増やす方法まで紹介します。

デフォルトのデザインとコード

Cocoonのマーカーは、デフォルトのデザインはこのようになっています。

  • 黄色マーカー
  • 黄色アンダーラインマーカー
  • 赤色マーカー
  • 赤色アンダーラインマーカー
  • 青色マーカー
  • 青色アンダーラインマーカー

各マーカーのコード

各マーカーのコードはこのようになっています。

/* 黄色 */
.marker {
    background-color: #ff9;
}
/* 黄色アンダー */
.marker-under {
    background: linear-gradient(transparent 60%, #ff9 60%);
}
/* 赤色 */
.marker-red {
    background-color: #ffd0d1;
}
/* 赤色アンダー */
.marker-under-red {
    background: linear-gradient(transparent 60%, #ffd0d1 60%);
}
/* 青色 */
.marker-blue {
    background-color: #a8dafb;
}
/* 青色アンダー */
.marker-under-blue {
    background: linear-gradient(transparent 60%, #a8dafb 60%);
}

クラス名は「red」「blue」などですが、実際に色を指定しているのは「#」で始まるカラーコードの部分なので、そこを変えることでマーカーの色を変えることも出来ます。

カラーコードについてより詳しく知りたい方は、あわせて以下の記事もお読みください。

【RGB・16進数】違いを知って使いこなそう！カラーコードの仕組みを徹底解説！ | メープルの国のアリス
「16進数カラーコード 」「RGB値」の仕組みを理解するコーナーです。 「16進数とRGBの違いを知りたい」「RGBAって何」「16進数・RGBを相互変換したい」 そんな疑問に答...
yuhostyles.com

かんたんカスタマイズ

まずはコピペだけでできる簡単なカスタマイズを紹介します。

かんたんカスタマイズの手順

手順と言っても、必要なコードをカスタマイザーの「追加CSS」にコピペするだけです。

追加CSS
「追加CSS」の場所

色の変更

カラーコード（#で始まる3桁または6桁の英数字）の部分を好きな色に変えて追加CSSにコピペするだけで、カスタマイズしたものがブロックエディタで使えるようになります。

色はお好きな色に変更して使ってみてください。

マーカー色変更
マーカー色変更

.marker {
    background-color: #e9f782;
}

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

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

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

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

文字の周りを白くして読みやすく

box-shadowで白い影をつけると、文字が読みやすくなります。

文字の周りを白く
/* 黄色 */
.marker {
    background-color: #ff9;
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
/* 黄色アンダー */
.marker-under {
    background: linear-gradient(transparent 60%, #ff9 60%);
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
/* 赤色 */
.marker-red {
    background-color: #ffd0d1;
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
/* 赤色アンダー */
.marker-under-red {
    background: linear-gradient(transparent 60%, #ffd0d1 60%);
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
/* 青色 */
.marker-blue {
    background-color: #a8dafb;
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}
/* 青色アンダー */
.marker-under-blue {
    background: linear-gradient(transparent 60%, #a8dafb 60%);
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
}

HTMLを使ったカスタマイズ

HTMLを使うと、カスタマイズの幅が広がります。

最初は分かりにくいかもしれませんが、すぐに慣れると思うのでぜひ使ってみてください。

HTMLを使ったカスタマイズの手順

下のCSS、HTMLをそれぞれコピペします。

CSSは他のカスタマイズと同様「追加CSS」にコピペします。

その他に、記事の投稿時にHTMLコードを「カスタムHTML」にコピペします。

カスタムHTML
カスタムHTML

ストライプのマーカー

黄色マーカー
赤色マーカー
青色マーカー
ピンク色マーカー
オレンジ色マーカー
ミント色マーカー
スミレ色マーカー
<span class="stripe-yellow">黄色マーカー</span>
<span class="stripe-red">赤色マーカー</span>
<span class="stripe-blue">青色マーカー</span>
<span class="stripe-pink">ピンクマーカー</span>
<span class="stripe-orange">オレンジマーカー</span>
<span class="stripe-mint">ミントマーカー</span>
<span class="stripe-violet">スミレ色マーカー</span>
/* 全体用 */
[class^=stripe-] {
    background-size: 100% .4em;
    padding-bottom: .9em;
    background-position: 0 center;
    background-repeat: no-repeat;
}
/* 黄色 */
.stripe-yellow {
    background-image: repeating-linear-gradient(
-45deg
,#fff352,#fff352 2px,transparent 2px,transparent 4px);
}
/* 赤色 */
.stripe-red {
  background-image: repeating-linear-gradient(
-45deg
,#ea618e,#ea618e 2px,transparent 2px,transparent 4px);
}
/* 青色 */
.stripe-blue {
    background-image: repeating-linear-gradient(-45deg, #7fbfff,#7fbfff 2px,transparent 2px,transparent 4px);
}
/* ピンク */
.stripe-pink {
    background-image: repeating-linear-gradient(-45deg, #f5b2b2,#f5b2b2 2px,transparent 2px,transparent 4px);
}
/* オレンジ */
.stripe-orange {
  background-image: repeating-linear-gradient(-45deg, #ffbf7f,#ffbf7f 2px,transparent 2px,transparent 4px);
}
/* ミント */
.stripe-mint {
    background-image: repeating-linear-gradient(-45deg, #95e5e2,#95e5e2 2px,transparent 2px,transparent 4px);
}
/* スミレ */
.stripe-violet {
    background-image: repeating-linear-gradient(-45deg, #d1a8f9,#d1a8f9 2px,transparent 2px,transparent 4px);
}

細いストライプのマーカー

黄色マーカー
赤色マーカー
青色マーカー
ピンクマーカー
オレンジマーカー
ミントマーカー
スミレマーカー
<span class="stripe-thin-yellow">黄色マーカー</span>
<span class="stripe-thin-red">赤色マーカー</span>
<span class="stripe-thin-blue">青色マーカー</span>
<span class="stripe-thin-pink">ピンクマーカー</span>
<span class="stripe-thin-orange">オレンジマーカー</span>
<span class="stripe-thin-mint">ミントマーカー</span>
<span class="stripe-thin-violet">スミレマーカー</span>
/* 全体用 */
[class^=stripe-thin-] {
    background-size: 100% .4em;
    padding-bottom: .9em;
    background-position: 0 center;
    background-repeat: no-repeat;
}
/* 黄色 */
.stripe-thin-yellow {
    background-image: repeating-linear-gradient(-45deg, #fff352,#fff352 1px,transparent 1px,transparent 2px);
}
/* 赤色 */
.stripe-thin-red {
  background-image: repeating-linear-gradient(-45deg, #ea618e,#ea618e 1px,transparent 1px,transparent 2px);
}
/* 青色 */
.stripe-thin-blue {
    background-image: repeating-linear-gradient(-45deg, #7fbfff,#7fbfff 1px,transparent 1px,transparent 2px);
}
/* ピンク */
.stripe-thin-pink {
    background-image: repeating-linear-gradient(-45deg, #f5b2b2,#f5b2b2 1px,transparent 1px,transparent 2px);
}
/* オレンジ */
.stripe-thin-orange {
  background-image: repeating-linear-gradient(-45deg, #ffbf7f,#ffbf7f 1px,transparent 1px,transparent 2px);
}
/* ミント */
.stripe-thin-mint {
    background-image: repeating-linear-gradient(-45deg, #95e5e2,#95e5e2 1px,transparent 1px,transparent 2px);
}
/* スミレ */
.stripe-thin-violet {
    background-image: repeating-linear-gradient(-45deg, #d1a8f9,#d1a8f9 1px,transparent 1px,transparent 2px);
}

ふわっとぼかしマーカー

黄色マーカー
赤色マーカー
青色マーカー
ピンク色マーカー
オレンジ色マーカー
ミント色マーカー
スミレ色マーカー
<span class="glow-yellow">黄色マーカー</span>
<span class="glow-red">赤色マーカー</span>
<span class="glow-blue">青色マーカー</span>
<span class="glow-pink">ピンク色マーカー</span>
<span class="glow-orange">オレンジ色マーカー</span>
<span class="glow-mint">ミント色マーカー</span>
<span class="glow-violet">スミレ色マーカー</span>
/* 黄色 */
.glow-yellow {
 background: linear-gradient(transparent 50%,rgba(255, 243, 82, 0.2) 50%,rgb(255, 243, 82) 76%,transparent);
}
/* 赤色 */
.glow-red {
 background:linear-gradient(transparent 50%,rgb(234 97 142 / 20%) 50%,#ea618e 76%,transparent);
}
/* 青色 */
.glow-blue {
 background: linear-gradient(transparent 50%,rgba(127, 191, 255, 0.2) 50%,rgb(127, 191, 255) 76%,transparent);
}
/* ピンク */
.glow-pink {
 background: linear-gradient(transparent 50%,rgba(245, 178, 178, 0.2) 50%,rgb(245, 178, 178) 76%,transparent);
}
/* オレンジ */
.glow-orange {
 background: linear-gradient(transparent 50%,rgba(255, 191, 127, 0.2) 50%,rgb(255, 191, 127) 76%,transparent);
}
/* ミント */
.glow-mint {
 background: linear-gradient(transparent 50%,rgba(149, 229, 226, 0.2) 50%,rgb(149, 229, 226) 76%,transparent);
}
/* スミレ */
.glow-violet {
 background: linear-gradient(transparent 50%,rgba(209, 168, 249, 0.2) 50%,rgb(209, 168, 249) 76%,transparent);
}

実際の使用例

ブログを読みやすくするには、マーカーが便利です。
マーカーを使うと、どこがポイントなのか一目でわかるメリットがあります。

<p>ブログを読みやすくするには、<span class="glow-mint">マーカー</span>が便利です。<br>
マーカーを使うと、<span class="glow-mint">どこがポイントなのか一目でわかる</span>メリットがあります。</p>

こんな感じ！

あなたのブログを彩るのにぜひ役立ててください。

以上、他にも思いついたら随時更新していきます！

こんなのを作って欲しい、などありましたらお気軽にお声かけください。

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