« 北東北キャンペーンの岩手山 | トップページ | ピクルス王子 »

2006.03.12

環境による見え方

ホームページやブログを作っていて気になるのが、
「これって他の環境ではどう見えてるんだろう?」ってことですよね。
このブログにはスタイルシートが多用されてるんですが、ブラウザや環境によっては反映されないものもあって、普段使わないブラウザで見ると「なんだこれ~!」ってことが良くあります。
私の場合はいくつかメジャーどころのブラウザをインストールして、どんな風に見えるのか確認しています。
だけど、サイト確認だけのためにマック買う訳にもいかず・・・。

そしたら、環境によってどう見えるのか、チェックできるサイトを見つけました。
Browsershots

「Webアドレスを入力します」のところに、ブログなどのURLを入力して「スクリーンショットを作成」をクリック。
どうやらスクリーンショットが生成されるまで数分から数時間かかるようなので、いきなりは使えないみたいです。
一度作成すればけっこうな頻度で更新されてくみたい。

私も昨日スクリーンショットを作成して、さっき確認してみました。

まあ、思った通りの結果です。
背景画像やフォントなどは見苦しくない程度にやったつもりなんで、この程度の差なら充分。
スクロールバー色が反映されてないブラウザがあるのは承知の上、これは私がデフォで使っているFirefoxでも見ることができません。
あとアドレスバーにオリジナルアイコンを表示できないブラウザってけっこうあるんですね~。
なんかプラグイン入れろとか言ってるブラウザがあるけど、なんだこれ、FlashPlayerかな、GoogleMapとかVideoかな。

FAQを見たら、このスクリーンショットは自分のサイトに貼り付けても良いということです。
まあ、自分のサイトのスクショですもんね。

スタイルシートをビシバシ変更して楽しんでいる方もそうだけど、ブログ会社側が提供しているテンプレートを使ってる方も、一度自分のブログが他の環境ではどう見えてるのか確認しておくのも良いと思います。

・・・ん~でもこういうのって、数時間後じゃなくて、サイト作りながらリアルタイムで確認したいですよね・・・。


というわけで、私の場合。

それぞれの画像をクリックするとおっきい画面で見られるよ。


ブラウザ:Firefox 1.0.4(Gecko 20050825)
OS:Linux Debian
ちょっと前のFirefox、なんか怒られてます、何やったんだ私。



ブラウザ:Firefox 1.5.0(Gecko 20060224)
OS:Linux Ubuntu
これが私の見え方にかなり近いかな。
このPC、スクロールバーは多分グレーをデフォにしてるのでしょう。
スタイルーシート反映されてるようでされてないです。



ブラウザ:MSIE 6.0
OS:Windows XP SP2
やっぱりこれが一番多数派ですね。
アイコンが普通のIEアイコンになっちゃってますが、他は特に支障なし。



ブラウザ:Mozilla 1.7.8(Gecko 20050718)
OS:Linux Debian
これはネットスケープだよね。
スクロールバーは完全アウト。



ブラウザ:Opera 8.50
OS:Linux Debian
オペラもスクロールバーがダメ。
あれ、いつ8.5になったんだ?(汗)



ブラウザ:Safari 2.0(KHTML)
OS:Mac OS X
winユーザーはあまり拝めないスクショ。
スクロールバーもアイコンもこんなんなっちゃうの?


*ところで、ココログ史上最悪のお祭りとなった30時間メンテも無事?終了しましたが、これで気になるのが近々控えている有料版のバージョンアップ。
まさかとは思うけど、バージョンアップにともなうメンテの前に、ブログのバックアップだけはやっといた方が損はないかも知れません。
万が一データが飛んでしまったら復旧はできないですからね。

|

« 北東北キャンペーンの岩手山 | トップページ | ピクルス王子 »

パソコン・インターネット」カテゴリの記事

コメント

 最近、環境による見え方をあまり気にしてません。ひとつは、ウチの場合、気にするほどのデザインじゃないから。もうひとつは、間違ってないのに変に見えるのはブラウザが悪いと思うようにしてるから。
 それで、もじらというかfirefox系とsafariでしかチェックしてないので、このサイトでチェックしてみたけど、IEでもあんまり変わらないのが、ちょっとつまんない。operaのスクリーンショットはまだ出来てません。。。。

投稿: 南郷力丸 | 2006.03.12 22:38

まじめですね。

投稿: ryo | 2006.03.12 23:11

