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

ブログの文章に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