「
Google Chromeをインストールしてみたら・・・」で書いたように、このブログのレイアウトが崩れるという理由でメインブラウザの立場を獲得できなかったGoogle Chromeですが、あとで調べてみると、FirefoxでもNetscapeでも同じ崩れが発生するということがわかって、これはブラウザではなくてこのブログのテンプレートに問題がありそうだということで、調査をしてみました。
レイアウトが崩れるというのはこのような状態です。
なぜか、IEは問題なく表示されていますので、この問題には気づきませんでした。

(左から、InternetExporer6、Netscae7.1、Firefox2.0、GoogleChrome1.0)
このブログのテンプレートのオリジナルは、
fuul's Display というところからいただいています。それを少し加工し、画像をオリジナルに変えて使っています。
そのオリジナルだと下の写真のように問題ありません。

(左から、InternetExporer6、Netscae7.1、Firefox2.0、GoogleChrome1.0)
そこで、再度オリジナルをベースに加工するという作業をおこないました。
オリジナルのスタイルシートに対して次の作業をひとつずつ表示を確認しながらおこないます。
・オリジナルよりもブログ全体の幅を広げ、メニュー部分と記事の部分を広げます。
・利用している画像のURLを変更します。
・レイアウトバランスをとるために、marginとpaddingの数値を微調整します。
・リンクのある文字の色とカーソルを合わせたときのデコレーションを変更します。
・コメントのツリー表示の定義を入れます。
・カレンダー表示の定義を入れます。
すべておこないました。
その結果がこれ。

(左から、InternetExporer6、Netscae7.1、Firefox2.0、GoogleChrome1.0)
直りました。
IEでもFirefoxでのNetscapeでもGoogle Chromeでも正しく表示されます。
(IE系、Mozilla系(Firefox、Netscape)、Safari系(Google Chrome)の違いとなるのでしょうか。)
でも、原因はわかりません。
仕方がないので、今まで使っていたテンプレートと今回再度作ったテンプレートをWordに移して一行一行の比較をおこないました。

そして見つけたのがこれ。
今まで使っていたスタイルシートには、余分に「}」がはいっています。IEはこれを余分なものとして解釈してくれて、IE以外は律儀に解釈したと思われます。私としては、コンピュータは曖昧さがなく律儀でなくてはいけないと思っていますので、IE以外の解釈の方が好ましく感じます。
これで、完了かと思って最終チェックとしていたところ、新旧で若干の動きの違いを発見。これはIEもMozilla系も同じことが起きています。
その現象とは、リンクされている文字のところにカーソルを置くと、
今まで使っていたスタイルシートは、
「文字の下にアンダーラインが出て背景がグレーになる。」 (これが私が意図した動き)
今回修正したテンプレートは、
「背景はグレーになるが、文字の下にアンダーラインが出るものと出ないものがある。」
アンダーラインが出るものと出ないものの違いは、どうも、そのリンク先にアクセスしたことがあるかどうかという違いのようです。通常、リンク先に飛ぶと、その文字が紫に変わるというように、リンク先にアクセスするとその扱いが変わるというのはよくあります。それが出ているようです。これは、過去にも経験したことがあったので、新旧のテンプレートで確認すると、
正しくは、
a:link {font-size:12px;color:#427DCC;text-decoration:none;}
a:visited {font-size:12px;color:#427DCC;text-decoration:none;}
a:hover {font-size:12px;color:#427DCC;text-decoration:underline;background-color:#d1d1d1;}
a:active {font-size:12px;color:#427DCC;text-decoration:none;}
なのが、今回修正したものはオリジナルに従って、
a:link {font-size:12px;color:#427DCC;text-decoration:none;}
a:hover {font-size:12px;color:#427DCC;text-decoration:underline;background-color:#d1d1d1;}
a:active {font-size:12px;color:#427DCC;text-decoration:none;}
a:visited {font-size:12px;color:#427DCC;text-decoration:none;}
となっていました。
この順番で動きが違ってくるというわけです。
オリジナルに対する加工作業が、この点だけ漏れていました。
これで、正しいと思われるテンプレートにはなりましたが、またわずかな違い(下に追記)があります。IEとNN系をまったく同じにするのは仕様上不可能に近いかもしれませんが、テンプレートの作り方でなんとかできる部分はちょっとトライしてみたい気もあります。
ここでやっと本題。
Google Chromeのその後です。
かなり軽快で早い!
使いにくいと思っていたタブも違和感無く使いやすいです。
IEの重さに嫌気を持っているかたは一度試してみる価値はあると思います。
通常使うブラウザはIEにしてありますが、私は今はGoogle Chromeを使う機会の方が完全に多くなっています。
<追記>
記事のタイトル文字の大きさと色がIEとそれ以外のブラウザで異なっていましたが、テンプレートの、a:link、a:visited、a:hover、a:activeの定義行に全角スペースが入っていたためとわかりました。IEは全角スペースを無視してくれ、その他は全角スペースが入っているためにその定義が無視されていたようです。
あとひとつ、画像表示のvspace、hspaceがIEは効いて、そのほかのブラウザは効かないという問題のみ残っています。