画像フィルタ加工用ショートコード

このショートコードはDigiPressテーマ専用のプラグインとして提供されています。

注意

このフィルタ加工はCSSで行っており、Webkit系のブラウザ(Chromenなど)やFireFoxなどのモダンブラウザで表現されますが、Internet Explorerは未対応のため反映されません

以下のフィルタは複数組み合わせて利用することもできます。

元画像(加工前)

表示例

グレイスケール(100%)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” grayscale=1 grayscaleval=”100%”]

セピア(100%)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” sepia=1 sepiaval=100]

彩度(30%) + 明るさ(70%)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” saturate=1 saturateval=30 brightness=1 brightness=”70%”]

色相環(160度) + ぼかし(5px)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” hue=1 hueval=”160deg” blur=1 blurval=”5px”]

コントラスト(60%)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” contrast=1 contrastval=60]

透過度(70%)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” opacity=1 opacityval=70]

ネガポジ反転(0%)

[filter url=”http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg” invert=1]

Code

[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" grayscale=1 grayscaleval="100%"]
[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" sepia=1 sepiaval=100]
[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" saturate=1 saturateval=30 brightness=1 brightness="70%"]
[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" hue=1 hueval="160deg" blur=1 blurval="5px"]
[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" contrast=1 contrastval=60]
[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" opacity=1 opacityval=70]
[filter url="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/girl-flowers.jpg" invert=1]

other

there is more

There is also this