テンプレ改修補足。
今回、テンプレートを改修するにあたって、色を使用することによりコントラストがはっきりしたため、ピクセル単位でのずれが非常に気になって・・・。ピクセル単位できちっとあわせるために、その辺を重点的に見直しました。また、以前のテンプレでは白背景での白メインだったせいか、トップページが下に長くてもそれほど気にならなかったのですが、今回のテンプレートにして、やけに下に長いのが気になったので、一部にスクロールバーを設定することによりトップページが冗長化することを避けました。まぁ気休め程度ですが。（苦笑）
以下、以上2点の覚え書きです。
■ピクセル単位でのレイアウトあわせ
レイアウトがピクセル単位でずれてしまうのは、ブラウザによっての width 解釈の違いによるところが大きいと思います。ましてや、ie ではきちんと表示されるレイアウトでも、mozira 系のブラウザで見ると、何じゃこりゃ！ってな具合にレイアウトが駄目駄目になってたりして・・・。以前のレイアウトの時も苦労しましたが、今回は以下のような設定をして回避してます。ただ、mac の safari なんかでは表示確認してないので、ずれてるかもしれませんが・・・理論上は崩れないはずです。（苦笑）
width 解釈の違いについては下記を参照してください。非常にわかりやすく出てますので。
→ ADP: IE6のwidth解釈バグ対処法
このブログのレイアウトは、全体の width が830pxで、左サイドバーが155px、カレンダーが30px、メインエントリー部が490px、右サイドバーが155pxで設定してあります。合計してぴったり830px。
どのようにレイアウトしているかというと、基本的に、ブラウザによってレイアウトが崩れるのは、width とpadding・borderを一緒に指定することによって発生するので、それを避けるために各パーツ（左サイドバー等）の要素の外側に、さらに div で括ってレイアウト用のボックスを設定しています。
どのようになっているかというと、左サイドバーを例にあげると下記のようになっています。
<!– 左レイアウトBOX開始 –>
<div id="leftbox">
<!– 左サイドバー開始 –>
<div id="links-left">
：
：
中略
：
；
</div><!– 左サイドバー終了 –>
</div><!– 左レイアウトBOX終了 –>
links-left という要素を leftbox という要素で括っています。で、スタイルシートの設定はどうなっているかというと、下記のようになっています。
#leftbox {
margin: 0px;
padding: 0px;
float: left;
width: 155px;
}
外側の leftbox で width を固定し、margin や padding の設定はその中側の別要素それぞれで行う形にすることにより、width の解釈違いによるレイアウト崩れを回避し、ピクセル単位でレイアウトをあわせています。
■スクロールバーの設定
最近のコメント・トラックバック、中央コンテンツ部分の以降のエントリー30件部分にスクロールバーを設定し、トップページが下へ長くなるのをある程度おさえました。設定自体は、それぞれの class に スクロールバーの style 設定を下記青字のように付与しただけです。
<div class="sidetitle" id="rcname">
最近のコメント
</div>
<div class="side" id="rclist" style="overflow: auto;height:250px;margin-right:5px;">
<a href="<$MTBlogURL$>commentslist.php">→ 全コメントリスト</a>
<br />
<br />
<MTEntries recently_commented_on="10">
<ul>・<a href="<$MTEntryLink$>"><$MTEntryTitle trimj_to="27"$></a><br/>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$>
あわせて、スクロールバーの色設定をスタイルシートの body 要素に以下のように付与しました。
scrollbar-base-color: #dcdcdc;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #dcdcdc;
scrollbar-darkshadow-color: #dcdcdc;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #666666;
スクロールバーの色設定に関しては ie 独自の拡張になっているので ie 限定のスタイル設定となります。また、FireFox で見ると横スクロールバーが現れてしまっていますが、これも回避の方法が今のところありません。ie 独自拡張で、横スクロールバーを隠すスタイルオプションがありますが、FireFox ではサポートされていないので、使えず・・・。何かいい対処方法ありませんかねぇ。
以上。