DigiPress

Highly Flexible WordPress Theme

メニュー

filter : 画像(img)に様々なフィルターエフェクトを施して表示

filter : 画像(img)に様々なフィルターエフェクトを施して表示
このショートコードを使用するには「Shortcodes for DigiPress」または「DigiPress Ex – Shortcodes」プラグインが必要です

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

注意事項

  • このショートコードによるフィルタは、最新のChrome, FireFox, Safariで有効です。
  • IE 9以下では、グレイスケール、ぼかしのみ反映されます。ただし、グレイスケールの値は反映されずモノクロ単一表示となります。
  • IE 10以降では反映されません。

表示例

元画像

グレイスケール(100%)

セピア(80%) + 明るさ(70%)

色相環(120degree) + ぼかし(4px)

このショートコード

[filter
url="https://digipress.info/_wp/wp-content/uploads/2013/02/girl-1346193_1280.jpg"
grayscale=1
grayscaleval="100%"]

[filter
url="https://digipress.info/_wp/wp-content/uploads/2013/02/girl-1346193_1280.jpg"
sepia=1
sepiaval=80
brightness=1
brightness="70%"]

[filter
url="https://digipress.info/_wp/wp-content/uploads/2013/02/girl-1346193_1280.jpg"
hue=1
hueval="120deg"
blur=1
blurval="4px"]

指定可能なパラメータ

url (※必須)
フィルター加工を施す画像のURLを指定します。この項目は必須です。

例 : url=”http://hogehoge.com/wp-content/uploads/sample.jpg”

blur
ぼかしのフィルタの使用有無を指定します。

このフィルタを利用する場合に、blur=1 または blur=true を指定します。

このフィルタを利用する場合は、別途 “blurval” パラメータで加工レベルを指定できます。

例 : blur=1

blurval (※blurと併用)
ぼかしのフィルタの加工レベルを 0〜10px の範囲で指定します。

未指定の場合は 4px が適用されます。

このパラメータ値の単位は「px」ですが、単位は省略可能です。

例 : blurval=”5px”, blurval=5 など。

フィルタ適用例

grayscale
グレイスケールのフィルタの使用有無を指定します。

このフィルタを利用する場合に、grayscale=1 または grayscale=true を指定します。

このフィルタを利用する場合は、別途 “grayscaleval” パラメータで加工レベルを指定できます。

例 : grayscale=1

grayscaleval (※grayscaleと併用)
グレイスケールのフィルタの加工レベルを 0〜100% の範囲で指定します。

未指定の場合は 100% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : grayscaleval=”80%”, grayscaleval=50 など。

フィルタ適用例

saturate
彩度のフィルタの使用有無を指定します。

このフィルタを利用する場合に、saturate=1 または saturate=true を指定します。

このフィルタを利用する場合は、別途 “saturateval” パラメータで加工レベルを指定できます。

例 : saturate=1

saturateval (※saturateと併用)
彩度のフィルタの加工レベルを 0〜100% の範囲で指定します。
※通常時は100%の状態。

未指定の場合は 0% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : saturateval=”80%”, saturateval=50 など。

フィルタ適用例

sepia
セピア調のフィルタの使用有無を指定します。

このフィルタを利用する場合に、sepia=1 または sepia=true を指定します。

このフィルタを利用する場合は、別途 “sepiaval” パラメータで加工レベルを指定できます。

例 : sepia=1

sepiaval (※sepiaと併用)
セピア調のフィルタの加工レベルを 0〜100% の範囲で指定します。

未指定の場合は 100% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : sepiaval=”80%”, sepiaval=50 など。

フィルタ適用例

brightness
明るさのフィルタの使用有無を指定します。

このフィルタを利用する場合に、brightness=1 または brightness=true を指定します。

このフィルタを利用する場合は、別途 “brightnessval” パラメータで加工レベルを指定できます。

例 : brightness=1

brightnessval (※brightnessと併用)
明るさのフィルタの加工レベルを 0〜100% の範囲で指定します。
※通常時は100%の状態。

未指定の場合は 80% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : brightnessval=”80%”, brightnessval=50 など。

フィルタ適用例

contrast
コントラストのフィルタの使用有無を指定します。

このフィルタを利用する場合に、contrast=1 または contrast=true を指定します。

このフィルタを利用する場合は、別途 “contrastval” パラメータで加工レベルを指定できます。

例 : contrast=1

contrastval (※contrastと併用)
コントラストのフィルタの加工レベルを 0〜100% の範囲で指定します。
※通常時は100%の状態。

未指定の場合は 80% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : contrastval=”80%”, contrastval=50 など。

フィルタ適用例

opacity
透過度のフィルタの使用有無を指定します。

このフィルタを利用する場合に、opacity=1 または opacity=true を指定します。

このフィルタを利用する場合は、別途 “opacityval” パラメータで加工レベルを指定できます。

例 : opacity=1

opacityval (※opacityと併用)
透過度のフィルタの加工レベルを 0〜100% の範囲で指定します。
※通常時は100%の状態。

未指定の場合は 80% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : opacityval=”80%”, opacityval=50 など。

フィルタ適用例

invert
ネガポジ反転のフィルタの使用有無を指定します。

このフィルタを利用する場合に、invert=1 または invert=true を指定します。

このフィルタを利用する場合は、別途 “invertval” パラメータで加工レベルを指定できます。

例 : invert=1

invertval (※invertと併用)
ネガポジ反転のフィルタの加工レベルを 0〜100% の範囲で指定します。
※通常時は0%の状態。

未指定の場合は 100% が適用されます。

このパラメータ値の単位は「%」ですが、単位は省略可能です。

例 : invertval=”80%”, invertval=50 など。

フィルタ適用例

hue
色相環のフィルタの使用有無を指定します。

このフィルタを利用する場合に、hue=1 または hue=true を指定します。

このフィルタを利用する場合は、別途 “hueval” パラメータで加工レベルを指定できます。

例 : hue=1

hueval (※hueと併用)
色相環のフィルタの加工レベルを 0〜365deg(0〜365度) の範囲で指定します。
※通常時は0degree(0度)の状態。

未指定の場合は 180deg(180度) が適用されます。

このパラメータ値の単位は「deg」ですが、単位は省略可能です。

例 : hueval=”180deg”, hueval=180 など。

フィルタ適用例

width
フィルタ加工して表示する画像(img)の表示幅を指定します。

例 : width=”350px”

height
フィルタ加工して表示する画像(img)の表示高を指定します。

例 : height=”180px”

class
フィルタ加工して表示する画像(img)の class属性に任意の値をセットしたい場合にその値を指定します。

例 : class=”my-img fl-r pd20px”

alt
フィルタ加工して表示する画像(img)の alt属性に任意の代替テキストを指定する場合にそのテキストを指定します。

例 : alt=”フィルタ加工した画像”