誰でも簡単!HTMLコードだけで文字に蛍光アンダーラインを設定する方法

f:id:nkrmk:20200628215541j:image

ブログの文章にHTMLのコードのみで蛍光アンダーラインを簡単に引く方法

 

蛍光ラインHTMLコード【コピペOK】
<span style="background: linear-gradient(transparent 50%, #ff99cc 0%);"> 文字半分にピンクのマーカー</span>

 

アンダーラインを引きたい文章の場所に上記HTMLコードを設置する。 文字半分にピンクのマーカーと書いてある部分に蛍光アンダーラインを引きたい文章を記述する。 ライン色を変えたい場合は、#ff99cc(ピンク)を他の色コードに変更すだけでライン色も変えられる。

 

緑色のコード(#00ff00)に変えた設定はこんな感じ

 

水色のコード(#00ffff)に変えた設定はこんな感じ

 

黄色のコード(#ffff00)に変えた設定はこんな感じ

 

ピンクのコード(#ff99cc)に変えた設定はこんな感じ

 

グレーのコード(#dcdcdc)に変えた設定はこんな感じ

 

 

 

アンダーラインの太さをかえるには?

色コードの前にある%数字【 50% , #ff99cc 0%】を変更すればアンダーラインの太さも変えられる。

 

80%,#ff99cc 0%でこの太さ

 

70%,#ff99cc 0%でこの太さ

 

60%,#ff99cc 0%でこの太さ

 

50%,#ff99cc 0%でこの太さ

 

40%,#ff99cc 0%でこの太さ

 

30%,#ff99cc 0%でこの太さ

 

20%,#ff99cc 0%でこの太さ

 

0%,#ff99cc 0%でこの太さ

たったこれだけでブログの見栄えが良くなります。 お好みに合わせて色や太さを変えてみて下さい。

 

番外編

色コードの後ろにある0%数字を変えると影の付いたアンダーラインを引く事も出来ます。 0%,#ff99cc 80%に設定したイメージ

 

早速 蛍光アンダーラインを使った文章を書いて見ましょう!

 

色の変更はカラーコード一覧を参考に↓↓↓ http://www.netyasun.com/home/color.html