基本画像の変更

テンプレートにある基本画像を自分の画像に変更したい場合はこちら!
(※画像の大きさはテンプレートにある画像と同じ大きさで設定とした場合)

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』に関する参考書などをご覧になった上で変更して下さい。
    (※大きさの違う画像を設定したいお問い合せはご遠慮下さい)