サイト職人スタッフブログ

今ホームページで使っている画像を新しく変更したいと思ったことはありませんか。でも、「画像の更新なんて難しそう…」や、「画像の変更には、コーディングといった高度な知識が必要なのでは？」と思う方も少なくないでしょう。

そんなことはありません。IT分野について高度な知識がなくても、ホームページ上に画像が表示される仕組みさえ分かれば差し替え自体はそんなに難しいことではありません。今回は、今ホームページ上にある画像の差し替え方法についてお話します。
 

ホームページ上の画像を変更する前に！HTMLとは？

本気で説明すると膨大な時間を要しますが、必要な点だけ簡単にお話します。ホームページを表示しているファイルは、HTMLと呼ばれるファイルです。その中には様々な情報があり、例えば「ここにこの画像を表示して」という指示が書かれています。

つまり、HTMLが表示を指示している「この画像」さえ差し替えてしまえば、HTMLファイルは変更しなくて良いのです。
 
https://www.site-shokunin.com/index.html
 

HTMLに対する理解を深めるために、上記の「SEOに強いテンプレート」の画像を差し替えると仮定として説明します。まずは、「サイト職人CMSが選ばれる理由」という大見出しの左下に、「SEOに強いテンプレート」に関する画像が存在することを確認してください。

その画像を右クリックします。ただし、ホームページによっては右クリックを禁止されていることもあります。ここでは、画像ファイルとサイズ情報を正確に取得していきます。ブラウザごとの手順は、下記のとおりです。

Google Cromeのケース

画像を別タブで表示します。別タブで画像のみが表示され、タブにカーソルを合わせるとサイズも分かります。名前を付けて画像を保存しましょう。

Firefoxのケース

画像の情報を別タブで表示します。別ウィンドウが開いて、画像の情報が表示されます。名前を付けて画像を保存します。

Edgeのケース

名前を付けて画像を保存します。

これでファイル名が分かりました。
例） img_reason01.jpg
 

名前を付けて保存した画像をエクスプローラに表示します。右ボタンクリックで、プロパティを選択、詳細タブを選んでください。画像の詳細が分かります。
 

例） 横が240pixel、縦が153pixel
 

HTMLを確認する

ホームページ上で右クリックを行ってソースを表示します。

 

その中で、先ほど確認したファイル名を検索してください。検索方法は「ctl ＋ f」でダイアログが開くのでそこにファイル名を入力して Enterキー を押下します。

例）

画像が、img フォルダにあるということが分かります。また、表示サイズは横240pixel、縦153pixelということも分かります。

また、

の場合は、htmlファイルと同じフォルダにあるということが分かります。サイズの大きさが指定されていないので、原寸のままということも分かります。

他にも、画像ファイルが保存されているフォルダと、表示する際の縦横サイズが分かりました。
 

サーバにアップロードする

上書きしてなくなっては困るファイルは、「名前を付けて画像を保存」でダウンロードしたファイルの名前を変えておきましょう。保存することなく上書きをしてしまうと、後で必要になっても取り戻せなくなります。

名前を付けて保存した画像をエクスプローラに表示します。右ボタンクリックで、「名前の変更」を選択してください。

いよいよ、差し替えたい画像のアップロードです。

新しく用意した画像ファイルを、今の画像ファイルと同じ名前に変更して、今と同じフォルダにアップロードします。お使いのCMSやFTPツールを使ってアップロードしてください。

大事なことは「同じファイル名、同じ縦横サイズ、同じフォルダ」の3原則をしっかりと守ることです。この3原則を守っていないと、ホームページ上で表示に異変が生じる可能性がありますので注意してください。

尚、サイト職人の場合は、ページ編集画面の画像アップロードからアップロードするだけです。同じ名前のファイルがありますので、「上書きしてよいですか？」と聞かれますが、そこは「はい」で進んでください。
 

まとめ

ホームページ上で使用中の画像を簡単に差し替える方法についてお話しました。「季節に合わせて画像を差し変えたい。」や「緊急で画像を差し替えたい。」など、様々な事情で画像を差し替えたくなることがあるでしょう。

そんな時はぜひ、ご紹介した方法でチャレンジしてみてください。サイト職人を使用すれば、HTMLにそれほど詳しくなかったとしても、簡単な操作で好みの画像に変更できます。なお、他所のホームページにある画像を勝手に利用するのは、著作権上NGなので十分にご注意ください。