Corredor

ウェブ、プログラミングの勉強メモ。

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

世界一わかりやすいWordPress 導入とサイト制作の教科書 (世界一わかりやすい教科書)

世界一わかりやすいWordPress 導入とサイト制作の教科書 (世界一わかりやすい教科書)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

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

  • 参考: … こういうページでよく見るヤツ

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

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

See the Pen Line Marker by Neos21 (@Neos21) on CodePen.

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

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

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


WordPress イイナァ…