私はこのようなブログを運営しています。
http://d.hatena.ne.jp/Lowrence/
デザインは公開デザインの方から気に入ったものを選んでいます。
ただ、記事とサイドバーの間隔が狭いので、自分で調節しました。
結果、Firefox/Safari等では問題なく私のブログは表示できたものの、IEだとサイドバーの右側がきれてしまうのです。
対処法を教えてください。
Firefox
http://d.hatena.ne.jp/Lowrence/files/BlogSS_1.PNG
IE8
http://d.hatena.ne.jp/Lowrence/files/BlogSS_2.PNG
CSS
http://d.hatena.ne.jp/Lowrence/files/breeze.css
http://d.hatena.ne.jp/Lowrence/files/base.css
http://d.hatena.ne.jp/Lowrence/files/headerstyle_wh.css
私が行った変更
http://d.hatena.ne.jp/Lowrence/files/%E5%A4%89%E6%9B%B4.txt
No.2
200
42
50pt
レイアウト上、実はサイドバーの右側に空間はありません。
「空いているように見えるスペース」を広げるには、以下を調整すれば可能です。
※右側に空間がないために、IE 系でトラブルが発生しているという訳です
赤字の部分で「全体の幅が、ブラウザ幅の 80% になるように」指定されています。
ここを大きくすれば、全体の幅を広げる事が可能で、90% 前後が良いと思います。
※多少クセのあるレイアウト手法なので 97% 以上では、
ブラウザの幅によっては右にはみだしてしまうようです。
.hatena-body{
width: 80%;
margin: 0 auto;
padding: 0;
text-align: left;
position: relative;
}
No.1
20042
50pt
レイアウトの手法が私のやりかたと違うため、
ぱっと分かるのは対処療法的でスマートではありませんが、
以下の2箇所を変更すれば、とりあえず可能です。
※自分の環境では IE 6 / 7 / 8 で OK でしたが
問題があれば、スクリーンショットなどと併せて
お知らせいただければ修正いたします。
・padding: の 2 番目の値の大きさで間隔を調整します
・2つの数字は同じ値にしてください
.day{
margin: 0 0 3em 0;
padding: 0 30px 0 0;
position: relative;
top: 0;
left: 0;
font-size: 80%;
}
.main div.calendar{
margin: 0 250px 0 10px;
padding: 0 30px 0 0;
}
kazさんのやり方を試してみたら、確かに間隔が広がりました。
ありがとうございます。
ただ、記事の領域を狭くして間隔を広くするというよりかは、記事の領域はそのままにサイドバーの右側の空間を減らして？間隔を広げたいと考えているのですが・・・。
長文の記事が多いため、できるだけ一文を長く書けるスペースを確保したいのです。
No.2
20042
ここでベストアンサー
50pt
レイアウト上、実はサイドバーの右側に空間はありません。
「空いているように見えるスペース」を広げるには、以下を調整すれば可能です。
※右側に空間がないために、IE 系でトラブルが発生しているという訳です
赤字の部分で「全体の幅が、ブラウザ幅の 80% になるように」指定されています。
ここを大きくすれば、全体の幅を広げる事が可能で、90% 前後が良いと思います。
※多少クセのあるレイアウト手法なので 97% 以上では、
ブラウザの幅によっては右にはみだしてしまうようです。
.hatena-body{
width: 80%;
margin: 0 auto;
padding: 0;
text-align: left;
position: relative;
}
最初の回答で教えていただいたものと、今回の回答で教えていただいたものを組み合わせることで、理想としてた感じのデザインに変更することができました。
IE環境でもページを開いてみましたが、問題なく表示されていました。
ありがとうございました。
れんす
2009/09/23 01:46:09
3
3
fut573
Yuichirou
1
1
2
最初の回答で教えていただいたものと、今回の回答で教えていただいたものを組み合わせることで、理想としてた感じのデザインに変更することができました。
IE環境でもページを開いてみましたが、問題なく表示されていました。
ありがとうございました。