画像ブロックに効果を付与

投稿記事の表現を強化しようと思い画像ブロックに4つの効果を付与した。効果は画像ブロックの実態となるdiv要素かfigure要素のclass属性に追加される。

フレーム

画像の外側に空きを作って昔の写真(紙焼き)っぽい見た目にする。

ドロップシャドウ

画像の背後に薄い影を付ける。

輪郭をぼかす

画像の輪郭を背景色でぼかす。

モノクローム

画像にモノクロームフィルターを適用する。セピアフィルターをあるがとりあえずはこちらのみ。

それぞれの効果は組み合わせ可能で、バリエーションはそれなりの数になる。今後もよさそうな効果があったら追加していきたい。

さて、スタイルは効果に応じてdiv要素(またはfigure要素)と内包するimg要素に指定した。テーマによって背景色などのカスタムプロパティ名が異なるので、汎用的なプラグインにするにはちょっと工夫が必要だ。