CSSで文字にマーカーを引く方法｜linear-gradientで強調デザインを実装

ハシビィくん

CSSで蛍光ペン風のマーカーを使えるようにして、ブログ記事に活用したいっす！

カピーさん

CSSでマーカーを表現するのは簡単だから、一般的なマーカーの実装方法を教えていくぞ。

Googleなどの検索エンジンもSEO観点でユーザーの読みやすさを重視していることからも、昔から使われている「マーカー」での装飾は馬鹿にできない要素といえます。本記事ではそんなマーカーの基本的な使い方を紹介していきます。

CSSのbackgroundで蛍光ペン風のマーカーを実装

蛍光ペン風のマーカーをCSSで作るには、backgroundプロパティを使うことで実装することができます。

backgroundプロパティを使うことで、指定したHTML要素部分の背景色をつけたり、背景画像を追加することができます。

そこにlinear-gradient属性を加えることで、マーカーデザインを作成することができます。

background:linear-gradient(カラーコード 色の割合, カラーコード 色の割合));

第一引数（カラーコード）は表示させたいカラーコードを指定。第二引数（色の割合）には要素内にどれだけ表示させるかを％を使って指定することができます。カラーコードを複数使う場合には、「,」で区切ることで次の色を指定することができます。

蛍光ペン風のマーカーのテスト

マーカーの太さを調整

蛍光ペン風のマーカーのテスト

background: linear-gradient(#fff176 0 100%); /* ← 黄色っぽい色をカラーコードで指定 */
  background-repeat: no-repeat;
  background-size: 100% 0.5em; /* 太さ（ここを変えると太さが変わる） */
  background-position: 0 100%; /* テキストの下側に配置 */

蛍光ペン風のマーカーのテスト

background: linear-gradient(transparent 30%, #2A7CBA 80%);

こちらはグラデーションで細いマーカー風にしているCSSになります。

テキストの一部分にマーカーを引く方法

テキストの重要な箇所のみにマーカーを引きたい場合もありますよね。そんな時にはspanタグを使って一部分のみを指定することができます。

spanタグはインライン要素なので、pタグの中に挿入することで重要な部分だけを指定することができます。

<p>蛍光ペン風<span class="test5">マーカー</span>のテスト</p>

特定の箇所だけにマーカーを使いたいシーンは多いと思います。そんな時は、WordPressの「再利用ブロック」や「ショートコード」で実装すると、簡単に使い回せるのでおすすめです。

まとめ：CSSで文字にマーカーを引く方法｜linear-gradientで強調デザインを実装

今回は、CSSを使った蛍光ペン風のマーカーを実装する方法について解説していきました。

WordPressのテーマによっては、標準でマーカーが用意されていることも多いですが、「使いたいデザインではない」というケースも多々あります。そんな時にマーカー実装の方法を知っていると、自由に記事のメリハリを作ることができます。

今回紹介したのは基本ですので、好きなようにカスタマイズして活用していただけると幸いです。