基本画像の変更
テンプレートにある基本画像を自分の画像に変更したい場合はこちら！
（※画像の大きさはテンプレートにある画像と同じ大きさで設定とした場合）
Step1
まずはテンプレートにある画像の大きさを確認！
（※確認方法は幾通りありますが一例を紹介します）
Web上で変更したい画像の上で、マウスの右ボタンをクリックして『プロパティ』を開いてね。
『プロパティ』画面が開くので、『大きさ』を確認。
ここでは『180×150ピクセル』の画像が使われています。
Step2
画像編集ソフトを使用して画像のサイズ変更してね。
（※画像編集ソフトが必要になります。変更などのやり方は各画像編集ソフトでお調べ下さい）
【例 】として、当サイトでは『Adobe Photoshop』で編集してみます。
変更したい画像のサイズを確認。
『480×400ピクセル』だったので、『画像解像度』で『180×150ピクセル』へ変更。
（※サイズの比率が違う場合は切り抜きするか各画像編集ソフトでお調べ下さい）
画像名を『flower』にしてデスクトップへ保存。
Step3
サイズを変更した画像をフォルダ内へしまおう！
編集したHTMLファイルと同じフォルダ内に『images』フォルダがあります。
『images』フォルダを開くと、フォルダ内にはテンプレートで使われている基本画像が入ってるよ。
変更した画像をこのフォルダ内へしまってね！
画像をしまうには、サイズ変更した画像の上でマウスの左ボタンを押したまま、『images』フォルダの中へ移動して左ボタンを離します。
これで変更したい画像をしまうことができたよ！
Step4
最後にHTML文章の画像名を変更するのを忘れないでね！
（※同じ画像名の場合はHTML文章を変更しなくて大丈夫です）
HTML文章の開き方がわからない場合は『文章の編集』をみてね。
ちょっと難しいかもだけどがんばって画像名の変更しよう！
- HTML文章の画像を表示させる文章は
<img src=” ” alt=” ”>
src=” ”の” ”の中に画像がしまわれてるフォルダと画像名
alt=” ”の” ”の中に代替テキスト
（※代替テキストとは、画像ファイルの読み込みに失敗した場合に表示テキストとして表示。また、画像の上にマウスポインタを重ねると表示されるテキストです）
今回はフォルダ名『images』の中にある『photo.jpg』という画像を自分の変更したい画像名へ編集します。ここでは『flower.jpg』と編集し、『alt=” ”』に『ガーベラ』と入力します。
『alt=” ”』に『ガーベラ』と入力することで、web上の画像にマウスポインタを重ねると以下のように表示されるよ。
編集が終わったら、『ファイル』の『上書き保存』をクリック。
Step5
変更したい画像をフォルダにしまって、HTML文章を編集したら画像が変わったか確認してみよう！
変更したHTMLファイル（ここでは『index.html』）をダブルクリックしてね。
元の虹の画像がガーベラの画像に変わってるので無事に画像の編集ができたよ！
-
注意！
- 画像のしまう場所を間違えると表示されないので注意して下さい。
- 保存した画像の拡張子『gif』『jpg』と同じようにHTML文章も変更して下さい。
- 大きさの違う画像は変更することも可能ですが、レイアウト設定との関係で大きさの違う画像を設定すると全体が崩れてしまうので、他のHTLM文章及びCSSを変更しなくてはなりませんので『HTML』『CSS』に関する参考書などをご覧になった上で変更して下さい。
（※大きさの違う画像を設定したいお問い合せはご遠慮下さい）
- 他の編集をやりたい方は『編集方法』へ
