香雪?GB日記 このページをアンテナに追加 RSSフィード

2004-05-12

[] テーマhatenaのCSSエラー  テーマhatenaのCSSエラー - 香雪?GB日記 を含むブックマーク はてなブックマーク -  テーマhatenaのCSSエラー - 香雪?GB日記  テーマhatenaのCSSエラー - 香雪?GB日記 のブックマークコメント

id:yukatti:20040510#p1で指摘したテーマhatenaのCSSエラーの修正→http://hatena.g.hatena.ne.jp/hatenagroup/20040511#1084267924 

対応ありがとうございました。反省として、実はこのエラーははてダのβテスト時から気になっていて…もっと早くにきちんとお願いしておけば良かったなと反省してます。

[][] 続・テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。(はてなグループへの要望 続・テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。(はてなグループへの要望) - 香雪?GB日記 を含むブックマーク はてなブックマーク -  続・テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。(はてなグループへの要望) - 香雪?GB日記  続・テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。(はてなグループへの要望) - 香雪?GB日記 のブックマークコメント

http://beta.g.hatena.ne.jp/yukatti/20040510#p1の続きです。

今回の、「参照元による文字コード指定」ではうまくいかない…

id:sasadaさんのid:sasada:20040511#1084253284の「テーマ(スタイルシート)の文字化け(?)問題」に関する考察と提案を受けて、

はてなグループ内のHTMLヘッダ内の外部スタイルシートの指定部分にて、

<link rel="stylesheet" href="http://d.hatena.ne.jp/theme/hatena/hatena.css" type="text/css" media="all" charset="euc-jp"
>

とし、文字コードをEUC-JPに指定しました。

はてなグループ日記5/11「はてなグループ内のスタイルシートの指定について」より

という対策がされました。

しかしこの「参照元による文字コード指定」の方法では文字化け・トップページのレイアウト崩れともに直らなかったという報告が…実はid:yukatti:20040510#p1で「あれこれ試し」とだけ簡単に書いてしまっていましたが、そのなかで試してうまく行かなかった方法の一つが今回の対策の<:link rel="stylesheet" href="http://d.hatena.ne.jp/theme/hatena/hatena.css" type="text/css" media="all" charset="euc-jp">でしたので、うーん、ローカルで駄目だったことでやはり駄目かという感じなのです。うまくいった方法のみ書いてしまいましたが、他に試してみたのならうまくいかなかったこと方法もちゃんと書けば良かった。反省。

IE6でのレイアウト崩れを防ぐことが出来る方法は?

その1。グループ用にユニコードで保存したテーマを準備する

で、id:yukatti:20040510#p1でわたしがローカルで試した範囲では、IE6のレイアウト崩れが解消されるのは、

id:yukatti:20040510#p1

の二種の方法。

また、

ともあるように、これらの問題の確実な解決のための方法一つとしてはまず、はてなグループとグループ適用テーマ=外部スタイルシートの文字コードを統一し二つとも同じ文字コードにするほうことが有効なのではないかと思われます。

※この点については、繰り返しになりますが、id:yukatti:20040510#p1に書いたように、既に4月にid:hoshikuzuさんがhttp://beta.g.hatena.ne.jp/hoshikuzu/20040424で指摘・示唆しておられます。

そのための具体的方法として今、自分として思いつくのは、

…などで指摘されているように、グループ用にutf-8コンバートしたテーマを準備していただくことです。

betaグループトップページ(テーマhatena適用)のIE6レイアウト崩れ防止に限って言えば

なお、betaグループトップページ(http://beta.g.hatena.ne.jp/。テーマhatena適用)のIE6レイアウト崩れ防止に限って言えば、id:yukatti:20040510#p1に書いていますが、

当面の対処方法として、id:suikanさんご指摘の通り、グループの設定画面に

td.main {
  vertical-align : top;
}

を追加する

id:yukatti:20040510#p1

とスタイルシート欄で対処する方法や、HTMLを変更する

ローカルで試してみたところでは、はてな側のCGI出力テンプレートレベルの修正で左サイドメニュー用のセル

<td valign="top" class="sidebar">

にそろえてメインメニューのセルも

<td valign="top" class="main">

にしてやる(valign="top"を追加する)と崩れなくなるようです。スマートではないけれど。

id:yukatti:20040510#p1

の方法によってでも修正可能ではないかと思います。

id:sasadaさんがhttp://beta.g.hatena.ne.jp/sasada/20040512#1084344640でご指摘のように、現状のIE6レイアウト崩れは結局、スタイルシートhatena.cssの指定が有効に働いていないためにメインメニューのほうのセルtdがHTMLの既定値「middle」になってしまっているということなんですよね…。しかも上に書いたようにサイドメニュー用のセルtdにはHTMLでvalign="top"が指定されているけれど、メインメニューのセルではそれが落ちている…という。

で、id:yukatti:20040510#p1の考察はそこからスタートしたものです。はてなグループのグループトップページのHTMLははてなダイアリーのトップページ(http://d.hatena.ne.jp/)のそれを流用しています。今回のレイアウトに関わる点での違いは、はてなダイアリー側にはサイドメニュー用のセルtdにvalign="top"の指定がなく、両セルともスタイルシートにて垂直位置を指定しているということ、つまり、はてなダイアリートップページではちゃんとhatena.cssのtd:sidebar, td:mainにある「vertical-align: top;」指定が有効になっているのです。一方のbetaグループトップは同じスタイルシートhatena.cssを適用させているのに、なぜ「vertical-align: top;」が有効になってないの?という疑問から考察しています。


または、その2。テーマ=外部スタイルシートの先頭に@charset "euc-jp";を加える

また上記とは別の方法として、外部スタイルシート(ここでは、現在のはてなダイアリー各テーマ)の先頭にCSSファイルの文字コードを明示して宣言する@charset規則を入れる方法が有効かもしれません。各テーマの先頭に@charset規則を追記します。

先ほど思いついてローカルで試してみました。この参考先として

ここに指摘されているように、…たとえばテーマhatenaであれば、hatena.cssの先頭に

@charset "euc-jp";

を入れてやるという方法です。

これで、betaグループトップページ(http://beta.g.hatena.ne.jp/)やid:frainさんのテーマtriple_gray.css(http://d.hatena.ne.jp/theme/triple_gray/triple_gray.css)でのIE6でのレイアウト崩れはローカルでは解消されました。はてなダイアリー側に@charset "euc-jp";を追加したテーマスタイルシートを適用させても問題なく表示されました。

以上ご報告まで。ご検討頂けたらと思います。>g:hatena:id:hatenagroup、みなさま

  • さらに、下コメント欄(id:yukatti:20040512#c)のhoshikuzuさんの提案(HTTP応答ヘッダに指定があればいい→.htaccessでの対処法)もぜひご覧下さい。

hoshikuzuhoshikuzu2004/05/12 20:34ども(^^)
テーマhatenaのCSSをダウンロードして、charset等は何もいじらずに、IE6のユーザスタイルシートとして設定してみました。トップページ、http://beta.g.hatena.ne.jp/ は正常にレンダリングされました。すんげぇ謎です。
一般的には、まぁ敵はIEばかりではないような気もしまして、contentとかで日本語を使いたいなどを真剣に考えたスタイルシート(テーマ)の場合には、現状ではバックスラッシュによる表記が「はてな」では許されていないこともあいまって、HTMLとCSSのcharsetが合致しないと苦戦することが予想されます。(多くの)グループ用の為にも、HTMLがutf-8で使える専用のスタイルシート(テーマ)を用意することがひょっとしたら手っ取り早いのではと思っています。(検証なしで申し訳ありませんがブラウザの負荷を考えるとそんな気が。)それと、content等で必要ないならスタイルから日本語はカットしてしまえばOKのような気もします。hatena.cssでは、日本語を使っているのはコメントぐらいなので、hatena.cssだけに限って言えば、スタイルシートがascii文字だけで勝負すればいいことがあるかもしれません。これも自信がありませんが。

yukattiyukatti2004/05/12 20:58検証他ご教示ありがとうございます。IE6が悪いばかりではないというのはそうですね。いろいろ検索してみたらこの種の問題の発生ブラウザはOperaだったり他のだったり…つまりどのブラウザでも起こりうる、ということではと思いました。。で、charsetを合致させるためにutf-8のグループ専用スタイルシートを準備するのがベターなようにわたしにも思えましたが、sasadaさんも指摘されてますけどtDiaryからテーマをもらってきている(?)ことでGPLライセンスとの兼ね合いがあるのかないのかとかがちょっとわからないです。そのあたりどうなんでしょうか…。/テーマのスタイルシートから日本語カット>tDiaryメーリングリストのアーカイブでも「@charset "euc-jp";を入れてまわる」か 「CSSファイル中の日本語のコメントを削除してしまう」が対策として言及されてますね…。

hoshikuzuhoshikuzu2004/05/12 20:59ふと思いましたが、HTTP応答ヘッダに指定があればいいのかな?htaccessに、AddType "text/css; charset=EUC_JP" css とかがあれば、、どうにかなるのかも。

hoshikuzuhoshikuzu2004/05/12 21:02ふむ、現行では応答ヘッダにContent-Type: text/html charset=utf-8しか帰ってきてませんね。

hoshikuzuhoshikuzu2004/05/12 21:04あ、EUC_JPじゃぁなくて(殺)EUC-JPでした。とほほ。

hoshikuzuhoshikuzu2004/05/12 21:11htaccessでちょっとやってみていただけたらいいかも>はてな近藤さん。出来たらすんげぇ楽勝ですので。とりあえず、beta.g.hatenaでだけ実験はいかがでしょう。

yukattiyukatti2004/05/13 04:31なるほど!それだ。.htaccessでCSSのcharsetパラメタを指定してしまう、と。その方法が良さそうだしそれで出来たら確かにいちばん楽勝ですね。