CSSで蛍光マーカーいろいろ、クレヨン風など

WordPress

Various fluorescent markers with CSS, crayons, etc.

テキストに蛍光マーカー風の下線を付ける方法はあちこちで紹介されています。また、WordPressのテーマには最初から実装されているものもあります。当ブログで使用しているLuxeritasにも実装されているのですがちょっと配色等がちょっと好みと違うということで、クレヨン風なのものなどいろいろ作成してみました。

よくある蛍光マーカー

蛍光ペンとかマーカーで検索すると背景色にCSSグラデーションを使った方法が見つかります。

See the Pen CSSで蛍光マーカーいろいろ by hatenachips (@hatena19) on CodePen.

HTMLは、
<p>これは<span class="marker-pink">よくあるピンクの蛍光マーカー</span>です！</p>
というようにマーカーを付けたい部分をspanで囲みクラス属性を付加しておきます。

CSSではクラス属性セレクターに対して背景色にグラデーションを設定します。

linear-gradient(transparent 60%,#faa2b1 60%)は省略せずに記述すると、
linear-gradient( transparent 0%, transparent 60%, #faa2b1 60%, #faa2b1 100% ) となります。意味は、上端(0%)から60%の位置までは透明( transparent )、60%から下端(100%)まではピンク(#faa2b1)にするということです。

グラデーションは徐々に色が変化することですが、開始位置と終了位置に同じ色（あるいは透明）を指定しいるので、徐々に変化せずにベタ塗りの状態になります。

マーカーの太さを変えてみる

linear-gradient の意味か分かれば、マーカーの太さを変えるには開始位置を変更すればいいということも分かります。

See the Pen CSSで蛍光マーカーいろいろ1 by hatenachips (@hatena19) on CodePen.

それぞれマーカー色の開始位置を上端から40%, 60%, 80%に指定しています。つまりマーカーの太さはそれぞれ 60%, 40%, 20% ということです。

テキストを太字にしてみる

テキストがマーカー色に負ける気がするので文字を太字にするとバランスがいいように感じます。

See the Pen CSSで蛍光ペンいろいろ2 by hatenachips (@hatena19) on CodePen.

太字にするには、font-weight: bold; を追加します。

ボックスシャドウを使ったクレヨン風の蛍光マーカー

ベタ塗りだと色によってはきつい感じがします。クレヨンで描いたようにふちをぼかした感じにしたいと思いませんか。同じようなことを考える人はいるようでWEB検索するとCSSのボックスシャドウを使った方法が見つかります。

See the Pen CSSで蛍光マーカーいろいろ3 by hatenachips (@hatena19) on CodePen.

box-shadow の設定については上記のリンク先の解説等を読んでください。

やっていることは、テキスト部分をボックスと見て、ボックスの内側に上方向にぼかした影を作り、さらにボックスの外側の下方向にもぼかした影を作り、上下端をぼかした感じのラインにしています。

影を利用している関係から、テキストの下に表示されるので、テキストに重ねるようにするのは難しいです。

ボックスシャドウを使わないクレヨン風の蛍光マーカー

一番最初に紹介した蛍光マーカーはCSSグラデーションを使いましたが、わざとグラテーションにせずにベタ塗りにしてますが、透明から不透明のグラテーションにすればぼかす効果を出せます。

linear-gradient は開始色、終了色の間に中間色も設定できます。開始色、終了色を半透明、中間色を不透明にすれば上下端をぼかした感じにできるはずです。

See the Pen CSSで蛍光ペンいろいろ4 by hatenachips (@hatena19) on CodePen.

半透明色はrgba関数で作成できます。rgba(247, 198, 104, 0.2) はオレンジ色で透明度0.2という意味です。透明度は0が完全透明、1が不透明ということです。


linear-gradient(transparent 50%,rgba(247, 198, 104, 0.2) 50%,rgb(247, 198, 104) 75%,rgba(247, 198, 104, 0.2));
は上端から50%の位置までは透明、50％から75％までの間は、0.2の半透明から不透明まで徐々に変化する、75％から下端までは不透明から0.2の半透明まで徐々に変化する、という意味になります。

開始位置、終了位置を変化させることでマーカーの太さを簡単に設定できます。またマーカーをテキストに重ねてひく感じにもできます。

蛍光マーカーとテキストの重なり具合を自由に調整

下辺の余白(padding-bottom)を設定することで重なりを減らす、あるいは離すことができます。 padding-bottom を設定すると高さが増えるので、設定しない場合よりその分マーカーが太くなるので細目に調整する必要があります。より重ねるようにするには、マーカーを全体に上に移動させて、その下に透明部分を追加します。

See the Pen CSSで蛍光ペンいろいろ5 by hatenachips (@hatena19) on CodePen.

ストライプの蛍光マーカー

Luxeritasは頻繁にアップデイトしていて、3.6.0からブロックエディターから蛍光ペンとドット蛍光ペンが使えるようになりました。蛍光ペンはこの記事の一番最初の蛍光マーカーと同じものですが、ドット蛍光ペンはマーカーが斜めストライプになっている面白いものです。これを少しソフトな感じにカスタマイズしてみました。

See the Pen CSSで蛍光マーカーいろいろ6 by hatenachips (@hatena19) on CodePen.

Luxeritasでカスタマイズした蛍光ペンを使う方法

Luxeritas3.6.0以降ではブロックエディターでテキストを選択して蛍光ペンボタンをクリックして色を選択するとマーカーかひかれます。

Luxeritasの蛍光ペンボタンをクリックすると

HTMLでは<span class="luxe-hilight-orange">蛍光ペンボタン</span>というように luxe-hilight-色というクラスが付加されます。ということで、追加CSS か style.css  に上記のお好みのCSSをコピーしてセレクターをこのクラス属性に変更すれば簡単にカスタマイズしたマーカーにできます。

例えば オレンジのクレヨン風で太文字にしたい場合は、下記のようなCSSを追加すればいいでしょう。

.luxe-hilight-orange {
  background: linear-gradient(transparent 50%,rgba(247, 198, 104, 0.2) 50%,rgb(247, 198, 104) 75%,rgba(247, 198, 104, 0.2));
  font-weight: bold;
}

他のテーマで蛍光マーカーを実装しているものもおそらくクラス属性を付加していると思いますので、同様にできると思います。

実装していないテーマの場合は、AddQuickTagのようなタグを挿入してくれるようなプラグインを使えば簡単にマーカーを挿入できるようになるでしょう。

まとめ

蛍光マーカーのいろいろなデザインを紹介しました。 CSSグラデーションを使ったクレヨン風マーカーは他では見たことがないものだと思います（探せなかっただけかもしれませんが）。

強調したいときにピンポイントで使うと記事が引き締まると思います。

WordPressCSS,HTML,Luxeritas,WordPress

Posted by hatena