WordPressや、通常のWeb制作でも同様ですが、画像ファイルやCSS、javascriptなどのファイルをアップロードしたのに、思った通りに表示されない、動作しないことがあります。

本記事では、このようなトラブルが発生した際の問題の切り分け方や解決方法をご紹介します。

この記事を書こうとしたきっかけ

先日、当ブログのメールフォームよりお問い合わせをいただきました。

内容は、賢威7でフラットな独自デザインのSNSボタンを設置する方法を参考に、ご自身のブログでもSNSボタンをカスタマイズする際、該当記事でご紹介していたSNSボタンで使っている「はてなブックマーク」などのアイコンファイルが表示されない、というものでした。

最終的には問題は解決されて良かったのですが、このような「ファイルが表示されない」という問題はWebサイトのカスタマイズ時にはよくあることなので、同様のケースならだいたいは通用する問題の切り分け方と解決方法をご紹介しておきたいと考えた次第です。

ファイルが表示されない、適用されない場合の原因となる要素は3つ

アップロードしたファイルが意図した通りに表示されない、適用されず動作しない、というような場合の原因となる要素は大きく分けて3つあります。

  1. ファイルの場所
  2. ファイルへのパスの記述があるか
  3. ファイルへのパスが正しいか

【1】ファイルの場所

前述のアイコンファイルの例では、当サイトでは、サーバー上は以下のディレクトリに格納してあります。

/fans-web.net/public_html/webdesigner/font/icomoon

※当サイトではエックスサーバーを利用しているので、「/ドメイン名/public_html/」がドメインルート(トップページがあるディレクトリ)になります。今回の例ではこのディレクトリに「font」ディレクトリを作成し、「icomoon」フォルダをそのままアップした、という内容になります。

まずファイルがある場所を正確に把握しておく必要があります。

【2】ファイルへのパスの記述があるか

ファイルを表示させる、動作をさせる、読み込ませる、というような際に必要なことは、そのファイルを読み込むための記述が必要です。

前述のアイコンファイルが表示されないケースでは、アイコンファイルを表示させるために必要なCSSファイルの読み込みが必要です。

この例だと<head>タグ内に以下の記述をしています。

<link href="/font/icomoon/style.css" rel="stylesheet">

【3】ファイルへのパスが正しいか

アップロードしたファイルの場所を把握し、ファイルへのパスの記述もされていることを確認したら、最後はそのファイルへのパスが合っているかをチェックします。

前述の例だとパスは「/font/icomoon/style.css」に該当します。

このファイルが正しく認識されているかをチェックする方法は「直接URLを入力してアクセスできるか」です。

このサイトの例では「http://webdesigner.fans-web.net/font/icomoon/style.css」となり、アクセスするとCSSファイルの中身が表示されます。

※IEなどのブラウザによっては、いきなりファイルの中身が表示されるのではなく、「保存しますか?」と聞かれることもあります。

問題の切り分け方と解決方法

ファイルが表示されない、適用されない、といった問題が発生した際の問題の切り分け方、解決方法をご紹介します。

まず、ファイルのURLを入力してアクセスを試みます。正常にアクセスできない場合は、「パスの記述自体が無い」か、「パスが間違っている」ことが考えられます。

【切り分け1】ファイルへのパスの記述が無い場合

ファイルを読み込むためのパスの記述が無い場合は、当然ですが、パスの記述をすればOKです。

また記述されていたとしても、記述する場所が違う場合もありますので、正しい場所で記述されているか確認します。

【切り分け2】ファイルへのパスの記述が間違っている場合

アップロードしたファイルがサーバー上のどのディレクトリにあるか改めて確認します。

次に、そのディレクトリ階層とパスの記述があっているか確認します。

まとめ

以上が、ファイルが表示されない、適用されない場合の、基本的な問題の切り分け方と解決方法です。

前述のアイコンフォントの例では、アップロードしたCSSファイルを直接ブラウザでアクセスしようとすると「ファイルが見つからない」という表示がでました。

このケースではパスの記述はあっていたので、ファイルが適切なディレクトリにアップロードされていなかったのが問題でした。

考えられる原因をひとつずつ潰して、問題解決にあたりましょう。