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

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

• 参考 : https://ikumen-sim.net/blog-beginner-simplicity-wordpress … こういうページでよく見るヤツ

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

結構綺麗に実装されているので、以下に参考にして実装してみた。

• デモ : Line Marker
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

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

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

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

WordPress イイナァ…