WPで蛍光ペン的なアンダーラインを簡単に引く方法

最近、DRMの勉強会に参加しています。

プレゼン資料を作成するときは、出来るだけ文字を利用せず、図表を多用し視覚で理解できるような資料を作成しています。ただDRMでは、こうしたやり方とは違うようです。

さて今回は、ライティングに関連して、テキストに引くアンダーラインを蛍光ペン的にする方法を紹介します。

ワードプレスのテーマはStinger5を前提にしています。

コピペで簡単に蛍光ペン的なアンダーラインを引く方法

このBlogのアンダーラインを蛍光ペン的にしてみましたが、デザイン的にも良く、読みやすくなったように感じています。

アンダーラインを蛍光ペン的にする方法は簡単です。

下のソースコードをコピペしてCSSに張付けるだけです。

/* アンダーラインカスタマイズ */
under {
    font-weight: bold;
    background: linear-gradient(transparent 40%, #ff9999 40%);
}

そして、下のようにアンダーラインを引きたい文章をunderで挟みます。

<under>アンダーラインを引きたい文章をunderで挟む</under>

するとこうなります。

アンダーラインを引きたい文章をunderで挟む

CSSに書き込むときの注意ポイント

2行目は、underではなくstrongにする方法もありますが、strongを多用したくないためにunderにしました。

アンダーライン上の文字を太字にしたくないときは、3行目のfont-weight; bold;を削除してください。

4行目の#ff9999はカラーコードです。アンダーラインのカラーを変更したいときは、カラーコードを変更すれば簡単に色が変わります。

下のリンク先でカラーコードが簡単にわかります。

カラーコード一覧

スポンサードリンク

 - IT・テクノロジー, ゆるい