トイレのうず

先日の画像置換IE6にて表示がめちゃめちゃですね。IE6以下で「position:fixed」が使えないから互換モードで表示して、いろいろ小細工しているからだ。
これを直そうとすると、いちからCSSの組み直しか。ちょっと時間がかかりそうなので、ペンディング。とりあえず、元に戻した。

CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で表示されないとか問題もある。

旅のサイトでは主にbackgroundでメニュー画像を表示して、テキストを text-indent:-9999px; で画面の外に飛ばす方法をとっていたのだけれど、どうもこの「text-indent:-9999px;」がスパム判定されてるっぽい気がするんですよね。旅のサイトをGoogleSiteMapに登録したと同じくらいにGoogleからのアクセスが減っているのです。画像置換とスパムについては下記サイトが参考になりました。
→Emotional Web：画像置換とSEOスパムの境界線

で、代替方法を複数当たってみて、一番よさそうなAppleのサイトで使われている方法に変更してみました。
→fixture.jp/blog：Appleサイトに見るグローバルメニューの画像置換手法

>>『【CSS】画像置換の方法を変更してみた』の続きを読む

旅の各ページのレイアウトがIEで表示した場合に上に詰まった感じになっていたのを修正しました。今まで気がつかなくてすみません。

IE6以下では position: fixed; が効かないので、上部メニューバーを表示させ、文章部分は overflow:auto; にして仮想的にメニューバーを固定していたのだけれど、どうもmarginがIEでうまく効いていないようでメニューバー分上にずれてしまっていました。サイトを作成したときに確認したときにはちゃんと表示されていたのになぁ。おかしい。とにかく、荒手な方法でbodyの上部マージンで対処しました。（アンダーバーハック使いまくり。）
IE7もだいぶ普及してきたし、もう一度css見直そうかしら。

マイクロソフトはアンダーバーハックよりもConditional comments（条件付きコメント）を推奨しているよう。IEのHTMLサイドの独自拡張で、コメント内にIEの振り分け用キーワードを記述する、という方法。

<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>

↑こんな感じ。他のブラウザには害を及ぼさないけれど、HTMLのソースが汚れるのが気になるねぇ。あと、スタイルシートの数が増えるので管理しにくくなるよね。でも今回みたいなバグの場合見つけやすくなるかも。

トイレのうず本館の各コンテンツ内で縦スクロールバーが2本出ていた不具合をやっと修正。
IE6以下では position: fixed; が効かないので、divタグでページ全体をくくってそこにスクロールバーを表示させてたんだけれど、ウインドウの方のスクロールバーが残ってしまっていた。特にウインドウを小さくしたときに2重にスクロールバーが出るのはいただけない、と思いつつ何年も放置していた。
原因はIEが縦スクロールなしでもデフォルトでそれを表示する設定になっているから。要はそれを消せばいいわけだ。

IEで固定座標を指定する方法
↑このページを参考に
html {
overflow: hidden;
}
としてみるけれど、なぜかスクロールバーが消えない。試行錯誤の結果、
body {
overflow: hidden;
}
としてやっとスクロールバーを1本にすることができた。
参考にしたページのサンプルのスクロールバーはちゃんと1本だったから
html {
overflow: hidden;
}
が効かないわけないと思うんだけれど、なんでダメだったんだろう。

ちなみにわたしはIEにのみ対応させるためアンダーバーハックを使いましたが、IE7でちゃんと表示されているのだろうか？　環境がないから確かめようがない。

『プロとして恥ずかしくないスタイルシートの大原則』を購入して読んでいたら、スタイルシートを使ってページを作ってみたくなった。
で、一番取りかかりやすそうな本館の旅のページを試しに CSS 化。いわゆるテーブルレイアウトをスタイルシートのみを使ってレイアウトするっていうやつです。この方が 検索エンジン対策にもなるみたいだし。そしてかねてから気になっていた、フレームを廃止しました。これも SEO 対策の1つ。
一応、それらしいものができて、表示テストをしてみたら、Mac OS9 の Netscape7 でちゃんと見られない。う〜ん。っていうか、ネスケって使っている人いますか？　Windows IE6 と Firefox、Opera で OK。MacOSX では Safari、IE5、Netscape7、Opera、Firefoxで動作確認。しかし、悩むのはどれくらい古いブラウザにまで対応するように作ればいいかってこと。アクセス解析とか見ていると9割以上 IE6 だから、IE6 でちゃんと動作すればいいっていうことになるけれど。こういう、業界の標準ってどうなのか気になる。
ひな形はできたので、今回の島根、広島、山口旅行の旅行記を作るときは、これを使ってみようと思う。

Windows 機から見たときなんとなく間が抜けていたのを修正しました。
css でもフォントサイズを small、x-small など相対的に指定をすると、ブラウザ間でのフォントの大きさにばらつきが出るらしい。ということで今回はすべて px の指定で統一してみた。
あとはタイトル画像と文字のバランスを調整。
今回は Windows からしか確認してないので Mac でどのように表示されているかは未知数。たぶん大丈夫だと思うけど。Mac の方、表示の変わったところがあったらご指摘いただけるとありがたいです。

真っ白になっていた背景色ですが、いろいろな blog の css を参考にしてなんとか解決しました。
背景画像を指定すると background-color が効かないみたいで、background の後に背景色を設定するみたいです。でも Mac からは Safari でも IE でも Netscape でも背景色が表示されていたことを考えると win、IE の css のバグなのかしら、と思ってみたり。とりあえず表示されてよかった。

わたしのパソコンが Mac なのでこの blog を　Windows から覗いたことがなかったのですが、今 Windows から見てびっくり、背景が白になっていますね。css のどこか間違えたのかもしれません。出先からなので直るのは相当先かもしれないですけど、勘弁してやってください。すみません。

CSS を変更してみた。
あとはタイトルのところに画像をつけたいと思っている。
ぼちぼち Photoshop でつくることにしよう。