【北行庵】  HOME旅行記一覧
検索エンジン対策|ブラウザ対策
表示の乱れ? ブラウザ対策を

検索エンジンと検索サービスの相関表
TITLE と META 記述法
フレームページの検索ロボット対策
Amateur SEO
検索ロボット用サイトマップの設置
表示の乱れ? ブラウザ対策を
文字の大小ボタン、効果を拡大

◇◆◇

検索エンジン対策ではなく、ブラウザ対策(クロスブラウザ対策)です。
ウェブサイトをパソコン等で閲覧するにはブラウザ(Browser)が必要です。現時点では、最も多く使われているのがマイクロソフト社のInternet Explorer (IE)、最新のヴァージョンは IE8 になる。当サイトもインターネットを始めた1997年から MS Windows をOSとするパソコンを使ってきました。ブラウザは IE シリーズのみ使ってきたことになる。
ホームページは2001年末から始めたが、当時は Windows がOSの、Internet Explorer がブラウザの代名詞でした。当サイトも独断的と云うか無選択的なネット環境として、ブラウザ IE 使用の人達が閲覧、と決め込んでいた。

2010年末ともなると、幾つものブラウザが知られるようになった。Firefox は全ブラウザの20%以上のシェアーとされ、他にも Google が Chrome というブラウザで攻勢をかけている。iPod や iPad で大成功の Apple は Safari ブラウザを提供中、古くから名を知られた Opera も愛好家がおり現存しています。

[追記 2011.03.25]  Firefox 4 Beats IE 9 In Day One Downloads によると、
『IE's dominance of the browser has slipped over the years, falling to roughly 56% in February from about 70% two years ago. Firefox has about 21% of the market, followed by Google Chrome with 11%, and Apple Safari with 6%, according to Web metrics firm Net Applications. Chrome use is the fastest growing, rising from a 7% share in April 2010. 』 [追記:終]

さて、Internet Explorer 向けに制作されたページが他のブラウザで適切に表示されるか否か、これは個別のブラウザで実際に自分のページを表示し確認するしかありません。

遅ればせながら、Chrome をインストールし自分のサイトを表示して、驚きました。Internet Explorer では適切に表示されるページが、滅茶苦茶に乱れた表示になるものが多かった。僅かな位置のずれ程度は良い方です。あわてて、Firefox、Safari、Opera をインストールして確認しました。残念ながら全てのブラウザで乱れた表示となり、閲覧に堪えないページすらありました。

幸いに4ブラウザ Chrome、Firefox、Safari、Opera 使用時の表示の乱れは共通している、と云える。結局は Internet Explorer 対 Netscape の関係でした。HTMLの入門書に書いてあることを無視し、ブラウザ対策をせずにページ制作ばかりしていたことになる。以下の写真2枚はその証拠です。特に乱れが激しかったロシア旅行記トップ頁がサンプルです。


Internet Explore で表示 (制作者の思い通りの表示)
Internet Explore 8

Google Chrome で表示 (かなり乱れ、中央ではなく左によっている)
Chrome

表示をディスプレーの中央にする
この旅行記のトップページは幅600pxの記述欄があり、その左右に100pxの空白欄、その外側が濃い色の部分となる。無地のバックグラウンドにすれば手間がかからなくて良いのですが・・・、このように作ったのです。
まず、記述部をIEでもChromeでも中央に表示されなくてはいけない。

記述部のセンタリングに関しては以上が普通の説明です。
ところが、当サイトの上の写真のようなページに関しては不足です。

記述幅を600pxとし、両側に100pxの同じ背景色のスペースを作る

何故ここで padding なのか?実は分かりませんが、これで IE と IE 以外のブラウザで期待通りのセンタリングになるのです。例えば、今ご覧のこのページのように。
もちろん、”padding: 0 100 0 100”と一本に記述してもかまいません。

以上でも中央揃いにできるが、どうしても”padding”の使い方が気になります。


複雑な中央揃いの表示の一例
北行庵トップ頁の一部 まず、写真の左の番号の説明をいたします。
4番は幅800pxの記述部(テキストや画像など)、3番は左右の幅50pxの余白(ダークブルー)、2番は左右の幅3pxの余白(グレーの縦線)、1番はディスプレー・サイズにより幅が変化する左右の余白(赤にレース透視画像)です。
命題は、前述の5ブラウザで、2 & 3 & 4 (幅 906px)がディスプレーの中央に表示されるようにしたい。

