最近、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はカラーコードです。アンダーラインのカラーを変更したいときは、カラーコードを変更すれば簡単に色が変わります。
下のリンク先でカラーコードが簡単にわかります。