ラインマーカーを引いたような蛍光ペン風の効果を付ける CSS

どうも WordPress の人気テーマ「Simplicity」およびそのカスタムスキンのおかげで、蛍光ペン (ラインマーカー) を引いたような強調スタイルを付けているページが増えている。

WordPress のテーマは Simplicity や Stinger あたりが SEO に強いらしく、量産型のアフィサイトでよく使われているのもあって、この蛍光ペン風スタイルにお目にかかる機会も多い。

結構綺麗に実装されているので、SASS・SCSS のミックスインを利用して実装してみた。

background-image: linear-gradient() を利用し、要素の上から 60% は透明、60% 地点から色を付ける、という実装になっている。

文字色の邪魔にならないよう、明るく、薄めの色を選ぶと良い。

上述のサンプルは SASS・SCSS のミックスイン (@mixin) を使って実装したので、カラーバリエーションを増やすのも簡単。emstrong 要素向けにしても良いし、単に span 要素に指定しても綺麗だ。


WordPress イイナァ…