スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


テンプレート部門に参加中。クリックしてくださると励みになります♪
--:--  |  スポンサー広告  |  EDIT  |  Top↑
2007.01/24 (Wed)

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は修飾的なことだけに限っていたので、そんなに苦労はなかったんですが。
なんせこういうサイトとかこういうサイトの信者(?)だった世代ですから……

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


テンプレート部門に参加中。クリックしてくださると励みになります♪
19:51  |  カスタマイズ色々  |  TB(0)  |  CM(2)  |  EDIT  |  Top↑

Comment

●んんっ?

おもろいサイトを紹介してくれて、どうも、ありがとう。
記事も詳しく書かれてあって、興味深いです。
(※お気に入り登録にさせて頂きました。)

ちなみに、僕のテンプレは、ボロボロでした・・・。
(あなたのブログも、IE5だけじゃない様な・・・。(苦笑))
 
手作りテンプレを勉強中なのですが、、
自分だけキレイに見れてるんじゃないかと
心配になって来てたりして・・・。(汗)

う~む・・・。

また来ます。
通りすがりのテンプレ職人。 |  2007.11.23(金) 14:32 | URL |  【編集】

●通りすがりのテンプレ職人さん。へ

古い記事にコメントどうもありがとうございます(;´▽`A``

上のサイトは便利ですが、IE以外のモダンブラウザ(テンプレ登録時のFC2の規約に載っているFIREFOX、OPERAなど)を使っている方は、バージョンアップさせるだろうから最新版で、IEの場合はユーザーの多いIE6とIE7で確認するだけで十分だと思いますよー。
(環境が許すなら、動作確認も出来るので、実地に作動させる方がいいかもです……IEの共存ソフトはすごく便利です! 前はIE6と7を総入れ替えして確認していたので;;)。
一応IE5.5までは対応させているつもりなんですが、IE5.01なんかは、デザインが限られてしまうので、ものによっては切り捨ててます;;
公式テンプレの多くも、IE6未満は切り捨てているようなので……。

私はIE4からIE5の移行期に、MAC・IEユーザーの友人(MAC・IEは今はもう滅びているものとしています;)と共同でサイトを始めたので、テーブルで固めた、古臭くてダサいけど誰にでも見れる安全なサイトってことを最優先にしてきて、長年、新しい技術や情報にまったく留意してなかったんです(おばさんにありがちな行動;)
ただしそのサイトは、さすがにちょっとでも危険なことは避けてきたため、今でもどんなブラウザで見ても、まったく崩れません……ソースはヒドイんですけどね;
それが約1年前にテンプレカスタマイズを機に、XHTMLやCSSレイアウトに開眼したので、初めて配布したテンプレなんか、作成までに約2ヶ月かかり、なのにミスがボロボロ出るという有様でした;
でも、約1年前のCSSレイアウト、CSSハック、何それ? っていう自分と比べると、これでもすごく進歩しているので; まだまだ至らないところも多々あると思いますが; これからもちょっとずつ色々なことを学んでいけたらなあと思ってます。
お互い、頑張りましょう!(^▽^)
どこ |  2007.11.23(金) 17:38 | URL |  【編集】

コメントを投稿する

URL
COMMENT
PASS  編集・削除するのに必要
SECRET  管理者だけにコメントを表示
 (現在非公開コメント投稿不可)
 

▲PageTop

Trackback

この記事のトラックバックURL

→http://dokode.blog87.fc2.com/tb.php/21-23d4f6b1
この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

▲PageTop

 | HOME | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。