困難を情熱に変える具体的アプローチ

menu

人生の目的に気づく方法『君が輝く最高の君へ』

ブログで蛍光ペンのような「色の付いた下線」を引く方法

ワードプレスなどのブログで
「色の付いた下線」を引く方法です。

次のようなメリットがあります。

・蛍光ペンのように目立つ

・文字全部に色が付かないので
 控えめ

・下線に色が付いているので
 リンクと間違えない

具体的な方法

ソースで次のように指定します。

<span style="background: linear-gradient(transparent 85%, #FFD700 0%)">色付き下線だよ</span>

・「85%」の値を大きくすると下線が細く
 小さくすると下線が太くなります

・「#FFD700」の部分を変えると下線の色
 変わります。

CSSに記載する場合は

例えば次のように

CSS

.line1 {
background: linear-gradient(transparent 85%, #FFD700 0%);
}

HTML

ソースで次のように指定

<p>
<span class="line1">色付き下線だよ</span>
</p>

まとめ

文字に色を付けすぎると
逆に見にくくなることがあります。

そういうときに”色付き下線”を使えば

控えめに目立たせ
見やすいサイトになります。

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

メニュー