WordPressカスタマイズまとめ←クリック

CSSマーカー線(蛍光ペン風)の解説【42色のサンプル付き】

蛍光ペン風マーカー線CSS

この記事では、WEB上でよく見かける蛍光ペン風マーカー線について

  • 「カラーの使い方」
  • 「カラーが相手に与えるイメージ」
  • 「線の太さによる印象の違い」
  • 「フォントによる見え方の違い」

などをサンプルコードを使いながら細かく解説しています。

そんなのいいから、さっさとマーカー線を引きたいという方は、一番下にコピペで使えるカラー別コードを載せているので、目次から飛んでください。

ただし、マーカー線1つでサイトのイメージが変わったり、センスが出てしまうのでカラーだけでなく、基本は押さえておくことをオススメします。

1・CSSマーカー線で使用するコードについて

当サイトでは、以下のコードでマーカー線を引いています。

HTML
<span class="marker">ここに文字を入れる</span>

カラーを増やす場合は、class名のmarkermarker1marker2と増やしていきます。

CSS
.marker {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
font-weight: bold; 
}

上記コードだとこのようなマーカー線になります。

もう一つ、WEB上でよく見かける<HTMLコード>がこちらです。

<strong class="marker">ここに文章</strong>

strongタグに<class>名をつけるタイプですね。

strongとは「重要」を意味するタグになります。

こうすることで、見た目だけでなく、検索エンジンにも「この文章は重要です」と伝えることができます。

では、なぜ当サイトはこのように定義していないのかというと、これだとマーカーを引いたところが全て重要になってしまうからです。

例えば、記事を作成するに辺り、重要でなくてもマーカー線を引く場合は結構あります。

今回の記事で言えば、マーカー線を解説するにあたり、かなりの量マーカー線を引いています。

では引いている箇所全てを検索エンジンに重要だと伝えたいのか?というと、そんなことはなく、あくまで読者(人間の動線)を意識して使っています。

なので、個人的にはstrongタグ(重要)とマーカー線は別個にしておくことをオススメします。

補足

もう一つ「HTML5」では、<mark>というタグが追加され、<mark>ここに文章</mark>このようにタグで囲むだけでもマーカー線のように見せることもできます。

