はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

色々なブラウザでの見栄えを確認できるサイト

2007/08/05 Sun [Edit]

Web デザイナーやブログテンプレートの制作者は自分のデザイン&コーディングしたものが、より多くのブラウザで同じように表示されているかを常に意識しながら制作していることと思います。お疲れさまです。

今日はそんな制作者の方達にちょっとだけ便利なサイトをご紹介。

古い IEMac のブラウザ、Linux のブラウザなどでどのように表示されているかを、スクリーンショットで撮影してくれるサイトです。つまり色々なブラウザでの見栄えを確認できるサイトがありました。

それでは海外のサイトなので一応簡単な説明を交えつつご紹介していきたいと思います。

まずは Browsershots にアクセスします。時間帯などでアクセスし辛い時があるので、ページが読込まれない時は別の時間帯などにアクセスしてみてください。

無事アクセスできると下のキャプチャーのページが開きます。

ブラウザをスクリーンショットで撮影してくれるサイト

そうしましたら、の長いテキストボックスに他のブラウザで確認したいページの URL を入力し、の「Start」ボタンをクリックします。
URL は http:// や https:// を付けた形で入力します。

確認したいページの設定画面

すると上のキャプチャーのページへ移動するので、の四角枠の中から確認したいブラウザを選択します。デフォルトでは全てのブラウザにチェックが入っていますが、チェック項目(ブラウザの数)が多いいとスクリーンショットの撮影にかなりの時間を要するので、必要のないブラウザのチェックは外したほうが良いです。

次にの四角枠の中にあるプルダウンから、確認したいページの設定を行います。特に指定する必要がない場合、もしくは良く分からない場合は Don't Care でもスクリーンショットで撮影してくれます。設定すると言うより、細かい指定ができると言ったほうが良いのかも知れません。
上段の左から右、下段の左から右の順に簡単に説明すると、Screen resolution は確認したいモニターの解像度が指定でき、JavaScript は確認したいジャバスクリプトのバージョン、Macromedia Flash は確認したいフラッシュプレイヤーのバージョン、Color depth は確認したい色深度などが指定でき、JavaMedia plugins は確認したいページでそれに関わるコンテンツがある場合などに適宜で設定可能です。

設定が済んだらの四角枠の中にあるプルダウン Maximum wait から最大待ち時間を選択します。上で沢山のブラウザでの確認にチェックを残した方は最大の 4hour を選択しておくと良いです。30minute だと全部のスクリーンショットを見られない可能性があります。
『4時間も待つの!?』と驚いた方へ補足すると、私の場合4ブラウザの確認で1時間くらいかかりました。しかし、後述しますが、スクリーンショットが表示されるページをブックマークしておけば良いので、ブラウザを閉じてもパソコンを終了しても OK です。写真屋さんにフィルムを預ける感じでしょうか、頃合いを見計らって再度訪問するとスクリーンショットが撮影されています。

全ての選択が済んだらの「Submit Jobs」ボタンをクリックします。

スクリーンショットの確認画面

上のキャプチャーは既にそれぞれのブラウザで表示されたページをスクリーンショット撮影された状態ですが、前ページで設定した直後にはスクリーンショットのサムネイルはありません。
しばらくすると、このページで確認したいページのスクリーンショットが確認できるようになるのでブックマーク(お気に入りに追加)して待ちましょう。また、スクリーンショットのサムネイルをクリックすると 100% の大きさで確認できます。しかしあまり縦に長いページだと途中でスクリーンショットが切れます。

ちなみに撮影されたスクリーンショットはしばらくの間ブックマークしたページで確認できるので、前日に仕込んで翌日確認なんてことも可能です。それでは皆さんもお試しを。

Win Windows をお使いの方への補足
もし、しっかりと古いバージョンの IE などで確認しながら制作したい場合は evolt.org - Browser Archiveで、旧バージョンのスタンドアローンの IE が入手可能です。ダウンロードした Zip ファイルを解凍し、作成されたフォルダの中にある IEXPLORER.EXE を起動すると新旧の IE を共存できます。
IE の共存は自己責任で宜しくお願いします。

また、IE5 と 5.5 では Cookie の扱いに問題が生じるようですがパッチで解決できます。パッチは実行せず CAB 形式に対応した解凍ソフトで展開し、作成されたファイルから wininet.dllIE5 もしくは IE5.5 のフォルダの中にコピーで解決します。

ご注意
スタンドアローンの IE は自サイトの確認だけに使用するのがセキュリティー的に無難です。

Prev
アップルサイトのデザイン
Top
はじめてのブログデザイン
Next
ワンランク上のおっさんはお洒落なメール@アドレスアイコンをサラリと10秒で作れるぅーー!

Comments

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。