ホームページ更新時に重宝しそうな、5つのチェックポイント

冬期休暇を目前にして、自社内でのサイト更新や趣味のサイトのヴォリュームアップ等をご計画の方がいらっしゃるかもしれません。
自らの経験を交え、ホームページ更新時のチェックポイントを挙げていきたいと思います。

1.データをアップロードしたのに、更新されていない。
まず、ブラウザの履歴を削除し、キャッシュ(インターネット一時ファイル)をクリアした後に再読み込みを試みてください。

■履歴とキャッシュの削除について
・インターネットエキスプローラーの場合 … メニューバーの「ツール」内に「閲覧の履歴の削除」があります。
各ヴァージョンの操作手順につきましては、Microsoft社のサポートページをご覧ください。
http://support.microsoft.com/kb/2539129/ja

2.versionの異なるインターネットエキスプローラーで確認したらレイアウトがずれてしまう。

通常、インターネットエキスプローラー(IE)をアップグレードしましたら、下位ヴァージョンのインターネットエキスプローラーは利用できなくなってしまいます。
しかし、下記サイトのIETesterなら、それぞれのヴァージョン毎に動作確認が取られます。

http://www.my-debugbar.com/wiki/IETester/HomePage

IETesterが上手くインストール出来ない場合には、少々時間が掛かりますが下記サイトでも各ヴァージョンでの見え方が確認可能です。

http://netrenderer.com/
※IE NetRendererさんのサイトです。プルダウンメニューからヴァージョンをご選択ください。

また、IEのみならず、ファイヤーフォックスやchrome等でも確認したい場合には、株式会社シーマン社のサイトが非常に便利です。
※無料ツールは1回につき5つまで選択できます。

http://www.cman.jp/BrowserCapture/

3.ページの読み込みに時間がかかってしまう・表示されない。
こちらの場合には、ブラウザ側の問題なのか、サーバ側なのかを切り分けなければなりません。

■ブラウザの問題の場合
まず、ブラウザを変えてみます。
その後、スムーズに読み込めた場合には、メイン使用のブラウザを一旦終了させ、履歴の削除やキャッシュのクリアを試行なさってください。

■サーバの問題の場合
ブラウザを切替えてもページが表示されない場合には、サーバのトラブルが考えられます。
まず、サーバ管理会社の障害やメンテナンス情報を確認しましょう。

また、下記のサイトでは、契約先のサーバが自分の回線状態が込み合っていて見られないだけなのか、他のインターネットユーザも見られないのかが確認出来ます。

http://www.downforeveryoneorjustme.com/
※Webサイトのモニタリングサービスページです。

4.画像が表示されない

私自身も良くやってしまいがちなのですが、アップロード先のディレクトリを誤っていることが多めです。
ローカル環境で表示されている場合には、画像に設定したパスを再確認し、アップロードを再試行なさってみてください。
さらに自戒を込めて記載いたしますが、画像に対して相対リンクを設定します際に「./」と「../」 を誤入力している事もしばしばありがちなミスです。

更に、ファイル名の大文字・小文字の誤記が考えられます。
■-(ハイフン)と_(アンダーバー)の誤字も、多いに考えられる原因です。
■ファイルの拡張子が .jpg なのに .pngになっている等も、やりがちな誤表記です。
上記の2件につきましては、何度も経験いたしました。
当方を反面教師としてくださいますと幸いです。

5.cssの変更が反映されない。

背景色等につきましても、ローカルとサーバ内のディレクトリ構成が異なっているため反映されないことがあります。
cssにインポート設定等をなさっている場合は、特にアップロード先にご留意なさってください。

更に文字コード指定の前にコメント等を記入している時には、正しくcssがインポートされない場合があります。
また、それぞれのcssの文字コードが混在(UTF-8やShift-Jis、EUC等)しておりますと、折角のcssが正しく動作しないことがあります。

文字コードは「1行目に書かれており」かつ「統一」されているか否かは、大事なチェックポイントになるかと思っております。

■その他のお役立ちTips
webページの表示に時間が掛かるように思われた場合には、画像データの軽量化をお試しになると宜しいかもしれません。
Photoshopには、「Webおよびデバイス用に保存」機能もありますが、もう少々軽量化が可能です。

http://tools.dynamicdrive.com/imageoptimizer/index.php
※gif, jpg, pngに対応しています。

http://tinypng.org/
※ブラウザ上でpng画像を軽量化できるフリーサービスです。

もっと確認しなければいけない事項は、他にも沢山あるのかもしれません。
今回は5つに絞ってご紹介しましたが、少しでもwebに関わる皆さまのお役に立てますと嬉しいです。