大部分のウェブ制作者は、1〜3番の余白を指定しません。任意の背景画像や無地色のバックグラウンドにして、4番の記述部のみ中央揃いの指定をするのです。これが最も単純で手間がかからず、どのブラウザでも間違いなく表示されるものです。しかし、中央揃いは単純にスタイルシートで center を指定すれば機能するものではありません。クロスブラウザ対策として、始めに説明した「表示をディスプレーの中央にする」にある width と margin-right と margin-left の指定が必要です。
何も無理に記述部をディスプレーの中央に表示しなくても良いのです。左寄りでも、記述部がディスプレーの左側の縁から少し離れ(15〜25px 程度か?)、見やすければ問題はない、と考えます。
(この項目は 2010.12.29 に記述)


センタリングの結果

上記の方法で、5ブラウザ Internet Explorer、Chrome、Firefox、Safari、Opera の全てで記述部の中央配置と左右の余白、余ったディスプレー部分の背景表示は上首尾でした。
実は当サイトの場合にはセンタリングのみならず、他にも細々と修正しなくてはIE以外のブラウザで思い通りの表示になりません。

しかし、25もの旅行記や関連ページがあり、ページ数の多いサイト全体の訂正は極めて困難なものになります。幸い検索エンジン対策として手を加える必要もあり、簡単に修正できるものはそれと同時に片付ける予定です。その時に気付いた事で一般性があると考えられる事項は追記する予定です。


2010/12/25 旅行記一覧ページのセンタリング改善が完了

旅行記一覧ページ「旅行、旅行記、旅行記集、サラッと濃厚な紀行文」は当サイトの顔でもあります。上記の方法でIE以外の4ブラウザ Chrome、Firefox、Safari、Opera でも最小の乱れで表示されるように大急ぎで改善しました。まだ多少は問題含みですが、このページはなんとか適正に表示されます。
その作業の途中で気付いたことを数点のみ記述しておきます。

これからも大作業が延々と続きますが、未だ多くの方々はIEをご使用のようですから、焦らず根気よく作業するつもりです。


IEで機能しても他の4ブラウザで動作しない JAVASCRIPT

北行庵トップページでは Javascript で動作するスライドショーが設置してあり、次々に画像を表示しています。この Javascript は全ての5ブラウザで期待通りに動作しています。
ところが、北行庵トップページからリンクしている「 過去の表紙写真 」で用いている Javascript はブラウザ IE では動作しますが、他の4ブラウザでは機能しません。原因は不明ですが、Javascript を借用して利用するときは予め幾つかのブラウザで動作状況を確認する必要があるようです。
(2010.12.30 記)


最近の旅行記のブラウザ対策をした印象

当サイトの旅行記は各ページの上部にタイトルの他にハイパーリンクやマーカー(ページ内ジャンプ用)やページめくり、下部にハイパーリンクとページめくりが付いている。今まではインライン・レベル(span)とブロック・レベルの(div)にスタイル・シートを多用して目的に添う表示をしていた。ところが、IE以外のブラウザでは乱れてしまう。各ページの冒頭部の表示が乱れては魅力がない。仕方なく、IE以外のブラウザでも安定して表示できる TABLE を使用してページ上部のタイトルとリンク、下部のリンクを表示させるようにした。スタイル・シートはそのまま使用できるものが多かった。これで、かえってスッキリした表示になりました。

1旅行記に施すこの作業で約2日間もかかった。上部と下部の乱れは除去されたが、未だ細かな点で思い通りになっていない。例えば、

全てのブラウザで適正に表示させるためには、サイト制作の当初から出来る限り基本的なタグのみ使用して単純化を計るしかないように思えます。ブラウザIE向けに一旦作り上げたサイトを他のブラウザで問題なく表示されるように改造することは、多くの細かな改修が必要となり、はっきり云って「諦め」しかありません。あまりにも時間がかかり過ぎる。

最善のブラウザ対策は、
皆さま、北行庵をご覧になるときは、何とぞブラウザIEにてお願いします。

◇◆◇
(2011.04.24 更新)(2010.12.25 公開)

< PREV.NEXT >