最近はWinだけでも様々なブラウザが出現してきちゃったから、これまた苦労のタネが増えたというか・・・(笑)
テンプレいじってると、どうしてもブラウザによる見え方って気になるところですよね。
まぁ、自分さえ良けりゃ良いって割りきった考え方するのもアリでしょうけど、私はやっぱり気になる組。
せっかく苦労したんだから、どんなブラウザからもできるだけ差異なく見てもらいたいというか。。。

あと、見え方といえば、モニタも個々の明るさって微妙に違いますよね~
私が普段使っているPCと会社のPCでも明るさが微妙に違うので、自宅で加工した写真を会社のPCで見ると「あれ?こんなに暗かったっけ?」ってな事が良くあります。
まぁ、そこまで気にしてたらキリないですけど(笑)

投稿: 檬花 | 2006.03.12 23:34

しのぶさん、また続けてコメントしてごめんさいね。
このツールいいですね~。ウェブデザイナーの卵な私は、こんなツールさえ知らなかった(恥)
もう、しのぶさんにはいつも勉強させられます。
早速このツールブックマークしておきました!!
ありがとうございます!!

投稿: endunham | 2006.03.12 23:49

>南郷さん
うん、最近はブラウザによってあまり大きな違いがなくなりましたよね。
私のところは今回の素材があんまり例題として良くないんです。
というのは背景色やスクロールバーをグレーにしてるせいで
デフォルトでこういう色になってるのか、
それともCSSがちゃんと反映されてグレーになってるのか判断しにくい。
背景色を何も指定しないと、IEは(余計な?)気をつかって白にしてくれるんだけど
他のブラウザはグレーになっちゃうんですよ。
(あ、でも今はどうなんかな、IEもグレーになるのかな)

>ryoさん
真面目というより、たとえばストッキングが伝線してるのをずっと気づかずに
他人に指摘されるのはとても恥ずかしい、という感じです。
ちょっと変な喩えだったかな(笑)。

要は、誰かに「見え方が変だよ」って言われて慌てて治すよりは
そうならないよう事前に予防線をはっておく、て感じ。
ブログなんてのは、基本的に同じように見えるよう作られているものだから
後から作ったCSSもそう激しい違いは出ないと思うんですよね~。
だけど、これが自分で1から作ったサイトだと
全ての面倒は自分で見なきゃならない訳ですから。
ホームページ出身者(?)の考え方でしょうねこういうのって。

>檬花さん
南郷さんへのコメントでも書いたように、
最近はブラウザでそう激しい違いはなくなってきたんですが
それでもいくつか私が発見したものがあります。
例えば画面をスクロールしても背景画像がずっと同じ位置に
ついてくるヤツってあるじゃないですか。
「background-attachment: scroll」ってやつ。
これが少なくともFirefox、ネスケ、Operaでは対応してないようで
ヘタするとリピートされちゃったりするんですよ。
私のとこの場合、ティラノザウルスがリピートしちゃうんです、怖っ(笑)。
あと、スタイルシートのタグのスペースが全角だと
やっぱり全く認識されないらしいんですね~。

これらは全て最新のIEでは支障なく表示されちゃうんで
IEだけ見てる人は私が何を言ってるのか理解できないと。

うんうん、モニターによって色の違いってすっごくありますよね~。
OSでもwinは派手目の色に見えるようなので
マックで見ると「なんか薄い」ってなるみたいです。
もちろんマックでの色が本当の色なんですが、
そこまではねえ、気を使いきれませんですね~。

>endunhamさん
いえいえ~、こちらこそ、お役に立てて何よりです~。
もちろん一番良いのは、ブラウザをインストールしたり
主要なOSを持って実際に確認することなんでしょうけど
そんなこと、なかなかできませんからねえ。

ホームページ作りには環境ごとの確認は必須ですから
こういうサイトがもっと早く登場してほしかったなって思います。

そういえば、ホームページ作りで思い出したんですが
もっと昔はテキストオンリーのブラウザや
音声読み上げソフトでもきちんと読めるようなサイト作り、とかって
けっこう流行りましたよね。
だけど、今はFlash全盛になって、こういう配慮はすっかり廃れた感があります。
ブログだってソースだけ見るとかなり不親切な構造になってますもんね。

投稿: しのぶ | 2006.03.13 01:17

