蛍光ペン・マーカー風の線を引くCSS

やっほー！パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブログの文章で強調して表現したい時ってありますよね。

例えばこうやって太字（ボールド）にしたり、大きさを変えてみたり、色を変えてみたりするわけですが、こんな風に蛍光ペンを引いたように見せることもできます。

色も自由に変更することができ、見た目のインパクトも大きい蛍光ペン効果。

これをCSSで表現する方法をご紹介しますね。

蛍光ペンを表現するCSS、HTML

ネットで検索すると太字（ボールド）の機能に蛍光ペン効果を割り当てる人が多いのですが、僕は太字は太字で残しておきたいのであえてHTMLで指定する方法を選んでます。

それではさっそく見ていきましょう。

CSSをイジるその前に
これ以降はCSSに変更を加えます。下記を参考にして子テーマの導入とCSSを確実に反映させる方法を確認しておくことをおすすめします。

mukutto.com

子テーマを使おう！STORK（ストーク）に子テーマをインストールする方法

続きを読む>>

mukutto.com

CSSの変更が反映されない時の6つの対処法、教えます！

続きを読む>>

CSS

次のCSSをスタイルシートにコピペして保存しましょう。

/* 蛍光ペン */
.keikou {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

画像で見るとこんな感じ。

HTML

蛍光ペン効果を出したい場所で次のHTMLを使います。

<span class=”keikou”>xxx</span>

このxxxのところに自分の好きな文章を書きましょう。

こんな風になります。

ほら、蛍光ペンが表現されました

蛍光ペンをカスタマイズ

蛍光ペンは表示されるようになったけど色や太さを変えたい人もいるはず。

それでは次にカスタマイズ方法について紹介します。

蛍光ペンの色を変える

色を変更するにはCSSのこの部分を変更する必要があります。

シャープ（#）から後ろのアルファベットと数字の部分ですね。

これは色をHTMLを使って表現した部分なので、こちらのページを参考にして自分の好きな色を設定しましょう。

赤色（#ff0000）の場合：

青色（#0000ff）の場合：

緑色（#00ff00）の場合：

ね、簡単でしょ。

こうやって自分の好みの色を設定しましょう。

蛍光ペンの太さを変える

次は太さの変更です。

CSSを変更することで文字全体を色づけたり下半分だけにしたりと自由にカスタマイズできます。

太さを変更するにはCSSのこの2箇所を変更して下さい。

上の画像でいうと60%と書かれてある2箇所のことですね。

これを両方とも変更する必要があります。

0%の場合：

40%の場合：

60%の場合：

90%の場合：

どうでしょう、数字を変更すると蛍光ペンの太さがどんどん変わりますね。

僕の場合は好みで60%に設定しています。

まとめ

今回は簡単に見た目の印象を変える蛍光ペンCSSの紹介でした。

ココぞという時に使うとババーンと印象づけることができるのでポイントを押さえて使っていきたいですね。

あまり使いすぎると目がチカチカして読みづらくなってしまうので注意が必要です。