投稿記事の表現を強化しようと思い画像ブロックに4つの効果を付与した。効果は画像ブロックの実態となるdiv要素かfigure要素のclass属性に追加される。
フレーム
画像の外側に空きを作って昔の写真(紙焼き)っぽい見た目にする。
ドロップシャドウ
画像の背後に薄い影を付ける。
輪郭をぼかす
画像の輪郭を背景色でぼかす。
モノクローム
画像にモノクロームフィルターを適用する。セピアフィルターをあるがとりあえずはこちらのみ。
それぞれの効果は組み合わせ可能で、バリエーションはそれなりの数になる。今後もよさそうな効果があったら追加していきたい。
さて、スタイルは効果に応じてdiv要素(またはfigure要素)と内包するimg要素に指定した。テーマによって背景色などのカスタムプロパティ名が異なるので、汎用的なプラグインにするにはちょっと工夫が必要だ。