まりな
カスタマーサポート公式キャラクターのまりなです！ 一緒にがんばりましょう！
目次
ホームページに画像が表示されるしくみ・関連用語
まず前提となる知識として、ホームページに画像が表示されるしくみを押さえておきましょう。ここでは、画像表示にまつわる関連用語を解説していきます。
なお、ホームページ公開までの流れがわからない方や、基礎知識を確認したい方は、こちらの記事をあらかじめご確認いただくことをおすすめします。
>>［さくらのホームページ教室］【初心者】ホームページ公開までの流れを説明します
>>［さくらのホームページ教室］レンタルサーバー用語集
FTPクライアントソフト（ファイル転送ソフト）
ホームページに画像を表示するには、「FTPクライアントソフト」などを使い、パソコン上にあるデータをサーバーにアップロード（転送）する必要があります。
FTPクライアントソフトとは、Webサーバーとパソコンの間でファイルを送受信するためのソフトで、Windowsなら「FFFTP」「WinSCP」、Macなら「FileZilla」などが有名です。
また、さくらのレンタルサーバには、コントロールパネル上に同様の操作が可能な「ファイルマネージャー」が標準装備されています。ただし、転送できる1ファイルあたりの最大容量に制限がある（25MB以下まで）ため、FTPクライアントソフトを導入しておくとよいでしょう。
ファイルマネージャーの機能詳細や利用方法については、こちらのページをご確認ください。
>>［サポートサイト］ファイルマネージャーを利用したい
また、WordPressを利用する場合、FTPクライアントソフトがなくても画像を転送することは可能です。しかし、なんらかの理由でWordPressの管理画面にログインできなくなった場合や、WordPressをきちんとカスタマイズして使いたい場合には、FTPクライアントソフトが役に立つこともあります。ファイルのバックアップやテーマのカスタマイズなど、便利になる場面が出てきますので、最初に導入・設定しておくことをおすすめします。
まりな
FTPクライアントソフトの設定方法について、くわしくはこちらのページをご確認ください。
>>［サポートサイト］ファイル転送ソフトを設定したい（ライト・スタンダード・プレミアム）
>>［サポートサイト］ファイル転送ソフトを設定したい（ビジネス・マネージド）
パス（絶対パス／相対パス）
パスとは、一言でいうと「ファイルやフォルダの場所を指し示す経路」であり、ファイルやフォルダがコンピュータ内のどこにあるのかを指し示す住所のようなものです。
パスと似た概念に「ドメイン」があります。どちらも場所を指し示す住所としての役割を持っていますが、それぞれ指し示す対象が異なります。パスとドメインの違いは以下のとおりです。
| 名称 | 概要 |
|---|---|
| パス | 「ファイルやフォルダ」が「コンピュータ内」のどこにあるのかを指し示すもの |
| ドメイン | 「サーバー」が「インターネット上」のどこにあるのかを指し示すもの |
また、パスには「絶対パス」と「相対パス」という2種類の記述方法があります。それぞれ、どこを基準にファイルやフォルダの場所を指し示しているかが異なります。絶対パスと相対パスの違いは以下のとおりです。
| 名称 | 概要 | パスの記述例 |
|---|---|---|
| 絶対パス | コンピュータ内のフォルダ構成の頂点（ルート）から、目的となるフォルダやファイルまでの経路を省略することなく記述する方式 | https://rs.sakura.ad.jp/column/wp-content/uploads/2021/06/icon_marina1.png /home/アカウント名/www/column/wp-content/uploads/2021/06/icon_marina1.png |
| 相対パス | 現在の位置（表示したいページ）を基準として、そこから目的となるフォルダやファイルまでの経路を記述する方式 | ../uploads/2021/06/icon_marina1.png ※同じファイルでも、表示ページによってパスが異なる |
imgタグ（src属性／alt属性）
HTMLタグの一種である「img」は「image（イメージ）」の略で、画像を表示するタグです。imgタグの「src属性」は記述が必須であり、表示する画像のファイル名を、絶対パスまたは相対パスで指定する必要があります。
- 記述例
<img src=”https://rs.sakura.ad.jp/column/wp-content/uploads/2021/06/icon_marina1.png”>
「alt属性」は、ページ上で画像が表示されない場合に表示される代替テキストを指定するものです。記述は必須ではありませんが、アクセシビリティ対応やSEOとして一定の効果があるとされています。
- 記述例
<img src=”https://rs.sakura.ad.jp/column/wp-content/uploads/2021/06/icon_marina1.png” alt=”まりなアイコン”>
キャッシュファイル
「キャッシュファイル」とは、ブラウザなどで表示したWebサイトのデータを一時的にコンピュータに保存したファイルのことです。
キャッシュファイルが保存されることで、より速くデータを表示できます。インターネット上のデータではなく、コンピュータに保存されたキャッシュファイルのデータが参照できるようになるためです。
これによって、ブラウザでキャッシュファイルを保持していた場合、Webサイトが更新されていてもキャッシュファイルのデータが優先され、更新されたはずの新しい内容が表示されなくなるケースがあります。
そういった場合、ブラウザのキャッシュファイルを削除して、再度Webサイトを表示しなおすことで新しい内容が表示されるようになります。
画像が表示されない原因と対処法とは？ 前置きが長くなりましたが、ここからは「サーバーにデータを転送したにもかかわらず、画像が表示されない」という場合の、考えられる原因や対処法について解説していきます。
画像が表示されない原因と対処法とは？
前置きが長くなりましたが、ここからは「サーバーにデータを転送したにもかかわらず、画像が表示されない」という場合の、考えられる原因や対処法について解説していきます。
まりな
実際に、カスタマーサポートに寄せられることが多いケースを取り上げていますので、ぜひ参考にしてくださいね。
原因1：データを転送したフォルダが異なっている
データを転送したフォルダが異なっている場合は、転送したデータは表示されません。念のため、データを転送したフォルダに間違いがないかを確認してみてください。
この場合、正しい転送先フォルダに画像やWebデータを転送していただくことで解決します。通常、さくらのレンタルサーバの転送先フォルダ（※1）は「/home/アカウント名（※2）/www」です。
お客さまから「データを転送したのにWebページが表示されない」とご相談いただく際も、「/home/アカウント名/」直下にデータを転送していることが原因となっているケースが多くあります。まずは正しいフォルダに転送できているかどうかを調べてみてください。
※1 コンテンツにより転送先フォルダは異なる場合があります。
※2 アカウント名は、さくらのレンタルサーバのお申し込み時にご自身で決めていただいた任意の文字列です。
原因2：転送した画像データのファイル名が、Webサイトデータの記述内容と異なっている
転送した画像データのファイル名が、Webサイトデータ（HTMLファイル）の記述と異なっていないかをご確認ください。
- 大文字と小文字は正しく記述されていますか？
- 半角と全角は正しく記述されていますか？
- 日本語のファイル名になっていませんか？（日本語のファイル名は正しく表示されないため、半角英数字のファイル名に変更しましょう）
ファイル名が異なっていた場合は、正しいファイル名に変更して再度転送しましょう。
原因3：src属性で指定したファイルパスが間違っている
imgタグのsrc属性で指定しているファイルパスが間違っている場合があります。指定したファイルパスが、表示したい画像のファイルパスと合致しているか確認してみてください。
もし間違っていた場合は、src属性のファイルパスを正しいパス名に変更して、再度転送しましょう。
原因4：Webサイトを確認しているブラウザが、変更前の情報（キャッシュファイル）を読み込んで表示している
利用しているブラウザが、古い情報を読み込んで表示させている場合があります。一度ブラウザのキャッシュ情報を削除してから、Webサイトをご確認ください。なお、キャッシュの削除方法につきましては、利用ブラウザごとに異なりますので、ご自身でご確認ください。 または手軽な方法として、普段使っていない別のブラウザで試してみるというのも有効です。
まりな
無事に画像は表示できましたか？ Webサイトの画像について知りたい方は、こちらの記事もおすすめですよ♪
