この記事ではブログで使用する蛍光ペン風マーカー線について
- ・「カラーの使い方」
- ・「カラーが相手に与えるイメージ」
- ・「線の太さによる印象の違い」
- ・「フォントによる見え方の違い」
などをサンプルコードを使いながら細かく解説しています。
そんなのいいから、さっさとマーカー線を引きたいという方は、一番下にコピペで使えるカラー別コードを載せているので、目次から飛んでください。
ただしマーカー線１つでサイトのイメージが変わったり、センスが出てしまうのでカラーだけでなく、基本は押さえておくことをオススメします。
目次・読みたい所へタップできます
CSSマーカー線で使用するコードについて
当サイトでは、以下のコードでマーカー線を引いています。
HTMLcopyする<span class="marker">ここに文字を入れる</span>
カラーを増やす場合は、class名のmarkerをmarker1、marker2と増やしていきます。
CSScopyする.marker { background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; }
上記コードだとこのようなマーカー線になります。
もう一つよく使われる＜HTMLコード＞がこちらです。
HTML<strong class="marker">ここに文章</strong>
strongタグに＜class＞名をつけるタイプですね。
strongとは「重要」を意味するタグになります。
こうすることで見た目だけでなく、検索エンジンにも「この文章は重要です」と伝えることができます。
しかしこれだとマーカーを引いたところが全て重要になってしまうのです。
例えば記事を作成するに辺り、重要でなくてもマーカー線を引く場合はよくあります。
今回の記事でいえば、マーカー線を解説するにあたり、かなり使用しています。
では引いている箇所全てを検索エンジンに重要だと伝えたいのか？というと、そんなことはなく、あくまで読者(人間の動線)を意識して使っています。
なので個人的にはstrongタグ(重要)とマーカー線は別個にしておくことをオススメします。
もう一つ「HTML5」では、<mark>というタグが追加され、<mark>ここに文章</mark>このようにタグで囲むとマーカー線と同じ装飾ができます。
そのまま使うと上記のように黄色い線がデフォルトです。(テーマ側で指定してある場合は違うカラーになります)
ただし、このタグも重要などの意味はなく、文章を目立たせる為だけにあります。「CSS」で背景カラーや線の太さを変更するのであれば、どちらのコードを使用しても同じです。
CSSマーカー線の太さサンプル20種
マーカー線において、線の太さにも気を使うと文章の印象はだいぶ変わります。
CSScopyする.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％」辺りをオススメします。
85％以上になると、細すぎるためマーカーが目立ちません。(当サイトのフォントだと80％でも細すぎます。)
60％以下になると、文字に被ってきて少し邪魔臭い印象です。
特に太いマーカー線は、カラーに気を使わないと読み手のストレスになります。
こんな感じで使っているサイトをよく見かけますが、目に刺激が強いですし、文字が細いので見にくいですよね。
黄色い背景に赤い文章はもっと、よくないパターンです。この文章イラっとしませんか？
もし太いマーカー線を引く場合は、border-radiusを使って角を少し丸くしたり、適切なカラーにすると同じ文章でも印象はだいぶ変わります。
先ほどと同じ黄色い背景の文章ですが、カラーを変えて、角に少し丸みを持たせています。文章に柔らかさが出てませんか？
CSScopyする.marker{ background: linear-gradient(transparent 0%, #fff799 0%); font-weight: bold; border-radius:6px; }
ちなみに、カラーコードの「％」を消すと、グラデーションのようなマーカー線になります。
CSS.marker{ background: linear-gradient(transparent 0%, #fff799 ); font-weight: bold; }
CSSマーカー線上のフォントは太字にしよう
CSScopyする.marker { background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; }
font-weight:bold;を使うことによって、文字を太字にできます。
太字にする理由ですが、以下の文章を見比べてみてください。
AIが苦手とすることの１つに、異なる文脈や背景を組み合わせるクリエイティブ性があります。
AIが苦手とすることの１つに、異なる文脈や背景を組み合わせるクリエイティブ性があります
2つ目の文章の方が目に止まりますよね。
冒頭で説明した通り、マーカー線に「SEO的」な効果は全くなく、筆者が読んでもらいたい箇所を強調するためだけにあります。
なので、読者の目に止まる「太字」が効果的です。
CSSマーカー線のサンプル４２色
さて前置きが長くなりましたが、ここから私の「オススメカラー」と「オススメしないカラー」合わせて42色のサンプルカラーコードを載せています。
カラーについての解説も少しだけしました。
背景色は白であることが前提で線の太さは「７５％」で統一、フォントは太字にしています。
オススメのレッド系マーカー線
白地に赤は、最も目を惹くカラーです。
「否定的」意味合いを含む文章に使うと効果的です。
私は、スピリチュアルや占いといったオカルトの類が大嫌いです。
なぜなら、それらの背景には必ずビジネスが絡んでいるからです。
カラーによって意味を分けるのは、サイト内で何色か使う場合に限ります。
当サイトは、重要なところは赤いマーカー線一色で統一しています。
オススメしない赤系マーカー線
サンプルカラー４(#ff5151)
サンプルカラー５(#ff0000)
ここまで色が濃いと、マーカーに目がいってしまい文字が入ってこなくなります。
オススメのブルー系マーカー線
青は「肯定的」なことを強調させたい時に使いたいですね。
私はWEB解析が大好きです。
なぜなら、正しい検証をすれば必ず結果が出ることを知っているからです。
オススメしない青系マーカー線
サンプルカラー９(#007fff)
サンプルカラー１０(#0000ff)
青は比較的目に優しいカラーですが、ここまで濃いと目の負担になります。
目がチカチカしませんか？
オススメのイエロー系マーカー線
「黄色」は注意を惹くカラーなので、補足などを強調させたい時に使います。
WordPressは自分でホームページやブログを作ることができる魅力的なツールの１つです。
ただし、なかなか奥が深くちゃんと使いこなしている人はほとんどいません。
こんな感じで、カラーごとに意味を統一しておくと文章にまとまりができます。
そして「赤」や「青」は、薄いカラーをオススメしましたが、白地に「薄い黄色」だと、コントラストが分かりづらくなります。
なので、少し濃い目のカラーにしましょう。
オススメしない黄色系マーカー線
サンプルカラー１４(#ffffb7)
サンプルカラー１５(#ffff00)
「14番」はコントラストが分かりづらい色。
「15番」は目に刺激が強い黄色ですね。
基本的に「赤」「青」「黄色」の３色があれば、事足りると思いますが、ここから先はカラーに意味を持たせるわけではなく、デザイン重視で使う場合のカラーを紹介します。
オススメのグリーン系マーカー線
白地にグリーンは相性がいいですね。
使うなら、上記のような綺麗なグリーンをオススメします。
オススメしないグリーン系マーカー線
サンプルカラー１９(#00ff00)
サンプルカラー２０(#578a3d)
サンプルカラー２１(#004d25)
「１９番」は、目に刺激が強いグリーンです。
「２０番」と「２１番」は、色が濃すぎて白地に引くと重たい印象になってしまいます。
オススメのピンク系マーカー線
ピンクは、女性向けのサイトなんかだと相性抜群ですね。
パステルなど薄めのカラーを使うと可愛らしさが出ます。
オススメしないピンク系マーカー線
サンプルカラー２５(#ff51a8)
サンプルカラー２５(#ff007f)
サンプルカラー２５(#f09199)
「２５番」「２６番」は、目に刺激が強いピンクですね。
「２７番」くらい濃いとピンクが持つ可愛らしさが失われてしまいます。
オススメのライトブルー系マーカー線
青系のマーカー線を使うなら、「水色」も綺麗に引けるのでオススメです。
薄めのカラーがいいですね。
オススメしないライトブルー系マーカー線
サンプルカラー３１(#00ffff)
サンプルカラー３２(#7fffff)
目に刺激が強い「水色」です。
オススメのオレンジ系マーカー線
「オレンジ」は文章に優しい印象を持たせます。
なるべく、薄めのカラーがオススメです。
オススメしないオレンジ系マーカー線
サンプルカラー３６(#ff7f00)
サンプルカラー３７(#ee7800)
ここまで濃いと、「オレンジ」の持つ優しさが損なわれます。
オススメのパープル系マーカー線
紫は毒々しいカラーなので通常使いませんが、使うのであれば上記のような薄めのカラーをオススメします。
オススメしないパープル系マーカー線
サンプルカラー４０(#aa4c8f)
サンプルカラー４１(#7f00ff)
サンプルカラー４２(#4b0082)
「４０番」と「４２」番は、毒々しさMAXですね。
白地には合わず、文字も消えてしまうので避けましょう。
「４１番」は、目に刺激が強い紫です。
マーカー線はよく使うと思うので「AddQuicktag」に登録しておくと、作業効率がグンと上がります。
こちらにマニュアル書を作成してあるので、合わせて読んでおくと理解が深まります。
AddQuicktagの使い方と設定【隠れた機能も全て解説】
CSSマーカー線の解説【まとめ】
お気に入りのカラーは見つかりましたか？
ぜひマーカー線を使って文章で遊んでみてください。
ついでに、ボーダー線もいかが？
border線の種類別ーHTML&CSSデザイン14選
プロ並みにこだわる必要はありませんが、全くデザインを無視したサイトはネットに明るい読者に見抜かれてますよ。
はじめまして。
パトモスといいます。
数日前に「カゲサイ」ブログに出会いました。
昔、多少 HTML・CSS をかじっていたのですが、復習を兼ねて「カゲサイ」をテキストとして、キャプチャしながら勉強のやり直しをしています。
星の数ほどあるブログの中でも、わかりやすさ、ていねいさ、内容の広さ・深さなど群を抜いていると思います。
コードなどは「VSCode」で実際に手打ちして、ブラウザで確認しながら作業を進めています。
拙いながらも WordPress （テンプレートは賢威8.0）でブログを公開していますので、HTML・CSSの学習が済んだら、WordPress「STEP1」～「STEP10」にとりかかる予定です。
優れたブログ、ありがとうございました。