モックン☆彡の部屋

画像の加工

画像の加工

普通に画像を表示させる事は表示できたけど、

どうせ表示させるなら少しお洒落をしてみませんか？

画像編集ソフトを使えば簡単だけど、今回紹介するのはソフトを使わなくても

タグを使う事で色々アレンジして表示できます。

百聞は一見にしかず。まずは下のサンプルを見てください。

（画像をクリックすると、その画像の説明へジャンプします）

元の画像
１	２	３	４

５	６	７	８

９	10	11	12

[注意] ：説明文で何回も出てきますが、『画像のアドレス』は
『 http://plaza.rakuten.co.jp/img/user/87/20/1128720/56.jpg 』です

１．透明・半透明・透明グラデーションにします

使う要素 ： style="filter: alpha(opacity=50) "

元の画像と比べて背景が透けるので、効果がわかったかも？

実際にサンプルで使ったタグは下のようになります。

< IMG src=" 画像のアドレス " width="110" height="88" style="filter: alpha(opacity=50) " >

『 alpha() 』には物を透けさせる働きがあり、

数字は『 0～100 』まで変えられて、数字が小さい方が透けて表示されます。

では、簡単な例を下に表示します。

元の画像
opacity=25	opacity=50	opacity=75	opacity=100

『 opacity 』以外にも使える要素は下記を参照して下さい。

ＴＯＰへ

２．３．４．線形、円形、方形にします

使う要素 ： style="filter: alpha(style= 1 or 2 or 3 ) "

１番では全体を透かしましたが、２、３、４番では部分的に透かします。

２番では『 alpha(style= 1 ) 』で線形

< IMG src=" 画像のアドレス " width="110" height="88" style="filter: alpha(style= 1 ) " >

３番では『 alpha(style= 2 ) 』で円形

< IMG src=" 画像のアドレス " width="110" height="88" style="filter: alpha(style= 2 ) " >

４番では『 alpha(style= 3 ) 』で 長方形 になります。

< IMG src=" 画像のアドレス " width="110" height="88" style="filter: alpha(style= 3 ) " >

それぞれのタグを使用した時の効果は下のようになります。

元の画像
style=1	style=2	style=3

[注意] ：わかりやすくするため背景へ色をつけています。

以上の１～４までの要素は『 , （カンマ）』で組み合わせられます。

その他にも使える要素がありますので、簡単にまとめて例を載せます。

設定値	説明
Opacity	開始地点の不透明レベルを指定します。設定値はデフォルトの0(完全に透明)～100(完全に不透明)です。
FinishOpacity	終了地点の不透明レベルを指定します。設定値はデフォルトの0(完全に透明)～100(完全に不透明)です。
StartX	開始地点のX座標を指定します。設定値は0～で、デフォルト値は0です。
StartY	開始地点のY座標を指定します。設定値は0～で、デフォルト値は0です。
FinishX	終了地点のX座標を指定します。設定値は0～で、デフォルト値は0です。
FinishY	終了地点のY座標を指定します。設定値は0～で、デフォルト値は0です。
Style	不透明のスタイルを指定します。設定値は0～3です。0は指定されず、1は線形、2は放射状、3は長方形です。

変更前の画像	変更後の画像	使用タグ
		< IMG src=" 画像のアドレス " width="150" style="filter: alpha(Opacity=10,FinishOpacity=100,Style=3) " >

ＴＯＰへ

５．ブレさせます

使う要素 ： style="filter: blur(add=0) "

ピンボケで撮ったような感じの画像にします。

『 blur() 』には物をブレさせる働きがあり、『 () 』の中には以下の物が入ります。

設定値

説明

add

元の要素を重ねるか否かを指定します。デフォルト値の設定値0は重ねず、1なら重ねます。

Direction

ぶれの方向を角度（時計方向）で指定します。設定値は0～360です。

･･･

Top

･･･

Top Right

･･･

Right

135

･･･

Bottom Right

180

･･･

Bottom

225

･･･

Bottom Left

270

･･･

Left

315

･･･

Top Left

360

･･･

Top

Strength

ぶれの距離を設定します。単位はピクセルで、デフォルト値は5です。

元の画像
add=0	add=1	direction=90	strength=3

これらの要素は『 , （カンマ）』で組み合わせられます。

変更前の画像	変更後の画像	使用タグ
		< IMG src=" 画像のアドレス " width="150" style="filter: Blur(Strength=20,Direction=135) " >

ＴＯＰへ

６．特定の色を透明にします

使う要素 ： style="filter: chroma(color=) "

『 color= 』には透明にしたい色を指定します。

実際にサンプルで使ったタグは下のようになります。

< IMG src=" 画像のアドレス " width="110" height="88" style="filter: chroma(color=#d2d3d8) " >

サンプルであげた画像はわかりづらいのですが、特定の色だけが透明になり、

６番の黒くなっている部分がその効果です。背景が透けて見えるでしょ♪

下にわかりやすい例をあげます。

元の画像	chroma(color=#febcde)

[注意] ：わかりやすくするため背景へ色をつけています。

ＴＯＰへ

７．８．画像を上下反転または、左右反転します

使う要素 ： style="filter: flipv() " 、 style="filter: fliph() "

『 flipv() 』は画像を 上下反転 させ、

『 fliph() 』は画像を 左右反転 させます。

実際にサンプルで使ったタグはそれぞれ下のようになります。

７番： < IMG src=" 画像のアドレス " width="110" height="88" style="filter: flipv() " >

８番： < IMG src=" 画像のアドレス " width="110" height="88" style="filter: fliph() " >

元の画像
flipv()	fliph()

ＴＯＰへ

９．グレースケールで表示します

使う要素 ： style="filter: gray() "

『 gray() 』は画像をグレースケール（白黒）表示させます。

変更前の画像	変更後の画像	使用タグ
		< IMG src=" 画像のアドレス " width="150" style="filter: gray() " >

ＴＯＰへ

10．色（色相・明度・彩度）を反転して表示します

使う要素 ： style="filter: invert() "

色を反転することが出来ます。

変更前の画像	変更後の画像	使用タグ
		< IMG src=" 画像のアドレス " width="150" style="filter: invert() " >

ＴＯＰへ

11．波状にします

使う要素 ： style="filter: wave() "

『 () 』の中には以下の物が入ります。

設定値	説明
Add	元のイメージを上書き表示するか否かを指定します。設定値は0(合成無し)と1(合成有り)となります。デフォルト値は0です。
Fleq	ウェーブの数を指定します。デフォルト値は3です。
LightStrength	ウェーブに当たる光の強さを指定します。設定値は0(光強度最低)～100(光強度最高：デフォルト)です。
Phase	ウェーブの開始場所を指定します。設定値は0～100で、デフォルト値は0です。
Strength	ウェーブのゆれ具合を指定します。設定値は1～で、デフォルト値は5です。

元の画像
add=0	add=1	freq=5

lightstrength=50	phase=90	strength=3

[注意] ：わかりやすくするため背景へ色をつけています。

これらの要素は『 , （カンマ）』で組み合わせられます。

変更前の画像	変更後の画像	使用タグ
		< IMG src=" 画像のアドレス " width="150" style="filter: Wave(Add=0,Fleq=5,LightStrength=40, Phase=0,Strength=7) " > （タグは一行に繋げて下さい）