【CSS】テキストの背景色を蛍光マーカーっぽいお洒落なライン線にする方法

About CSS

ホームページ中やブログ記事中の文面の強調したい部分にマーカー線を引きたいことって往々にしてあります。

その際、ベタッとテキスト背景色を塗るのではなく、蛍光ペンを使ったようなお洒落な感じのマーカー線でラインを引きたくないですか?

今回は「テキストの背景色を蛍光ペンみたいにスタイリッシュなライン線が引けるようになる CSS レイアウト」を紹介します。

テキストを蛍光ペンみたいなマーカー線でラインを引く手順

テキストを蛍光ペンみたいなマーカー線でラインを引く手順

今回紹介する CSS レイアウトを利用するとこんな感じで蛍光ペンぽく線が引けます。

CSS はこちら

マーカー線を太さ別に4つ記述しています。

transparent の数値でマーカー線の太さを調整して、隣のカラーコードの数値でマーカー線の透明度を調整します。

HTML はこのように記述

<span></span> の部分に CSS Class を使用して span で囲った部分にマーカー線が引かれます。上のサンプル画像はこの HTML & CSS をそのまま記述したものです。


WordPress 記事中に使う場合は、プラグイン Add Quicktags に開始タグと終了タグを登録して使ったりすると便利に使えると思います。

とても簡単なので、テキストにひと手間やってみてください。