というわけで、今日一日またもやblogのデザインをいじっていました。

とかくInternetExplorer系とその他(FirefoxやらGoogleChromeやら)のデザインが違う

基本的にこのblogを書いているときにまずチェックするのがInternetExplorerからなので、それでデザインを合わせればまずはよし、としています。

ちなみに、この記事を書く前に私がインストールしている上記の例の用なブラウザで見てみると見事に右にある「はず」のサイドバーが記事の下に押し込まれていたのでびっくりです。

よほどスタイルシートの解釈がこれらで違うんでしょうかね・・・。ここまで違うとそれはそれで面白いような気もしますが・・・。

Webデザイナーの方からするとこんなことではまりたくはないでしょうね・・・。

で、今回の変更はサイドバーの大きさの変更及び順序の入れ替え

サイドバーの大きさを変えるのにはかなり苦労をしました。

というのも、そもそも本体やサイドバーを制御しているCSSの項目が何か？を見なければならないからです。

まさかいちいちHTMLやらCSSを直接読んだのでは話にならないので、InternetExplorerの開発者モードを使って対象のタグにかかっているCSSの名前を見て追加していきました。

もちろん、FirefoxやGoogleChromeにも似たような機能はあります。(Firefoxはプラグインで。GoogleChromeは直接持ち)

あとはCSSの追加を使って微妙にデザインを変えていけばいいです。変えたい人は頑張ってください。

ちなみに、今の段階で追加されているスタイルシートは

やっていることは

• どのブラウザで見ても固定幅にならず、ブラウザ画面の大きさの90%で記事画面を表示すること
• サイドバーの幅を320px確保すること
• サイドバーの幅が広がるので、カレンダーの幅を300pxにする

これをはてなダイアリーのCSSとして記述すると

/* 記事を可変幅で表示する */
h1 { max-width: none }
.hatena-body { max-width: none }
div#simple-header { max-width: none }
/* サイドバーの幅を320pxにする */
div .main{ margin-right: -330px }
.main div.calendar { margin-right: 330px }
.main div.day { margin-right: 330px }
.commentshort span.timestamp { _right: 355px }
.sidebar { width:320px; margin-left: -320px }
/* カレンダーテーブルを300pxにする */
.sidebar table.calendar { width: 300px }

となります。面倒なのはサイドバーの幅を320pxにしたときに、記事側が320px分奪われると言うことを記述する必要があります。

ちなみに、この設定でもコメントの時間位置はかなりおかしいです。(IE側で準拠させましたが、FirefoxやGoogleChromeではかなり浮きます。意味としてはFirefox側の方が正しい)