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

html

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

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

線の太さ3種類と色は9色用意してみました!

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

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

<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>

コメント

  1. ゆこらん より:

    助かりました!
    役に立つ記事をありがとうございます☺️

  2. […] 参考サイト: https://xn--68j3b2d8le4af20azcz743e.com/pc/wp/subtract-the-marker-of-the-highlighter-pen-to-the-sentence-of-wordpress-html […]

タイトルとURLをコピーしました