イメージ①(黄色の枠の中の画像)の設定

目次

1.イメージ①(黄色の枠の中の画像)

黄色のボックスの中にイメージ①の画像があります。

maptype_27
※クリックすると画像が大きくなります。

ここではイメージ①は「photoimg1.png」を使用しています。

maptype_28

2.画像(イメージ①)を表示するソースコード

index.phpをエディタで開くと、59行目あたりに「<div class=”fluid box_img”><img src=”img/photoimg1.png” alt=””/></div>」があります。
このコードがイメージ①のソースコードです。

maptype_25
※クリックすると画像が大きくなります。

3.イメージ①を別の画像ファイルに変える

「photoimg1.png」ではなく別の画像を設定してみましょう。
「image_1.jpg」を作ってその画像を指定してみます。

maptype_29
※クリックすると画像が大きくなります。

ファイルの中のコードを指定するファイル名に書き換えて上書き保存をします。

maptype_30

yaji

maptype_31

4.ワンポイントアドバイス

パソコン表示の時の画像の横幅は365pxになるように指定しています。それより大きなサイズの画像でも縮小されてきちんと表示されます。

maptype_32
※クリックすると画像が大きくなります。

上記を見てみると、「image_1.jpg」のサイズは、横:4000px 縦:2666pxです。

maptype_33

横:4000px 縦:2666pxの画像を使用していても、
パソコン・タブレット・スマホそれぞれきちんと縮小されて表示されます。
大きなサイズの画像でもちゃんと縮小されて表示されますが、
できればあらかじめ横幅365pxくらいに縮小しておいたほうが、データ容量も膨大になりません。

コメントを残す