WordPress

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

投稿日:

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

色々なブログを拝見していると、とても気になるの強調サインがあります。

それは蛍光ペンのようなマーカーで塗られたような強調サインです。例えば、こんな色

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

スポンサーリンク

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

まずはCSSの設定からスタート。

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

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

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

()内の線の太さ線の色を好みの色と太さに変更するだけでOK。

線の太さ線の色の意味は下の通りになります。

線の太さ

黄色の蛍光ペン(太)

.marker_yellow_futo {
background: linear-gradient(transparent 0%, #ffff66 0%);
}

 

黄色の蛍光ペン(細)

.marker_yellow_hoso {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

蛍光ペン(太)と蛍光ペン(細)の違いは、最後の部分が60%と0%で表示している箇所だけです。100%表示の場合(太マーカー)は0%に,40%表示の場合(細マーカー)は60%に表記します。

数値が高いほど細くなります。%は好みで調節して下さい。

 

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

 

色の設定

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

黄緑色の蛍光ペン(細)

.marker_lime {
background: linear-gradient(transparent 60%, #66FFCC 60%);
}

 

水色の蛍光ペン(細)

.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
}

 

桃色の蛍光ペン(細)

.marker_pink {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}

色の設定はカラーコード「#66FFCC」の箇所を変更しているだけです。

色をどれにしたら良いのかわからないという方は「カラーコード一覧表」から決めて、「#○○○○○○」の6桁をコピーして変更して下さい。

上のCSSをスタイルシート(Style.css)に表記し更新。

 

スポンサーリンク

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

上のCSSを記述した後、次に HTMLには以下のように挟み込みます。

<span class="marker_pink">強調したい文字</span>

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

「強調したい文字」の箇所をspan classで挟み込むだけでOKです。

マーカーをこれからよく使うという方は、プラグイン「AddQuickTag」に登録しておくと、連携して便利に使えますよ。

 

最後に

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

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

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

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

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

IT便利帳のSNSをフォローする

-WordPress
-

© 2023 IT便利帳