誰でもできる!CSSで蛍光ペン風の装飾のつけ方をわかりやすく解説するよ!

こんにちは!Takuya.B(@TB_IQ)です。

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

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

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

スポンサーリンク

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

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

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

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

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

HTMLの下準備

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

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

CSS

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

ちなみに

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

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

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

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

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

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

こんなふうに

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

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

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

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

その場合は

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

カラーコードはこちらのサイトがオススメ

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

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

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

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

 

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

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

スポンサーリンク

まとめ

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

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

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