IE5対策

MACだけじゃなくあらゆるブラウザでの表示結果がわかるというナイスなサイトを見つけました
browsershots

リクエスト（自分のURLをうちこみ、どのブラウザでの表示結果が知りたいかを選択）してから、実際見れるまで1時間以上かかったりもしますが、いったんPC切っても、数時間後でも、またそこにアクセスすれば、結果がわかっているので、すごーーーく、便利です

そこで見たところ、私のテンプレは主だったブラウザではOKだったものの、IE5ではレイアウトが崩れることがわかりました
その時、見た眼鏡テンプレをIE5にも対応させましたので、気になる方はダウンロードしなおしてください。
カスタマイズしてあるので、もう取り替えたくないという方は、以下の2箇所を変更すれば、IE5でも綺麗に見れるようになります。

その1

変更前
/* メイン囲み */
#main{
float: right; /* 右に回り込む */
width: 580px; /* メイン幅 */
margint: 0px;
padding: 0px;
}

上を下に全部でも該当箇所だけでもいいので変えてください。

変更後
/* メイン囲み */
#main{
float: right; /* 右に回り込む */
width: 560px; /* メイン幅 */
margint: 0px;
padding: 0px;
overflow:hidden;
}

その2

変更前
/* エントリー（記事） */

/* 記事囲み */
.entry_block {
text-align:left;
border-collapse:collapse; /* 余白をなしに */
background-color: #fff; /* 記事部分の背景色 */
border: 1px solid #000; /* 記事を実線で囲んでいます */
padding: 0px;
margin: 25px 15px 35px 10px;
}

変更後
/* エントリー（記事） */

/* 記事囲み */
.entry_block {
text-align:left;
border-collapse:collapse; /* 余白をなしに */
background-color: #fff; /* 記事部分の背景色 */
border: 1px solid #000; /* 記事を実線で囲んでいます */
padding: 0px;
margin: 25px 15px 35px 0px;
}

overflow:hidden;は入れても入れなくても……記事幅をはみ出すような画像を貼ると、はみ出した部分の画像は見れなくなるようですが、レイアウトは崩れなくなります。

下の記事で眼鏡テンプレを右メニューにする方法を書いてますが、右の場合は、leftとrightを下で書いた手順で交換し

右メニュー用の変更

/* エントリー（記事） */

/* 記事囲み */
.entry_block {
text-align:right;
border-collapse:collapse; /* 余白をなしに */
background-color: #fff; /* 記事部分の背景色 */
border: 1px solid #000; /* 記事を実線で囲んでいます */
padding: 0px;
margin: 25px 0px 35px 20px;
}

この部分を↑に直していただければ、IE5でも綺麗に見れます。

ふう、それにしても便利なものを見つけるたんびに、色々気にしなくちゃいけないこと増えるなあ……しかもこんな簡単なことで解決できるとは！！　今まで対応できてなかった方が馬鹿だわ……わかっているつもりと実際に理解しているのとでは大違いでした(-▽-u

どこドアはレベルアップした！　賢さが1あがった、体力が10下がった！
（解決方法自体は簡単でも、そこに思いいたるまではアホなので大変なのです；）

あとやっぱ、私レベルだと、最初から理詰めできちんと構築していくより、実地に見て、そこから模索していき、理論もそのために利用する……ってノリじゃないと、モチベーションも上がらないのよね……。
それと、どうしてもデザイン先行になるし……（今はレベル低めなので、デザインを考える時間の数倍、確認作業に費やしてはおりますが）。

そして、IEのバージョン違いを共存させるソフトも発見！
TredSoft
IEなんか沢山入れたら重くて仕方ないような気がしますが、大丈夫なのでしょうか？
IE5と6と7が共存できれば、テンプレのためだけじゃなく、そこそこ人が来るサイトもやっているので、便利は便利なんですが、どうしようかなあ……。

ところで、共有テンプレートにはIE6限定というのも多いのですが、私がレイアウトそのものをCSSでやり出して1ヵ月強というスキルのわりに色んなブラウザでの見え方気にするのは、サイトを一時期は、遠隔地に住んでいるMAC・IEユーザーと共同運営していたので、誰にでも見れるってことが最重要だったからかな……。
もっともサイトの方はレイアウトはテーブルONLYで、CSSは修飾的なことだけに限っていたので、そんなに苦労はなかったんですが。
なんせこういうサイトとかこういうサイトの信者（？）だった世代ですから……

自分の力不足や無知・アホさ加減に、めげそうになることも多いんですが　まだ今のところはやる気あるので、頑張りたいです……

眼鏡テンプレを右メニューにする方法

おはようございます。
眼鏡テンプレの右メニュー版を作って欲しいというメールをいただいたのですが、簡単にカスタマイズできますので、ここにやり方を書いておきますね
見本は今、表示している感じになります（って、いつまで表示しているかわからないんですが……爆）。
変更箇所は4つだけです。

●その1

/* メニュー囲み */
#menu_block{
float: left; /* 左に回り込む */
width: 220px; /* メニューの幅 */
background-color: #transparent; /* 背景を透明に */
margin: 0px;
padding:0px;
}

上記の箇所を探してください。
赤字のところを
float: right;
に変えてください。

●その2

/* メニュー内枠 */
.menu_body{
margin-left:10px;
padding: 0px;
}

赤字を
margin-right:10px;
に変えてください。

●その3

/* メニュータイトル */
.menu_title{
text-align: left;
font-size: 12px; /* メニュータイトルの大きさ */
color: #fff; /* メニュータイトルの色 */
background-color: #000; /* メニュータイトルの背景色 */
font-weight:bold; /* メニュータイトルの太さ */
margin:25px 0px 5px 10px;
padding: 4px 5px;
}

赤字を
margin:25px 10px 5px 0px;
に変えてください。

●その4

/* メイン囲み */
#main{
float: right; /* 右に回り込む */
width: 580px; /* メイン幅 */
margint: 0px;
padding: 0px;
}

赤字を
margin-right:10px;
に変えてください。

これでOKです
うまくいったら教えてくださると嬉しいです♪


どうでもいいことですが、一番上の
background-color: #transparent; /* 背景を透明に */
って#が余分なので、ソースのアホっぽさが気になるようでしたら#を削除、もしくは行ごと削除しちゃってください(^_^;)
この行自体あってもなくても、影響のない無駄なタグなので、そのままにしておいても問題はなく、見なかったことにして放置しても構いませんが(;^_^A
一度、そういうのちゃんと見直さないとねー