本文にあるサンプル画像の画像を変えたい
当サイトでは本文の中にサンプル画像を配置しているので、サンプル画像をオリジナル画像に変えてね！
-
注意！
- 本文内の画像の最大幅は『500ピクセル』です。
（※500ピクセルより大きい画像を入れるとレイアウトが崩れてしまいます）
（※テンプレートによっては最大幅が小さいものがあるのでご注意下さい）
Step1
オリジナルの画像を編集するには画像編集ソフトが必要になります。
【例 】として、当サイトでは『Adobe Photoshop』で編集します。
（※変更などのやり方は各画像編集ソフトでお調べ下さい）
サンプル画像にはサイズが表示されてるよ！イメージとして大きさを知ることができるよ。
Step2
文章と画像のバランスを考えて自分の好きなサイズに変更してね。
当サイトでは、『200×150ピクセル』にしました。
（※幅は500ピクセルより小さい画像であれば比率は自分の好きなサイズでOKです）
画像名は自分でわかる名前にしてデスクトップへ保存。
（※ここではデスクトップへ保存します）
Step3
オリジナル画像をフォルダへしまおう！
HTMLと同じフォルダ内に『my_images』フォルダがあります。
『my_images』フォルダを開くと、本文内で使われているサンプル画像が入ってるよ。
『my_images』フォルダには本文内で使いたいオリジナル画像を入れてね！
画像をしまうには、デスクトップに保存したオリジナル画像の上でマウスの左ボタンを押したまま、『my_images』フォルダの中へ移動して左ボタンを離します。
これでオリジナル画像をしまうことができたよ！
Step4
HTML文章の画像名を変更するのを忘れないでね！
（※同じ画像名の場合はHTML文章を変更しなくて大丈夫です）
HTML文章の開き方がわからない場合は『文章の編集』をみてね。
ちょっと難しいかもだけどがんばって画像名の変更しよう！
- HTML文章の画像を表示させる文章は
<img src=” ” alt=” ”>
src=” ”の” ”の中に画像がしまわれてるフォルダと画像名
alt=” ”の” ”の中に代替テキスト
（※代替テキストとは、画像ファイルの読み込みに失敗した場合に表示テキストとして表示。また、画像の上にマウスポインタを重ねると表示されるテキストです）
今回はフォルダ名『my_images』の中にある『picture1.jpg』という画像を自分の変更したい画像名へ編集します。ここでは『choco.jpg』と編集し、『alt=” ”』に『愛犬チョコ』と入力します。
『alt=” ”』に『愛犬チョコ』と入力することで、web上の画像にマウスポインタを重ねると以下のように表示されるよ。
一つ目の画像の後ろにある『<br />』と、もう一つのサンプル画像はいらないので削除してみよう。
文章を削除するには、編集したい文章の末尾を選択し、不要な文章を『Backspaceキー』を使用して削除します。
- 『<br />』は改行を意味しているよ。
Step5
編集が終わったら、『ファイル』の『上書き保存』をクリック。『index.html』をダブルクリックして画像が変わったか確認しよう。
無事に変更出来たかな？好きなオリジナル画像をどんどん本文に入れてオリジナルホームページを作ろう！
- 他の編集をやりたい方は『編集方法』へ
