Googleは日頃大いに活用させてもらっているのですが、検索結果からページを辿る際には、キーワードのハイライトがあることから、元のページではなくGoogleで保存されたキャッシュのページを見ることも多々あります。特にファイルサイズが大きい場合は、キーワードを見つけやすくするため、その傾向がより高いです。
そんなわけでキャッシュのページをよく見るのですが、正しいHTML+CSSで作成されたページのキャッシュを見た場合、あの上部に挿入されている、「これはGoogleのhttp://〜のキャッシュです」云々と書かれている枠（tableによる）が崩れた表示になってしまうことがたまにあります。
挿入されるtableとその内部はHTML的にかなり無茶苦茶なマークアップであり、またその挿入の仕方もかなり無理矢理なので、そこをなんとか改善してほしい……という気持ちはあるものの、一般利用者にとってはそんな事情は窺い知ることはできず、ただ「表示が崩れた」と見られるのみでありましょう。もしかするとその表示の崩れた理由が「CSSを使っているからだ」などと思われるかも知れず、そうなるのはちょいと癪です。ならばこちらで、キャッシュに挿入されるtableを整形してやればいいではないか、ということを思いつきました。勿論CSSを使って。
CSSの対応が比較的進んでいるMozilla(Gecko)系ブラウザやOperaへの対処は、さほど難しくはないです。Googleのキャッシュに挿入されるtable要素にはborderやらwidthやらの属性も付いてくるので、属性セレクタを使うことにより、自サイト内のtable要素に対するスタイルと区別すればよいわけです。
Googleキャッシュのtableは三重になっており、外側に二重のtable、あと、「これらのキーワードがハイライトされています」の部分でもう一つtableがあります。これらはそれぞれ外側から、
<table border="1" width="100%"><table border="1" bgcolor="#ffffff" cellpadding="10" cellspacing="0" width="100%" color="#ffffff"><table border="0" cellpadding="0" cellspacing="0">というタグになっています。当サイト内のtableではborder属性は（多分）使っていなかったので、子孫セレクタとの合わせ技で
table[border="1"] { ... }table[border="1"] table[border="1"] { ... }table[border="1"] table[border="1"] table[border="0"] { ... }という指定にしてみました。Operaでは、複数の属性を参照する属性セレクタ（ table[border="1"][width="100%"] とか）が効かないようなので、その辺も考慮して。あと、tableの中にはbやらfontやらcodeやらのインライン要素も入っているので、それを逆に利用してスタイル指定してみたり。
で、取り敢えず対処前から対処後のようにすることができました。具体的なスタイル指定は当サイトCSSファイルの末尾の方を参照。
さてMozilla、Operaはいいとして、問題はIEであります。やはり多くのお客さんはIE利用者ですので、むしろこちらの方をぜひ対処したいのですが、IEでは属性セレクタが使えないというのが難点。せめて一番外側のtableにclass属性のひとつも付けてりゃいいのに、とGoogleへのうらみ言の一つも言いたくなるところ。
まあ、class属性がないなら付けるしかないでしょうなあ、というわけであまり使いたくなかった奥の手、JavaScriptの出番であります。ページ読み込み時に実行させているスクリプトに以下のコードを追加しました。
/* Googleのキャッシュで挿入されるtableにclass付けする */
function googleCacheClass() {
if (!location.host.match(/(google|216\.239\.\d{2}\.100)/i)) return;
gTable = document.getElementsByTagName('table').item(0);
gTable.className = 'google-cache';
}で、このclass付けされたtableを元にしたスタイル指定を更に追加。実際の指定についてはこちらも当サイトCSSファイルの末尾の方を参照下さい。これでIEにも（スクリプトが有効であれば）一応対処できました。
今回のこれは「いくらなんでもやり過ぎなのでは」と自分でも疑問だったりします。普通に閲覧する際にも大きくなったCSSファイルやスクリプトを読み込ませてしまうデメリットを考えると、あまりオススメはできません。と念のため追記。
（2003年5月11日）
北村曉 kits@akatsukinishisu.net