たくさんのアフィリエイトブログを読んでいると、ブログ記事の文字に「蛍光ペン風にマーカー線」を引いているのをよく見かけます。
重要な箇所を目立たせる目的で適度に使うなら、非常におしゃれで効果的だと思います。
本日はCSSを使って「ブログ記事の文章にマーカー線を引いて目立たせる方法」をご紹介したいと思います。
読みやすいブログを目指したいものです。
簡単にできるので是非コピペで使ってみてくださいね！
半分の赤のマーカー線
文字に少しマーカー線がかかるくらいならこちら
ブログ記事の文字に「赤のマーカー線」
HTMLの記述の記述
ブログ記事の文字に「赤のマーカー線」
CSSの記述
.red-line {
background: linear-gradient(transparent 60%, #f78181 0%);
}
transparent: 線の太さ（%）
0% 太い → 100% 細い
後はお好みで線の太さやカラーを変えてください。
細目の青のマーカー線
控え目に文字にかからないようにマーカー線を引くならこちら
ブログ記事の文字に「青のマーカー線」
HTMLの記述の記述
ブログ記事の文字に「青のマーカー線」
CSSの記述
.blue-line {
background: linear-gradient(transparent 80%, #f78181 0%);
}
太いのオレンジのマーカー線
文字全体をマーカー線を引くならこちら
ブログ記事の文字に「オレンジのマーカー線」
HTMLの記述の記述
ブログ記事の文字に「オレンジのマーカー線」
CSSの記述
.orange-line {
background: linear-gradient(transparent 80%, #f78181 0%);
}
まとめ
せっかくの協調効果も色味がきつすぎたり、多様しすぎると逆効果を与えてしまいます。適度なバランスで使用したいものです。
