蛍光ペン風にテキストにマーキングするCSSの設定方法

こんにちは、すずしんです。

他の方のブログの記事を読んでいて…。
文字の強調の手段として、蛍光ペンでマーキングしたような線が使われていることがあります。
例えば、こんな風にテキストにひかれているのですよね。

これを見ていて、私もぜひ使ってみたいなと思いましたので…。
今回このマーカーを使えるようにしてみました。
手順としては、CSSでちょっと設定してやるだけです。

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

蛍光ペンマーカーの設定には「linear-gradient」属性を使用します。
これを使って、backgroundプロパティに設定してやります。

線の太さの設定

比率を指定している部分(0%, 60%など)の値を変えることで、線の太さを変えることができます。

細い線

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}

太い線

.marker-yellow-thick {
  background: linear-gradient(transparent 0%, #ffff33 0%);
}

線の色の設定

マーカーの色を変更するには、linear-gradient属性の後に指定している色(#ffff33)の値を変えれば良いです。

黄色

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}

青色

.marker-blue {
  background: linear-gradient(transparent 60%, #33ffff 60%);
}

オレンジ色

.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}

緑色

.marker-green {
  background: linear-gradient(transparent 60%, #54b240 60%);
}

サンプル蛍光マーカー

これまでに作成したものをベースに、蛍光マーカーのCSSサンプルを用意しました。
もしこれらのデザインで良ければ、以下のコードをコピーして、お使いのブログのCSSに追加してください。
はてなブログの場合は、「デザイン」→「カスタマイズ」→「デザインCSS」になります。

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}
.marker-yellow-thick {
  background: linear-gradient(transparent 0%, #ffff33 0%);
}
.marker-blue {
  background: linear-gradient(transparent 60%, #33ffff 60%);
}
.marker-blue-thick {
  background: linear-gradient(transparent 0%, #33ffff 0%);
}
.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}
.marker-orange-thick {
  background: linear-gradient(transparent 0%, #ffa500 0%);
}
.marker-green {
  background: linear-gradient(transparent 60%, #54b240 60%);
}
.marker-green-thick {
  background: linear-gradient(transparent 0%, #54b240 0%);
}

テキストにマーキングする方法

テキストにこの蛍光ペンマーキングを適用するには…。
線を引きたい部分のテキストをspanタグで囲い、そのclass属性に適用したい蛍光ペンのクラスを指定します。

例えば、テキストにオレンジの線を引きたい場合には以下のようにします。

このようにするとオレンジの線が引かれます。

<span class="marker-orange">このようにするとオレンジの線が引かれます。</span>

ひとこと

今回の記事では、蛍光ペン風の線を引けるようにするCSSの設定方法について書いてみました。
実際やってみると分かりますが、非常に簡単に実現することができましたね。

文字の強調には、文字を太くするという方法もありますが…。
今回のように蛍光ペンを引くと分かりやすいですし、思わず線を引いたところを見てしまいますね。
蛍光ペンによる強調効果は抜群ですよ。
今後は、文章中に強調したいフレーズが出てきたら、積極的にマーキングしていこうと思います。

今回のカスタマイズは、非常に簡単にできますので…。
ぜひあなたもブログで蛍光ペン風の線を引けるようにしてみませんか？