CSSの下線マーカーの色が人に与える心理的効果と正しい使い方

下線マーカーの効果

CSS下線マーカーを引くと文章の大切なポイントをぱっとすばやく伝えることができます。読む人は、全文を読まずに記事の内容を理解できるので、ブログを書くときは要所要所に入れておくべきです。

マーカー色の印象

青マーカー

デメリット・苦手・集中・冷静・リラックス

青は、集中力を高める効果があります。じっくりと記事を読んでもらいたいコンテンツに向いています。デメリットを表す場合にも青がよく用いられます。

HTML/CSS

青は、<span class="marker-under-blue">集中力を高める効果</span>があります。

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

黄色マーカー

メリット・大事・注意・元気

黄は気持ちを元気にする効果があります。大事なポイントを伝えるのに向いています。

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

赤マーカー

強調・刺激・興奮・警告

赤は興奮させる効果があるので購入/申し込みなど行動を起こしてもらいたいときに有効です。ただし多用すると印象を悪くしてしまうので使い過ぎに注意しましょう。

朱色のように柔らかい印象を与える赤もありますので、申し込みページでは濃いめの赤、ブログ記事では朱色など使い分けするとよいでしょう。

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

マーカー範囲は短めに

このように文章全体をマーカーで強調すると、どこが強調したい部分か読む人が分からなくなってしまいます。

マーカー範囲は、文章全体でなく特定の箇所のみにすることで読者に素早くポイントを伝えることができます。

下線マーカーのCSS

マーカーの線が太いほうが、より強調した印象になります。ブログの趣旨や雰囲気によって使い分けをしてみてください。

線細め

青は、集中力を高める効果があります。

/* 下線マーカー青色(細め) */
.marker-under-blue-s {
    background: linear-gradient(transparent 69%,#9dd7fd 95%);
}

線半分

青は、集中力を高める効果があります。

/* 下線マーカー青色(太め) */
.marker-under-blue-2 {
    background: linear-gradient(transparent 60%,#9dd7fd 60%);
    font-weight: bold; /* 太字が不要の場合は削除 */
}