そのまま使うと上記のように黄色い線がデフォルトです。(テーマ側で指定してある場合は違うカラーになります

ただし、このタグも重要などの意味はなく、文章を目立たせる為だけにあるので「CSS」で背景カラーや線の太さを変更するのであれば、「マーカー線」と同じ意味になります。

2・CSSマーカー線の太さサンプル20種

マーカー線において、線の太さにも気を使うと文章の印象はだいぶ変わります。

CSS
.marker {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
font-weight: bold; 
}

マーカー線の太さは、上記コードの%部分で変更できます。

正確には、transparentの効果によって背景の一部を透明にし、カラーコード横ので高さを決めています。

なので、基本的に2つの「%」は揃え、数値が低いほど太く、高いほど細くなります。

以下の表に「0%」〜「95%」をサンプルとして載せたので、見比べてみてください。

補足

100%の場合は、線がないので95%までにしてあります。

マーカー線の太さ
サンプル1
太さ0%のマーカー線
太さ5%のマーカー線
マーカー線の太さ
サンプル2
太さ10%のマーカー線
太さ15%のマーカー線
マーカー線の太さ
サンプル3
太さ20%のマーカー線
太さ25%のマーカー線
マーカー線の太さ
サンプル4
太さ30%のマーカー線
太さ35%のマーカー線
マーカー線の太さ
サンプル5
太さ40%のマーカー線
太さ45%のマーカー線
マーカー線の太さ
サンプル6
太さ50%のマーカー線
太さ55%のマーカー線
マーカー線の太さ
サンプル7
太さ60%のマーカー線
太さ65%のマーカー線
マーカー線の太さ
サンプル8
太さ70%のマーカー線
太さ75%のマーカー線
マーカー線の太さ
サンプル9
太さ80%のマーカー線
太さ85%のマーカー線
マーカー線の太さ
サンプル10
太さ90%のマーカー線
太さ95%のマーカー線

こうして並べると、太すぎても、細すぎても違和感がありますよね。

使っているフォント種類やサイズによって、太さイメージも変わってしまうんですが、基本的には「65%〜80%」辺りをオススメします。

補足

ちなみに、当サイトで使用している下線はマーカー線」ではなく「border線です。

border線デザイン border線の種類別HTML&CSSデザイン14選

※2018.10月追記:現在はマーカーにアニメーションをかけています。

85%以上になると、細すぎるためマーカーが目立ちません。(当サイトのフォントだと80%でも細すぎます。)

60%以下になると、文字にもだいぶ被ってきて少し邪魔臭い印象です。

特に太いマーカー線は、カラーに気を使わないと読み手のストレスになります。

こんな感じで使っているサイトをよく見かけますが、目に刺激が強いですし、文字が細いので見にくいですよね。

黄色い背景に赤い文章はもっと、よくないパターンです。この文章イラっとしませんか?

もし太いマーカー線を引く場合は、border-radiusを使って角を少し丸くしたり、適切なカラーにすると同じ文章でも印象はだいぶ変わります。

先ほどと同じ黄色い背景の文章ですが、カラーを変えて、角に少し丸みを持たせています。文章に柔らかさが出てませんか?

CSS
.marker{
 background: linear-gradient(transparent 0%, #fff799 0%);
 font-weight: bold; 
border-radius:6px;
}

ちなみに、カラーコードの「%」を消すと、グラデーションのようなマーカー線になります。

.marker{
background: linear-gradient(transparent 0%, #fff799 );
font-weight: bold; 
}

3・CSSマーカー線上のフォントは太字にしよう

CSS
.marker {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
font-weight: bold;
}

font-weight:bold;を使うことによって、文字を太字にできます。

太字にする理由ですが、以下の文章を見比べてみてください。

AIが苦手とすることの1つに、異なる文脈や背景を組み合わせるクリエイティブ性があります。

AIが苦手とすることの1つに、異なる文脈や背景を組み合わせるクリエイティブ性があります

2つ目の文章の方が目に止まりますよね。

冒頭で説明した通り、マーカー線に「SEO的」な効果は全くなく、筆者が読んでもらいたい箇所を強調するためだけにあります。

なので、読者の目に止まる「太字」にしましょう。

4・CSSマーカー線のサンプル42色

さて、前置きが長くなりましたが、ここから私なりの「オススメカラー」と「オススメしないカラー」合わせて42色のサンプルカラーコードを載せています。

カラーについての解説も少しだけしました。

注意

背景色は白であることが前提で線の太さは「75%」で統一、フォントは太字にしています。

オススメのレッド系マーカー線

サンプルカラー1
HTML
<span class="marker1">ここに文章</span>
style.css
/* マーカー線・赤 */
.marker1{
background:linear-gradient(transparent 75%, #ffadad 75%);
font-weight:bold; 
}
サンプルカラー2
HTML
<span class="marker2">ここに文章</span>
style.css
/* マーカー線・赤 */
.marker2{
 background:linear-gradient(transparent 75%, #ff9393 75%);
font-weight:bold; 
}
サンプルカラー3
HTML
<span class="marker3">ここに文章</span>
style.css
/* マーカー線・赤 */
.marker3{
 background:linear-gradient(transparent 75%, #ff7f7f 75%);
font-weight:bold; 
}

白地に赤は、最も目を惹くカラーです。

「否定的」意味合いを含む文章に使うと効果的です。

私は、スピリチュアルや占いといったオカルトの類が大嫌いです。

なぜなら、それらの背景には必ずビジネスが絡んでいるからです。

オススメしない赤系マーカー線

サンプルカラー4(#ff5151)

サンプルカラー5(#ff0000)

ここまで濃いカラーを使うと、マーカーに目がいってしまい文字が入ってこなくなります。

オススメのブルー系マーカー線

サンプルカラー6
HTML
<span class="marker4">ここに文章</span>
style.css
/* マーカー線・青 */
.marker4{
 background: linear-gradient(transparent 75%, #c1e0ff 75%);
font-weight: bold; 
}
サンプルカラー7
HTML
<span class="marker5">ここに文章</span>
style.css
/* マーカー線・青 */
.marker5{
background:linear-gradient(transparent 75%, #9eceff 75%);
font-weight:bold; 
}
サンプルカラー8
HTML
<span class="marker6">ここに文章</span>
style.css
/* マーカー線・青 */
.marker6 {
 background: linear-gradient(transparent 75%, #7fbfff 75%);
font-weight: bold; 
}

青は肯定的なことを強調させたい時に使いたいですね。

私は、WEB解析が大好きです。

なぜなら、正しい検証をすれば必ず結果が出ることが分かっているからです。

オススメしない青系マーカー線

サンプルカラー9(#007fff)

サンプルカラー10(#0000ff)

青は比較的目に優しいカラーですが、ここまで濃い色を使うと目への負担になります。

目がチカチカしませんか?

オススメのイエロー系マーカー線

サンプルカラー11
HTML
<span class="marker7">ここに文章</span>
style.css
/* マーカー線・黄色 */
.marker7{
background:linear-gradient(transparent 75%, #fff799 75%);
font-weight:bold; 
}
サンプルカラー12
HTML
<span class="marker8">ここに文章</span>
style.css
/* マーカー線・黄色 */
.marker8{
background:linear-gradient(transparent 75%, #edde7b 75%);
font-weight:bold; 
}
サンプルカラー13
HTML
<span class="marker9">ここに文章</span>
style.css
/* マーカー線・黄色 */
.marker9{
background:linear-gradient(transparent 75%, #ffdc00 75%);
font-weight:bold; 
}

「黄色」は注意を惹くカラーなので、補足などを強調させたい時に使います。

WordPressは、自分でホームページやブログを作ることができる魅力的なツールの1つです。

ただし、なかなか奥が深くちゃんと使いこなしている人はほとんどいません。

こんな感じで、カラーごとに意味を統一しておくと文章にまとまりができます。

そして「」や「」は、薄いカラーをオススメしてきましたが、白地に「薄い黄色」だと、コントラストが分かりづらくなります。

なので、少し濃い目のカラーにすることをオススメします。

オススメしない黄色系マーカー線

サンプルカラー14(#ffffb7)

サンプルカラー15(#ffff00)

「14番」はコントラストが分かりづらい色。

「15番」は目に刺激が強い黄色ですね。

基本的に「」「」「黄色」の3色があれば、事足りると思いますが、ここから先はカラーに意味を持たせるわけではなく、デザイン重視で使う場合のカラーをいくつか紹介します。

オススメのグリーン系マーカー線

サンプルカラー16
HTML
<span class="marker10">ここに文章</span>
style.css
/* マーカー線・緑 */
.marker10{
background:linear-gradient(transparent 75%, #b2ffb2 75%);
font-weight:bold; 
}
サンプルカラー17
HTML
<span class="marker11">ここに文章</span>
style.css
/* マーカー線・緑 */
.marker11{
background:linear-gradient(transparent 75%, #7fff7f 75%);
font-weight:bold; 
}
サンプルカラー18
HTML
<span class="marker12">ここに文章</span>
style.css
/* マーカー線・緑 */
.marker12{
background:linear-gradient(transparent 75%, #bfff7f 75%);
font-weight:bold; 
}

白地にグリーンは相性がいいですね。

使うなら、上記のような綺麗なグリーンをオススメします。

オススメしないグリーン系マーカー線

サンプルカラー19(#00ff00)

サンプルカラー20(#578a3d)

サンプルカラー21(#004d25)

「19番」は、目に刺激が強いグリーンです。

「20番」と「21番」は、色が濃すぎて白地に引くと重たい印象になってしまいます。

オススメのピンク系マーカー線

サンプルカラー22
HTML
<span class="marker13">ここに文章</span>
style.css
/* マーカー線・ピンク */
.marker13{
background:linear-gradient(transparent 75%, #ffc1e0 75%);
font-weight:bold; 
}
サンプルカラー23
HTML
<span class="marker14">ここに文章</span>
style.css
/* マーカー線・ピンク */
.marker14{
background:linear-gradient(transparent 75%, #ffc0cb 75%);
font-weight:bold; 
}
サンプルカラー24
HTML
<span class="marker15">ここに文章</span>
style.css
/* マーカー線・ピンク */
.marker15{
background:linear-gradient(transparent 75%, #ff9ece 75%);
font-weight:bold; 
}

ピンクは、女性向けのサイトなんかだと相性抜群ですね。

パステルなど薄めのカラーを使うと可愛らしさが出ます。

オススメしないピンク系マーカー線

サンプルカラー25(#ff51a8)

サンプルカラー25(#ff007f)

サンプルカラー25(#f09199)

「25番」「26番」は、目に刺激が強いピンクですね。

「27番」くらい濃いとピンクが持つ可愛らしさが失われてしまいます。

オススメのライトブルー系マーカー線

サンプルカラー28
HTML
<span class="marker16">ここに文章</span>
style.css
/* マーカー線・水色 */
.marker16{
background:linear-gradient(transparent 75%, #c1ffff 75%);
font-weight:bold; 
}
サンプルカラー29
HTML
<span class="marker17">ここに文章</span>
style.css
/* マーカー線・水色 */
.marker17{
background:linear-gradient(transparent 75%, #bce2e8 75%);
font-weight:bold; 
}
サンプルカラー30
HTML
<span class="marker18">ここに文章</span>
style.css
/* マーカー線・水色 */
.marker18{
background:linear-gradient(transparent 75%, #afeeee 75%);
font-weight:bold; 
}

青系のマーカー線を使うなら、「水色」も綺麗に引けるのでオススメです。

薄めのカラーがいいですね。

オススメしないライトブルー系マーカー線

サンプルカラー31(#00ffff)

サンプルカラー32(#7fffff)

目に刺激が強い「水色」です。

オススメのオレンジ系マーカー線

サンプルカラー33
HTML
<span class="marker19">ここに文章</span>
style.css
/* マーカー線・オレンジ */
.marker19{
background:linear-gradient(transparent 75%, #ffe0c1 75%);
font-weight:bold; 
}
サンプルカラー34
HTML
<span class="marker20">ここに文章</span>
style.css
/* マーカー線・オレンジ */
.marker21{
background:linear-gradient(transparent 75%, #ffce9e 75%);
font-weight:bold; 
}
サンプルカラー35
HTML
<span class="marker22">ここに文章</span>
style.css
/* マーカー線・オレンジ */
.marker22{
background:linear-gradient(transparent 75%, #ffbf7f 75%);
font-weight:bold; 
}

「オレンジ」は文章に優しい印象を持たせます。

なるべく、薄めのカラーがオススメです。

オススメしないオレンジ系マーカー線

サンプルカラー36(#ff7f00)

サンプルカラー37(#ee7800)

ここまで濃いと、「オレンジ」の持つ優しさが損なわれます。

オススメのパープル系マーカー線

サンプルカラー38
HTML
<span class="marker23">ここに文章</span>
style.css
/* マーカー線・紫 */
.marker23{
background:linear-gradient(transparent 75%, #cab8d9 75%);
font-weight:bold; 
}
サンプルカラー39
HTML
<span class="marker24">ここに文章</span>
style.css
/* マーカー線・紫 */
.marker24{
background:linear-gradient(transparent 75%, #ce9eff 75%);
font-weight:bold; 
}

紫は毒々しいカラーなので通常使いませんが、使うのであれば上記のような薄めのカラーをオススメします。

オススメしないパープル系マーカー線

サンプルカラー40(#aa4c8f)

サンプルカラー41(#7f00ff)

サンプルカラー42(#4b0082)

「40番」と「42」番は、毒々しさMAXですね。

白地には合わず、文字も消えてしまうので避けましょう。

「41番」は、目に刺激が強い紫です。

マーカー線はよく使うと思うので「AddQuicktag」に登録しておくと、作業効率がグンと上がります。

こちらにマニュアル書を作成してあるので、合わせて読んでおくと理解が深まります。

AddQuicktagの設定 AddQuicktagの使い方と設定【隠れた機能も全て解説】

まとめ

お気に入りのカラーは見つかりましたか?

せっかくブログを書くなら、マーカー線を使って文章をデザインする感覚で書いてみると、また1つブログならではの面白さがあります。

ついでに、ボーダー線の使い方もいかが?

border線デザイン border線の種類別HTML&CSSデザイン14選
ーカゲオー

プロ並みにこだわる必要はありませんが、全くデザインを無視したサイトはネットに明るい読者に見抜かれてますよ。

ノンデザイナーズ・デザインブック
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。