MB-Support

パソコン初心者のサポートページ

透過 GIF 画像の作り方と作る意味 IrfanView No1

 透過画像を制作するためだけに使うにはもったいないソフトですが、今回は無償でダウンロード可能な IrfanView を使って、PNG形式の画像から透過 GIF を作成してみます。


ホームページの背景色に合わせて画像の背景色を設定すると、スタイルシートでホームページの背景色を変更した時に違和感のある画像表示となります。ボタンなどであるならば、逆に目立ってこれも良いと考えられますが、ホームページと画像の背景色を揃えたい場合、画像を作り直す必要があります。


背景色:白 背景色:赤


画像を透過GIFで背景を透明にしてしまえば、ホームページの背景色を変更しても、画像の背景色が透明なので、画像の背景色にホームページの背景色が反映されます。 この透過GIFを作れるソフトはいくつもありますが、ここでは IrfanView(アーファン(英語読み)、イーファン(制作者のドイツ語読み)、または、イルファン(制作者のドイツ語読み))を使って見ます。IrfanView は画像編集ソフトで、透過GIFだけのために存在するソフトではありません。 しかし、このページでは透過 GIF 作成のためだけに使います。英語版ですが、日本語化されたものを配布しているサイトもあります。透過 GIF を作成するためだけなら、どちらでも構いません。

本家 英語版

日本語版配布サイト



通常画像を使ったホームページのテスト

透過ではない画像をホームページに埋め込んだ場合、まず、ソフトウェアで画像を作成します。 ここでは、Windows に付属するペイントを利用してみます。



「ファイル(F)」→「名前を付けて保存(A)」を左クリック。



ここでは、あえて透過画像を作る事を前提に、PNG かビットマップ形式で保存します。 もちろん、ホームページで利用する画像形式としては、ビットマップは不適切かも知れません。ここでは、PNG 形式で保管します。



テストとして、名前を「holmes」としました。これをデスクトップに保存します。「保存(S)」ボタンを左クリックします。



デスクトップに「holmes.png」が保存されました。 Windows インストール初期状態では、拡張子「.png」が表示されません。 フォルダーの管理で拡張子を表示する設定にする必要があります。

フォルダーオプション 拡張子を表示する方法



今作成した画像をホームページに埋め込んでみます。 デスクトップの何も無い所で右クリックして、「新規作成(R)」→「テキスト ドキュメント」を左クリックします。



画像表示タグをテキストドキュメントに記述します。 テキストドキュメントと同じく、表示する画像はデスクトップに存在するため、相対パスは「./画像ファイル名 」となります。


<img src="./holmes.png">

「ファイル(F)」→「上書き保存(S)」を左クリックして、テキストドキュメントを保存します。



テキストドキュメントからホームページファイルに変更します。 デスクトップのテキストドキュメントを右クリックして、「名前の変更(M)」を左クリックします。



ここでは、「home.html」と名前を付けてみます。 拡張子を変更するので、警告が表示されます。「はい(Y)」ボタンを左クリックします。



拡張子を「txt」から「html」に変更した事で、アイコンも変更されました。 これを右クリックして、「プログラムから開く(H)」→「Internet Explorer」を左クリックします。



デスクトップに保管した「holmes.png」を、ホームページに表示する事ができました。 背景色が白であるならば、これでも良いと思われます。



拡張子を「txt」から「html」に変更した事で、アイコンも変更されました。これを右クリックして、「プログラムから開く(H)」→「Internet Explorer」を左クリックします。



今度は、ホームページの背景色を変更してみます。「home.html」を右クリックして、「プログラムから開く(H)」→「メモ帳」を左クリックします。



Body タグに背景色を指定します。 本来はスタイルシートで指定しますが、ここでは手っ取り早く Body タグに bgcolor red を指定しました。 これで背景色が赤になるはずです。画像表示タグに関しては、何も変更していません。


<html>
<head>
<title>my home page</title>
</head>
<body bgcolor="red">
<img src="./holmes.gif">
</body>
</html>

「ファイル(F)」→「上書き保存(S)」を左クリックして、変更内容を保存します。



既に開いているブラウザで、キーボードの「F5」キーを押し、表示を更新します。 背景色が赤くなりましたが、画像の部分はどうでしょうか? 背景色が白に設定されている「holmes.png」では、背景色が赤いホームページでは浮き出てしまいます。 この違和感を無く方法として、画像を透過してみます。 次のページへ続きます。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項