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

表示例

元画像

グレイスケール(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=”フィルタ加工した画像”