JTrim 005 / スタイルシートによる「ぼかし」 簡単なアンケートです。ご協力ください。

Enjoy JTrim > JTrim Lab > ぼかし >
関連項目を見る >>   次のページへ >>
ご質問は 画像加工質問掲示板/Help Forum へどうぞ!

画像:紫式部(tadonさん提供)

JTrimでは四角の形にぼかすことはできますが,丸や楕円にはできませんね。
ここではスタイルシートによる「ぼかし」をやってみましょう。まずはJTrimのグラデーションとフェードアウトを使った四角ぼかしです。
(注)IE系のブラウザ以外では、ぼかし表示ができない場合があります。(Mozilla Firefox では表示されませんでした。)





元の画像 JTrimによるボカシ加工後の画像
元の画像 加工後の画像


■ スタイルシートによる「ぼかし」
ここではソフトを使わずに,スタイルシートで丸くぼかしたものを作りました。これを画像にしたい場合はPrint screenで 取り込めば出来ますね。(^^♪
スタイルシートの記述は下記のソースをご覧ください。ソースをコピーしてメモ帳に貼って,適当な名前を付けて保存(拡張子は.html) すればOKです。これで画像を表示してPrint screenで取り込めば,丸くぼかした画像の出来上がりです。(^^♪  詳しくは↓をご覧ください。


スタイルシートによる効果(背景:白  style=2) スタイルシートによる効果(背景:黒) style=2


<スタイルシートによるHTMLファイルを作ります。>
■新規にフォルダを作ります。(「kakou」フォルダとでもしましょう。)
■その中にぼかしたい画像ファイルを入れます。(ここでは「shikibu.jpg」サイズ350×262とします。)
■<スタイルシートによるソース>をコピー(左クリックしながらドラッグ→右クリックメニューでコピーを選択)して,Windowsに標準でインストールされているメモ帳に貼り付けします。
■「ファイル」→「名前を付けて保存」→適当なファイル名と拡張子「.html」としてkakouフォルダに保存します。(ここでは「gazou.html」とします。)
■IEアイコンの「gazou.html」をダブルクリックで開きます。
■「表示」→「ソース」または「画面右クリック」→「ソースの表示」でソースを表示します。
■「画像ファイル名+拡張子」を削除して「shikibu.jpg」と入力します。
■「横のサイズ」を削除して「350」,同じく「縦のサイズ」を削除して「262」と入力します。
■「ファイル」→「上書き保存」で保存し,メモ帳を閉じます。
■IEの画面になりますので「更新」ボタンをクリックします。いかがですか!楕円形にぼけたでしょう!
※メモ帳にソースをコピーしたときに画像ファイル名やサイズを変更してHTMLで保存しても同じですが,ここでは「丁寧に」回り道をしてみました。
※styleの値を1や3にしてみて,ぼかしの変化を確認してください。
※background-color:#FFFFFF の#FFFFFF(白)を変えることによって背景色が変わります。(たとえば黒:#000000)
※画像サイズは実際のサイズでなくともいいですよ。同じ比率で大きくすることもできます。(たとえば横:640,縦:480 にしてみてください。)


<次はプリントスクリーンにより画像にします。>
■「gazou.html」をダブルクリックで開き,画像を表示した状態でキーボードの「Print Screen」キーを押します。
■Windowsに標準でインストールされている「ペイント」を立ち上げます。
■「編集」→「貼り付け」→→「ファイル」→「名前を付けて保存」(ファイル名:たとえば「bokashi1.jpg」ファイルの種類「JPEG」)
■Office標準の「Microsoft photo editor」などで「bokashi1.jpg」を開きます。
■点線四角の「選択」をクリックして必要な部分を選択状態にします。
■「編集」→「切り取り」→→「編集」→「新しいイメージとして貼り付け」
■「ファイル」→「名前を付けて保存」(ファイル名:たとえば「bokashi2.jpg」ファイルの種類「JPEG」)
  ※メッセージ「bokashi1.jpgは変更されています。保存しますか」に対しては「いいえ」(これは切り取った後の画像のことです。)
■これでjpg画像の出来上がりです。「Print Screen」キーを使うとモニタに表示されたものを画像にできますから便利ですね。(^^♪
※「ペイント」ではなく,最初から「Microsoft photo editor」に貼り付けてもいいです。もちろん「JTrim」でも大いに結構です。(^^♪


<スタイルシートによるソース>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> </title>
<style type="text/css">
<!--
body{ background-color:#FFFFFF; }
-->
</style>
</head>
<body>
<br><br>
<div align="center">
<img src="画像ファイル名+拡張子" width="横のサイズ" height="縦のサイズ" style="filter:alpha(opacity=100,style=2)">
</div>
</body>
</html>



■「style=数字」の数字を1〜3に変えると次のような効果が得られます。このように「ぼかし」に関しては,画像加工ではなく, スタイルシートでも可能です。

スタイルシートによる効果(背景:白  style=1) スタイルシートによる効果(背景:黒  style=3)


■二段目のスタイルシートでぼかしたものを,それぞれ print screen で画像化したものです。 (bmpで取り込んでから切り抜いて,その後jpgにします。)ついでにJTrimでセピア色にしてみました。

スタイルシートぼかしを画像化(背景:白) スタイルシートぼかしを画像化(背景:黒)
背景:白 セピア 背景:黒 セピア


◆このページは Enjoy JTrim 内の「JTrim Laboratory 〜 初心者向け実験室」の一つです。

お立ち寄り記念に簡単なアンケートへご参加ください。 こちらからどうぞ!



to Page top