画像の変更

次に、画像を変更します。画像の変更は、次の4ステップで行います。

ここでは、テンプレートの画像と同じ大きさの画像に変更する、と仮定して解説します。

1.テンプレートの画像の大きさを調べる

2.新しい画像の大きさを、テンプレートの画像の大きさに合わせる

3.新しい画像を、画像フォルダに入れる

4.新しい画像に変更する

【1.テンプレートの画像の大きさを調べる】

まず、変更したいテンプレートの画像の大きさを調べます。

ここでの「大きさ」とは、画像の容量ではなく、幅と高さのことです。

画像の大きさを調べる方法は多くあります。ここでは一例を説明します。

■Macromedia Dreamweaver MXの場合

Macromedia Dreamweaver MXの場合は、変更したい画像をダブルクリックしてください。

すると、「イメージソースの選択」というウインドウが開きます。その中に、画像の大きさが記載されています。

画像の大きさを調べる1

■IBM ホームページビルダー7の場合

IBM ホームページビルダー7の場合は、変更したい画像を選択(クリック)してください。

すると、画像がピンク色の枠に囲まれ、ホームページビルダーのウィンドウ枠左下に選択した画像の大きさが表示されます。

画像の大きさを調べる2

また、編集ソフトを使用せずに、画像のプロパティから大きさを調べる方法もあります。ダウンロードしたフォルダ内の、画像が入っているフォルダ(多くの場合は「images」という名前です)の中から、変更前の画像を見つけます。

その画像を右クリックして、「プロパティ」の「概要」を見ると、「幅」と「高さ」が記載されています(Windows XPの場合)。

【2.新しい画像の大きさを、テンプレートの画像の大きさに合わせる】

画像の大きさを確認したら、新しい画像の大きさを、画像編集ソフトを使ってテンプレートの画像の大きさに合わせてください。

画像の大きさの変更の方法は、各画像編集ソフトのマニュアルを見てください。基本的な作業であるため、すぐに編集することが可能です。

画像の大きさを合わせる

【3.新しい画像を画像フォルダに入れる】

画像の大きさを変更したら、その画像をダウンロードしたフォルダの中の画像が入っているフォルダ(多くの場合は「images」という名前です)に入れます。

【4.新しい画像に変更する】

画像の準備が整ったら、いよいよ画像を変更します。

■Macromedia Dreamweaver MXの場合

Macromedia Dreamweaver MXの場合は、変更したい画像をダブルクリックします。

すると、「イメージソースの選択」というウィンドウが出てくるので、その中から、先程フォルダに入れた新しい画像を選択し、「OK」をクリックします。すると、画像が変更されます。

■IBM ホームページビルダー7の場合

IBM ホームページビルダー7の場合は、変更したい画像を右クリックして、「属性の変更」を選択してください。

すると、下図のような「属性ウィンドウ」が出てくるので、「画像」タブ内にある「ファイル」項目の設定を変更します。

変更の方法は以下の通りです。

  1. 参照をクリックする。
  2. ファイルを選択する別ウィンドウが開くので、その中から新しい画像を選択する。
  3. すると、下図のように、新しい画像のファイル名が設定さる。
  4. 設定されたことを確認し、「属性ウィンドウ」下部の「OK」をクリックする。

新しい画像に変更する

以上の手順で画像を変更していきます。大きさの異なる画像に変更する場合も、画像サイズ変更の手順が省かれるのみで、ほぼ同じ作業で変更が可能です。その際、画像の大きさに応じて文字の幅などを変更する必要がある場合があります。

その場合は、各HTML編集ソフトのマニュアル、又は「HTML」に関する書籍等をご覧下さい。


Comments are closed.