画像加工メニューリスト

JTrim 040 / 壁紙のあるホームページにフェードアウトしたい

Enjoy JTrim > JTrim Lab > フェードアウト >
関連項目を見る 　<< 前ページへ 　次のページへ >>
ご質問は 画像加工質問掲示板/Help Forum へどうぞ！

JTrimでぼかし加工（フェードアウト）した画像をホームページにアップするときは、そのホームページと同じ背景色に 合わせてJTrimで加工すれば問題ありません。しかし、貼り付けるホームページが壁紙画像を使用していた場合はどうしましょう。
普通のフェードアウト加工では、壁紙とは同化しません。 こんな感じです。
かと言って、スタイルシートでのフェードアウトでは、ブラウザによっては反映 されないものもあります。（いま大人気の Mozilla Firefox では反映されません。）
ここでは、そのヒントをお届けします。(^^♪

＜No.1＞
まずはじめに、実際にホームページで使用する壁紙画像と、フェードアウトして使う画像を準備します。
次のようなHTMLファイル(gazou.html としましょう）を作ります。（下記のソースをメモ帳などのエディタで作成し、HTML形式で保存すればOKですから コピーしてお使いください。） 「横のサイズ」と「縦のサイズ」をピクセルで指定することにより、大きさを変えることができます。
なお、このHTMLファイルと壁紙ファイル、フェードアウトする画像ファイルは同じディレクトリ（フォルダ）に置いてください。 （別でもかまいませんが、ソースの記述が変わってきます。）
このようになりましたね！(^^♪ 　　こんな感じにもなります。白系壁紙　　黒系壁紙
＜スタイルシートによるソース＞　以下をコピペしてください。

<!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-image:url(壁紙画像ファイル名＋拡張子);background-repeat: repeat }
-->
</style>
</head>
<body>
<br><br>
<div align="center">
<img src="画像ファイル名＋拡張子" width="横のサイズ" height="縦のサイズ" style="filter:alpha(opacity=100,style=2)">
</div>
</body>
</html>

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

＜No.3＞
このように、HTMLでフェードアウトした画像をスクリーンショットで画像化したものが次の画像です。
どうですか？ 壁紙と同化しているでしょう。このように画像にしてしまえばブラウザによる表示の違いはありません。 ぜひご活用ください。