人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなダイアリーのCSSの記述についての質問があります。
私はこのようなブログを運営しています。
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

●質問者: れんす
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:CSS firefox IE IE8 Safari
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kaz
●50ポイント

レイアウトの手法が私のやりかたと違うため、

ぱっと分かるのは対処療法的でスマートではありませんが、

以下の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さんのやり方を試してみたら、確かに間隔が広がりました。

ありがとうございます。

ただ、記事の領域を狭くして間隔を広くするというよりかは、記事の領域はそのままにサイドバーの右側の空間を減らして?間隔を広げたいと考えているのですが・・・。

長文の記事が多いため、できるだけ一文を長く書けるスペースを確保したいのです。


2 ● kaz
●50ポイント ベストアンサー

レイアウト上、実はサイドバーの右側に空間はありません。

「空いているように見えるスペース」を広げるには、以下を調整すれば可能です。

※右側に空間がないために、IE 系でトラブルが発生しているという訳です


赤字の部分で「全体の幅が、ブラウザ幅の 80% になるように」指定されています。

ここを大きくすれば、全体の幅を広げる事が可能で、90% 前後が良いと思います。

※多少クセのあるレイアウト手法なので 97% 以上では、

ブラウザの幅によっては右にはみだしてしまうようです。


.hatena-body{

width: 80%;

margin: 0 auto;

padding: 0;

text-align: left;

position: relative;

}

◎質問者からの返答

最初の回答で教えていただいたものと、今回の回答で教えていただいたものを組み合わせることで、理想としてた感じのデザインに変更することができました。

IE環境でもページを開いてみましたが、問題なく表示されていました。

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