Vita Ricca.

公認会計士が伝えるビジネスハック。

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

      2015/07/28

highlighter-603995_640

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

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

カラーコード一覧

スポンサードリンク

レコメンド

1
事業計画書の書き方と、成功体験から得た単純な1つのポイント

資金調達をする際に事業計画書を書くときには、提出先によって事業計画書の「見せ方」 ...

2
鬼速でわかる!安く済ませる株式会社設立の手続きのすべて

今回は株式会社設立の手続きを3つのステップに分け、しかも法改正などの最新情報も含 ...

3
【保存版】無担保・無保証で借入できる中小企業経営力強化資金とは?

今回の記事内容は既に他のBlogでもご紹介しましたが、ご興味のある方が多いのでこ ...

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