WPにhtmlで文字に蛍光ペンみたいなマーカーを引く方法

WordPressの標準機能ではない蛍光ペンみたいなマーカーを投稿記事のhtmlに記途するだけで引けますので色々試してみてくださいね。

太さを変えたいときは%を変更して、色はhtmlでお好きな色に変更してみてください。

線の太さ３種類と色は９色用意してみました！

マーカーの高さを変えたパターン

文字全部にピンクのマーカー

<span style="background: linear-gradient(transparent 0%, #ff99cc 0%);"> 全部にピンクのマーカー</span>

上半分薄くなったピンクのマーカー

<span style="background: linear-gradient(transparent 0%, #ff99cc );">上半分薄くなったピンクのマーカー</span>

文字半分にピンクのマーカー

<span style="background: linear-gradient(transparent 50%, #ff99cc 50%);"> 文字半分にピンクのマーカー</span>

文字の下にピンクのマーカー

<span style="background: linear-gradient(transparent 80%, #ff99cc 80%);"> 文字の下にピンクのマーカー</span>

マーカーの色を変えたパターン

赤のマーカー

<span style="background: linear-gradient(transparent 80%, #ff9999 80%);"> 赤のマーカー</span>

紫のマーカー

<span style="background: linear-gradient(transparent 80%, #cc99ff 80%);"> 紫のマーカー </span>

水色のマーカー

<span style="background: linear-gradient(transparent 80%, #99ffff 80%);"> 水色のマーカー </span>

青のマーカー

<span style="background: linear-gradient(transparent 80%, #66ccff 80%);"> 青のマーカー </span>

黄色のマーカー

<span style="background: linear-gradient(transparent 80%, #ffff99 80%);"> 黄色のマーカー </span>

オレンジのマーカー

<span style="background: linear-gradient(transparent 80%, #ffcc99 80%);"> オレンジのマーカー </span>

緑のマーカー

<span style="background: linear-gradient(transparent 80%, #99ff99 80%);"> 緑のマーカー </span>

茶のマーカー

<span style="background: linear-gradient(transparent 80%, #cc9966 80%);"> 茶のマーカー </span>