WordPress個別サポート

「ローカル環境でWordPressサイトを作成して、完成したらレンタルサーバーにアップ」

WordPressに限りませんが、よくある流れです。

ただし、あることに注意しないと、アップ後に「画像が表示されない!」と大騒ぎすることになります。

一部の投稿のアイキャッチ画像が表示されない

一部の投稿のアイキャッチ画像が表示されない

もちろん、ローカル環境では正しく画像が表示されています。

ローカル環境のテストサイトは問題なかったのに…

ローカル環境のテストサイトは問題なかったのに…

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

原因はファイル名の大文字と小文字の違い

この問題の典型的な原因は、ファイル名の大文字と小文字の違いです。

たとえば、画像には次のようなファイル名を付けるかもしれません。

  • test.jpg
  • TEST.jpg
  • test.JPG
  • TEST.JPG

大文字と小文字が混在していますが、ローカル環境のWindowsやMACでは、すべて同じファイルとして扱われます。つまり、作成したtest.jpgに対してTEST.jpgを参照するimgタグを記述しても問題なく表示できます。

ところが、制作が終わってサイトをアップしたレンタルサーバーの多くで使われるLinux系のコンピュータでは、ファイル名の大文字と小文字が区別されます。

WindowsやMACで大文字と小文字を区別せず、Linuxでは区別されるというのは、一般的なシステム構成の場合です。

test.jpgとTEST.jpgは別のファイルだとみなされるので、大文字と小文字を混同したimgタグは機能せず、「アップしたら画像が表示されない!」となります。

「名前を付けてファイルを保存」などでファイル名を入力する場合だけでなく、画像の一括加工、サイズ変換ツール、一括コピーなどでファイル名が大文字から小文字に置き換わっていたりする場合、この問題の原因になります。

「タグはすべて小文字で入力しよう」「ファイル名はすべて小文字で入力しよう」のような作法が逆に問題の原因になってしまう場合もあります。

このような「統一」を行う場合は、「ファイル名も小文字にする」も含めて統一する必要があります。

制作中にフォルダの中をのぞいてみないと気付かないでしょうから、アップして問題が起きてから気づくという、面倒なトラブルです。

作成中のサイトのuploadsフォルダをのぞいてみて、こんな感じにファイル名に大文字と小文字が混在していないか、一度チェックしてみてください。

ファイル名に大文字と小文字が混在している

ファイル名に大文字と小文字が混在している

「test.jpg」と「TEST.JPG」による問題の再現

「test.jpg」と「TEST.JPG」が混在することで発生する問題を再現してみましょう。

まずは、test.jpgを表示するだけのtest.htmlを作成します。

test.jpgとtest.html

test.jpgとtest.html

test.htmlの中身は次のようなHTMLタグです。

<html>
<head><title>画像が消えるページのテスト</title></head>
<body>
<img src="TEST.jpg" border="0">
<p>
<a href="TEST.HTML" target="_blank">機能しないリンク</a></p>
</body>
</html>

元のファイル名とは大文字と小文字が違っていますが、ローカル環境では問題なく表示されるはずです。

ファイル名の大文字と小文字の混在もローカルなら問題なし

ファイル名の大文字と小文字の混在もローカル環境では問題なし

このページをレンタルサーバーにアップロードして表示してみましょう。見事に画像が表示されなくなるはずです。

レンタルサーバーにアップすると画像が消える

レンタルサーバーにアップすると画像が消える

原因は言うまでもなくファイル名の大文字と小文字が混在していることです。ご注意を。

まとめ

ファイル名の大文字と小文字が混在することで、ローカル環境ではうまく表示できた画像がレンタルサーバーでは表示されない原因になります。

ちょっとしたサイトを作るだけなら「ファイル名を小文字で統一!」のような作法に気をつかいすぎる必要もありませんが、「レンタルサーバーにアップしたら画像が消えた!ローカル環境では正しく表示されるのに!」のような現象が起きたら、ファイル名の大文字と小文字が混在していないかチェックしましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート