Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Vita Ricca.

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

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

      2015/07/28


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

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
節税策も伝授！初心者のための株式会社 設立手続きのすべて

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

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

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

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

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

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


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/0/knowledge/web/knowledgestore.co.jp/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524