こんにちは！Takuya.B（@TB_IQ）です。

蛍光マーカーのような文字装飾って今ではいろんなブログで見かける機会が増えてきました。

これってCSSを少しイジるだけで使えるようになるんです！

今日はその方法をご紹介します！

CSSで蛍光マーカー風の装飾をする方法

では、実際にWordpressの投稿画面でテキストエディタを開いて次の1行をコピペしてください。

<span style="background: linear-gradient(transparent 60%, #FFDFEF 0&);">ここにマーカーが適用されます</span>

すると、次のようにデザインが適用されます。

ここにマーカーが適用されます

このように蛍光マーカーのようなデザインです。

HTMLの下準備

では、これをもう少し手軽に使えるようにしてみましょう。

<span class="red-marker">ここにマーカーが適用されます</span>

このように要素にクラスを持たせます。

CSS

次にCSSです。style.cssに次のコードをコピペしてください。

.red-marker {background: linear-gradient(transparent 60%, #FFDFEF 0%);}
.blue-marker {background: linear-gradient(transparent 60%, #cce5ff 0%);}
.yellow-marker {background: linear-gradient(transparent 60%, #ffffbc 0%);}
.green-marker {background: linear-gradient(transparent 60%, #DFF0D8 0%);}

ちなみに

実際、このようになります。

• red-marker
• blue-marker
• yellow-marker
• green-marker

このようにCSSを記述することで、要素にred-markerのクラスを持たせたら赤マーカー、green-markerのクラスを持たせたら緑マーカーとスタイルを反映させることができます。

蛍光マーカーの色を変えたい場合

ちなみに、わたしは薄い色を使っていますが、「薄すぎて見にくい！」という方は下記のコードをコピペしてください。

.red-marker {background: linear-gradient(transparent 60%, #FF99FF 0%);}
.blue-marker {background: linear-gradient(transparent 60%, #66CCFF 0%);}
.yellow-marker {background: linear-gradient(transparent 60%, #FFFF66 0%);}
.green-marker {background: linear-gradient(transparent 60%, #66FFCC 0%);}

こうすることで濃いめのマーカーになります。

こんなふうに

• red-marker
• blue-marker
• yellow-marker
• green-marker

ただ、これだと目が痛くなるんですよねぇ…。強調って意味では良いんですけど、あまり乱用しすぎると目がッ目がッ〜〜！となりますのでご注意ください。

その他の色を使いたい場合

さて、赤・青・黄・緑のマーカーを例にご紹介しましたが、その他の色を使いたいという方もいらっしゃるはず。

その場合は

.green-marker {background: linear-gradient(transparent 60%, #AAAAAA 0%);}

こちらのコードの『#AAAAAA』の部分を自分の好きな色のカラーコードに変えてください。

蛍光マーカーの線の太さを変えたい場合

蛍光マーカーの線の太さを変えたい場合もあるでしょう。

.green-marker {background: linear-gradient(transparent 60%, #66FFCC 0%);}

その場合は上のコードの『transparent 60%』のパーセンテージの値を変えてみてください。

そうするとこのようにマーカーの太さが変わります。カッコ()の中身は実際のパーセンテージの値です。

ここにマーカーが適用されます(20%)
ここにマーカーが適用されます(40%)
ここにマーカーが適用されます(60%)
ここにマーカーが適用されます(80%)
ここにマーカーが適用されます(100%)

ここでの%の値は大きければ線が太くなるのではありません。逆で、%の値を大きくすれば、マーカーの線は細くなります。

まとめ

蛍光マーカーの文字装飾をすることで、文章中でメリハリを付けることができます。

わたしも他の方のブログを読んでいるとき、ただの太字よりもマーカー付きの太字の方が注目してしまうので、強調したいとこで使うのが良さそうですね！

何事も乱用は禁物です！是非、皆さんも活用してみてください！