1. TOP
  2. Webデザイン
  3. ブログ記事の文章にマーカー線を引いて目立たせる方法

ブログ記事の文章にマーカー線を引いて目立たせる方法

ブログ記事の文章にマーカー線を引いて目立たせる方法

たくさんのアフィリエイトブログを読んでいると、ブログ記事の文字に「蛍光ペン風にマーカー線」を引いているのをよく見かけます。

重要な箇所を目立たせる目的で適度に使うなら、非常におしゃれで効果的だと思います。

本日はCSSを使って「ブログ記事の文章にマーカー線を引いて目立たせる方法」をご紹介したいと思います。

読みやすいブログを目指したいものです。
簡単にできるので是非コピペで使ってみてくださいね!

半分の赤のマーカー線

文字に少しマーカー線がかかるくらいならこちら

ブログ記事の文字に「赤のマーカー線」

HTMLの記述の記述

CSSの記述

transparent: 線の太さ(%)
0% 太い → 100% 細い

後はお好みで線の太さやカラーを変えてください。

細目の青のマーカー線

控え目に文字にかからないようにマーカー線を引くならこちら

ブログ記事の文字に「青のマーカー線」

HTMLの記述の記述

CSSの記述

太いのオレンジのマーカー線

文字全体をマーカー線を引くならこちら

ブログ記事の文字に「オレンジのマーカー線」

HTMLの記述の記述

CSSの記述

まとめ

せっかくの協調効果も色味がきつすぎたり、多様しすぎると逆効果を与えてしまいます。適度なバランスで使用したいものです。