よくウェブサイトで見かけるFACEBOOKのいいねボタンですが
簡単にウェブサイトに設置できるのはご存知でしょうか?
よくウェブサイトで見かけるFACEBOOKのいいねボタンですが
簡単にウェブサイトに設置できるのはご存知でしょうか?
冬期休暇を目前にして、自社内でのサイト更新や趣味のサイトのヴォリュームアップ等をご計画の方がいらっしゃるかもしれません。
自らの経験を交え、ホームページ更新時のチェックポイントを挙げていきたいと思います。
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に関わる皆さまのお役に立てますと嬉しいです。
PC用のwebサイトを作成時、ページ全体の横幅設定は1024pxや960pxに設定することが多めです。
横スクロールが出てしまいますページはユーザビリティ的に閲覧しづらく感じますし、逆に余りにも細身のページは縦方向への遷移が難しくなってしまうと申します懸念があるからです。
今回、分る限りで調べた結果では、PC閲覧用のwebページの横幅は概ね1000px前後であれば大丈夫なようです。
上記の判断基準となりましたデータを基にwebページの横幅について考えてみたいと思います。
※データは、2012年12月時点のものです。
横幅を考えるにはモニタの解像度を知ることが第一かと思いました。
そこで、米国のNet Applications社の最新データを確認いたしました。
※同社のサイトはこちらです。
※http://www.netmarketshare.com/report.aspx?qprid=17
1366*768px が最上位でした。
以下、1024*768pxと1280*800pxと続いております。
横幅の設定が1024pxとする以前は、800*600pxを目安に作成することが多かったように覚えております。
今はモニタの解像度もどんどん上がってきているのですね。
また、スマートフォンやタブレットPCにつきましては、株式会社ハイポジ社の津曲さんがお書きになったBlogに分かりやすくまとめられております。
http://case-mobile-design.com/devices/resolution-list/
※同氏のBlogへ
モバイルデバイスの場合は、横幅480pxのユーザが多く、その次に540pxと720pxが来ております。
縦幅の場合には、800px・1280px・960pxの順でユーザが多いようです。
PCと一口に申しましても、データをご覧いただければお分かりのように様々なモニタサイズがあります。
さらにスマートフォンやタブレットPCのユーザも増えまして、どのサイズが適切なのかと思い悩むこともしばしばです。
私自身はまずPCサイトの横幅の目安が判明しましたら、その後は作成したいレイアウトに合わせ、cssを設定して行かれると宜しいかと思います。
様々なデバイスに対応させるには、レスポンシブwebデザインを知っておくことが重要です。
レスポンシブwebデザインとは、過去においてはリキッドデザインと称されておりましたが、リキッド的な展開のみならず1つのhtmlデータで多くのデバイスに対応できるようになってきたことから、レスポンシブ……の名称に変わっていったようです。
※当方の理解が誤っている場合にはご指摘をお寄せいただけますようお願いいたします。
今回の記事ではレスポンシブwebデザインまでは網羅できておりませんが、レイアウト考案時に参考となるサイトをご紹介しまして、こちらの稿のまとめといたします。
宜しければご覧ください。
・960 Grid System
http://960.gs/
全体の横幅を960pxとし、この数値を基に縦方向に12・16と分割したデザインです。
グリッドは(方眼状の枠)を1つのブロックとしてレイアウトを作成していく考え方です。
学生時代の図形の授業を思い出してくだされば、お分かりいただけるかと思います。
※Dreamweaver CS6では、「可変グリッドレイアウト」機能が追加されております。
皆さまのレイアウトデザインの一助になりますと嬉しいです。
時々、ホームページを立ち上げる生徒さんから「ドメイン」についてのご質問をいただくことがあります。
最近では「.mobi」、「.info」や「.asia」など、本当に様々なドメインが安価で取得できるようになりました。
私見では、高額ドメインでは無い限り、独自ドメイン推奨派です。
※注1
年間で1000円程度で維持でき、SEO的にも有利になると考えましたら、非常に費用対効果が高いように感じられます。
まず、独自ドメインのメリッとしましては、短くて覚えやすい事が挙げられます。
例えば、電機メーカさんのSONY社のサイトを見たくなったとします。
その際、完全なURLアドレスである「http://……」を入力する方は、少ないかと思います。
手軽に目的のサイトに辿り着くには、検索エンジンに「SONY」等と入力する方が簡便です。
※上記の場合には、1ページ目に同社のサイトがヒットします。
全てを手入力にいたしますと、私は煩雑に感じます。
更に、誤入力も増えがちになってしまいそうな心配がありますよね。
前述のように、「覚えやすい」・「分かりやすい」ことが独自ドメインのメリットかと思います。
次に、独自ドメインのメリットとしましては、URLアドレスを変えずに自分のホームページを継続できるようになります。
BlogやWebサイト開設は様々なポータルサイトやフリーサーバ等で無料開設も可能です。
非常に便利ですが、いつサービスが停止してしまうか分らないと言う不安材料があります。
※一例を挙げますと、pixiv社(2012年)やKDDI社(2011年)がブログサービスを停止していらっしゃいます。
独自ドメインを取得しておきますと、ホスティング先を変更するだけで、URLアドレスは変わらずに自分のホームページを継続できるようになります。
例えば、最初は無料サーバ+独自ドメインにてサイトを開設します。
そして、コンテンツ増加等に合わせ、サーバを高機能なものに換えていきますと、Webサイトはドメインやサーバを解約しない限り続行いたします。
このように「サイトやBlogが無くなってしまうかもしれない!」と申しますような懸念も、独自ドメインの取得によって、リスク軽減が図られます。
最初はハードルが高いかと感じるかもしれません。
しかし、ホームページ運営上では、独自ドメイン取得ノウハウは有用なスキルかと思います。
Bestでは、ホームページ作成やSEO対策についての様々な講座を設けております。
お気軽にご質問をお寄せください。
※注1:高額ドメイン……ドメインオークション等で高額取引される、人気ドメイン等を意味します。