趣味なんだからええやないの。
ってな感じです。
(仕事ではもう少しまじめです(汗)

投稿: ryo | 2006.03.13 01:29

>ryoさん
趣味だから気にならない、
趣味だから気になる、という感じでしょうね~。

たとえばガンダムのフィギュアにポジトロンライフルを持たせても
私は何とも思わないけど(笑)、許せない人は許せない、という感じ?
またまた全然違う?

投稿: しのぶ | 2006.03.13 01:43

なるほど、すばらしい例えで納得です(笑)

投稿: ryo | 2006.03.13 02:04

 へぇ~、こういうのがあるんですね!
 前にしのぶさんに、うちのブログがネスケでは全然違う見え方をするのを教えていただいて、慌ててネスケをダウンロードして、直したことを懐かしく思い出しました(笑)。
 なので、張り切って、こちらのサイトもお気に入り登録しましたよ~。

 そうそう、ココログメンテに備えて、慌ててバックアップいたしました。メンテのその日まで、またマメにやっておかないといけませんよね。くるならこい、ココログ! って気持ちになれてよかったです(笑)。

投稿: リカ | 2006.03.13 10:20

>ryoさん
ご納得いただけでよかったです(笑)。

>リカさん
そうそう!そんなことがありましたねえ!!
どうやらあれからココログの方でもいろいろ努力したようで
今は特にこちらでいじったりしなくても
ネスケでも幅が変わったりしなくなったみたいですよ~。
今でも微妙に反映されないスタイルシートもあるんですが
ブログの見た目を変える程度の簡単なものなら
そんなに激しい違いはなくなったように思います。

>>そうそう、ココログメンテに備えて、慌ててバックアップいたしました。

おお!さっそく実践されたんですねっ。
私もあまり頻繁にはバックアップ取ってないんですが(汗)
メンテの直前には必ずやるようにしています。
こんな記事でも消えちゃったらやっぱり悲しいし
こればっかりは誰も復元できないですからね・・・。

投稿: しのぶ | 2006.03.14 13:55

しのぶさん、こんにちは。
先日はメールでのご回答ありがとうございました。
どの記事にコメントしようかな~って思ったんですが
やっぱりこのエントリーですよね。

しのぶさんがお答えくださった、
>「font-size」の指定をハズしてみるか、

ではだめでした・・・。
「small」で指定するとIEではいまよりももっと大きくなってしまう(汗
もう、このままでいいか~って思ってます(笑)
ほんとにいろいろありがとうございました。
また遊びにきます~。

投稿: まっきー | 2007.07.22 01:22

>まっきーさん
あっれ~~~???ダメでしたか~~~(涙)。
お役に立てなくて本当にごめんなさいね。

そんでもって、なんで私の方はそんなに変化ないんだろう???
もしかして、私はココログのカスタム・テーマの方でいじったのかなあ・・・。
ココログって、基本的には自分で作ったカスタムCSSが優先されるんですが
なぜかサイドバーの文字はカスタム・テーマが優先されるんです。
JavaScriptで強制的にいじってるようなんですが
私の想像では、サイドバーには「ココログからのお知らせ」など
宣伝文句も入ってくるじゃないですか。
だから、「出来ればあまりいじられたくない」みたいなんですね。
もちろん、そんなとこ、いっくらでもいじる方法はあるんですが(笑)。

もしもどうしても気になるようであれば
「デザイン」→「テーマを変更」→「サイドバー項目」で
文字の大きさを「小」か「極小」などにしてみてください。
もしかしたら、ここで何とかできるかも・・・・。

投稿: しのぶ | 2007.07.23 02:53

しのぶさんこんにちは~。

「サイドバー項目」ではフォントを「日本語ゴシック」とかに
すると極小で表示されるんですけど・・・
変なこだわりがあって、ArialかGeorgiaを選びたいの。
そしたら「極小」でも極小ではない~~!のです(涙

とりあえずいまはこのまま置いておきます。
あんまり考えて熱が出てきたらいやだから(笑)
しのぶさんには感謝してます。
ありがとうございました。

投稿: まっきー | 2007.07.24 01:23

>まっきーさん
うわ~~~やられた~~~っ!昨日の夜はメンテだったんですよね~。
すっかりお返事が遅くなっちゃって、すいません(涙)。

>>変なこだわりがあって、ArialかGeorgiaを選びたいの。

ああ、それ分かるなあ。
日本語ゴシックとかって微妙に機種依存フォントなんですよね。
今はマックとかでも見られると思うけど、
やっぱり避けられるものなら避けたいですよね~。

で、私のとこはフォントに何を指定してたっけ?と思って見てみたら
サイドバーのタイトルはGeorgiaでしたが
個々の項目はなぜえかVerdanaでした、
私ってばいつそんな設定にしたんだ?(おい)

投稿: しのぶ | 2007.07.25 19:20

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/9056497

この記事へのトラックバック一覧です: 環境による見え方:

« 北東北キャンペーンの岩手山 | トップページ | ピクルス王子 »