ホームページ中やブログ記事中の文面の強調したい部分にマーカー線を引きたいことって往々にしてあります。
その際、ベタッとテキスト背景色を塗るのではなく、蛍光ペンを使ったようなお洒落な感じのマーカー線でラインを引きたくないですか？
今回は「テキストの背景色を蛍光ペンみたいにスタイリッシュなライン線が引けるようになる CSS レイアウト」を紹介します。
テキストを蛍光ペンみたいなマーカー線でラインを引く手順
今回紹介する CSS レイアウトを利用するとこんな感じで蛍光ペンぽく線が引けます。
CSS はこちら
|
1 2 3 4 |
.maker01 { background: linear-gradient(transparent 20%, #F8BBD0 40%);} .maker02 { background: linear-gradient(transparent 40%, #F0F4C3 40%);} .maker03 { background: linear-gradient(transparent 60%, #F8BBD0 40%);} .maker04 { background: linear-gradient(transparent 80%, #F0F4C3 40%);} |
マーカー線を太さ別に4つ記述しています。
transparent の数値でマーカー線の太さを調整して、隣のカラーコードの数値でマーカー線の透明度を調整します。
HTML はこのように記述
|
1 2 3 4 |
<p><span class="maker01">ここにテキストが入ります</span>・・・transparent 20%</p> <p><span class="maker02">ここにテキストが入ります</span>・・・transparent 40%</p> <p><span class="maker03">ここにテキストが入ります</span>・・・transparent 60%</p> <p><span class="maker04">ここにテキストが入ります</span>・・・transparent 80%</p> |
<span></span> の部分に CSS Class を使用して span で囲った部分にマーカー線が引かれます。上のサンプル画像はこの HTML & CSS をそのまま記述したものです。
WordPress 記事中に使う場合は、プラグイン Add Quicktags に開始タグと終了タグを登録して使ったりすると便利に使えると思います。
とても簡単なので、テキストにひと手間やってみてください。
