IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

WordPress

蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

更新日:

蛍光ペンでテキスト上をマーカー

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペンのようなマーカーで塗られたような強調サインです。例えば、こんな色。

ずっと気になっていたので、IT便利帳でも設定してみることにしました。

スポンサーリンク

蛍光ペンマーカーを設定(CSS)

蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。

linear-gradient(transparent 線の太さ, 線の色 0%)

このlinear-gradient属性、グラデーションを使って設定します。

 

線の太さ

黄色の蛍光ペン(太)

 

黄色の蛍光ペン(細)

蛍光ペン(太)と蛍光ペン(細)の違いは60%と0%で表示している箇所です。100%表示の場合は0%に,40%表示の場合は60%に表記します。

数値が高いほど細くなります

 

次は色の設定を変更します。

 

色の設定

色設定をしてみます。例として黄緑色、水色、ピンクで表記してみました。

黄緑色の蛍光ペン(細)

 

水色の蛍光ペン(細)

 

桃色の蛍光ペン(細)

色の「#66FFCC」の箇所を変更しているだけです。

上のCSSをスタイルシート(Style.css)や(smart.css)などに表記し更新。次に HTMLには

と表記すれば、蛍光ペンでマーカーされます。

 

スポンサーリンク

最後に

文字を強調したい時は、その文字を太くする方法もありますが、このように蛍光ペンでマーカーすると見やすいですね。マーカーされた箇所を見入ってしまいます。

CSSで太字とマーカーを両方とも作っておいて、使い分けしていこうと思います。

他にも色はたくさんあります。皆さんも気に入った蛍光ペン風マーカーを作ってみて下さい。

プラグイン「AddQuickTag」に登録しておくと、連携して便利に使えますよ▼

【関連】WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

【関連】ホームページHTML<p>と<br>の違いは応用例から理解しよう

スポンサーリンク

-WordPress
-

Copyright© IT便利帳 , 2018 All Rights Reserved.