テンプレートに入っているサンプル画像。
STEP 02
テンプレートの画像を変更する
写真の差し替えには「同じファイル名で上書きする方法」と「HTMLで別ファイル名を指定する方法」の2つがあります。初心者には前者が最も簡単です。
1. 画像は images フォルダに入っています
Template 001では、写真は次のフォルダにまとめています。
template001-simple-business/images/例えば、トップのメイン画像は main.jpg、会社紹介用は about.jpg です。
初心者向け： 最初は画像ファイル名を変えず、同じ名前の写真に差し替える方法が最も簡単です。
2. 一番簡単：同じファイル名で差し替える
- 自分で使いたい写真を用意します。
- 写真の名前を
main.jpgにします。 - テンプレートの
images/main.jpgと入れ替えます。 - ブラウザを再読み込みします。
同じファイル名ならHTMLを変更しなくても表示が変わります。
3. 別のファイル名を使う場合
ファイル名を office.jpg などにしたい場合は、HTMLの src を変更します。
変更前HTML
<img src="images/main.jpg" alt="会社のイメージ">変更後HTML
<img src="images/office.jpg" alt="会社のイメージ">注意： ファイル名の大文字・小文字も区別されるサーバーがあります。
Office.jpg と office.jpg は別物として扱われることがあります。4. alt（代替テキスト）も写真に合わせて変更する
alt は、画像が表示できない時や読み上げ機能で使われる説明文です。写真を変えたら内容も合わせます。
altの例about.html
<img src="images/about.jpg" alt="オフィスで打ち合わせをするスタッフ">「画像」「写真1」のような曖昧な言葉より、画像の内容を短く説明する方が親切です。装飾目的で意味を持たない画像は、テンプレートの指定に従います。
5. 画像サイズと縦横比を意識する
画像が極端に縦長・横長だと、切り抜かれ方が変わることがあります。元画像に近い縦横比で用意すると安定します。
- メインビジュアル：横長の写真がおすすめ
- 実績カード：同じ縦横比の写真で統一
- 人物・店舗写真：重要な被写体を中央付近に置く
容量にも注意： 高解像度の写真をそのまま何枚も使うとページが重くなります。必要以上に大きい画像はWeb向けに縮小してから使うと快適です。
6. 画像が表示されない時の確認
ファイルの場所が違う
images/main.jpg と書いてある場合、HTMLファイルから見て images フォルダの中に main.jpg が必要です。
拡張子が違う
main.jpg を main.webp に変更した場合は、HTML側も main.webp に変更します。
日本語ファイル名や空白を使っている
使えないわけではありませんが、初心者のうちは shop-photo.jpg のような半角英数字とハイフンで統一するとトラブルが減ります。
7. 保存後のチェック
- 画像がすべて表示されている
- 写真が不自然に切れていない
- ファイル名とHTMLの指定が一致している
- altの内容が写真と一致している
- スマートフォン表示でも被写体が見切れていない
NEXT STEP
STEP 3へ →次は、サイト全体の色を変更します。
Template 001はCSS冒頭の変数を変えるだけで、主要な配色をまとめて変更できます。