はてなダイアリーの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

回答の条件
  • 1人2回まで
  • 登録:2009/09/23 01:37:38
  • 終了:2009/09/23 11:32:52

ベストアンサー

id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422009/09/23 09:25:33

ポイント50pt

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

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

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


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

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

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

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


.hatena-body{

width: 80%;

margin: 0 auto;

padding: 0;

text-align: left;

position: relative;

}

id:Lowrence

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

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

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

2009/09/23 11:30:58

その他の回答(1件)

id:kaz No.1

kaz回答回数200ベストアンサー獲得回数422009/09/23 04:08:37

ポイント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;

}

id:Lowrence

kazさんのやり方を試してみたら、確かに間隔が広がりました。

ありがとうございます。

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

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

2009/09/23 09:06:28
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422009/09/23 09:25:33ここでベストアンサー

ポイント50pt

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

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

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


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

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

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

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


.hatena-body{

width: 80%;

margin: 0 auto;

padding: 0;

text-align: left;

position: relative;

}

id:Lowrence

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

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

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

2009/09/23 11:30:58
  • id:Lowrence
    なんで、回答ポイントが50で勝手に決まってるんだろう・・・。
    とりあえず、解決してくださった方には個人的にポイント送ります。
    貧乏なので、少ないですけど・・・orz
  • id:fut573
    記事とサイドバーとの間隔を広げたということは、「記事+間隔+sidebar」(hatena-bodyの内部)の横幅が増加したということです。
    増加した横幅の分だけ
    1.sidebarを狭くするか
    2.記事を狭くするか
    3.hatena-bodyを広くする
    といった対策が必要なように見えます。
  • id:Lowrence
    fut573>>
    なるほど。
    単純に横幅を増加させるだけじゃ駄目なんですね。
    知識が無いと何事も大変だ・・・
  • id:fut573
    ちなみにdiv.hatena.bodyは
    http://f.hatena.ne.jp/fut573/20090923091927
    ↑このような状態でして
    サイドバーの右側の空間は現在、div.hatena.bodyに含まれていません。
    サイドバーの右側を有効活用したい場合、

    .hatena-body{
    width: 80%;←これを90%位に
    margin: 0 auto;
    padding: 0;
    text-align: left;
    position: relative;
    }
    という解決法もありそうです。
  • id:Lowrence
    fut573さん>>
    アドバイスありがとうございました。
    本当に少ないですが、御礼としてポイントを送っておきました。
  • id:Yuichirou
    質問通知メールを見て回答しようと思ったら終わっていた……
    ついでなんで
    > なんで、回答ポイントが50で勝手に決まってるんだろう・・・。
    この疑問に回答しちゃいます。

    質問終了ボタンを押して表示されるポイントの振り分けで「50」とかあるのはあくまで初期値で、この値は書き換えることができます。その際、今までに払ったポイント(質問開始ポイントと回答閲覧ポイントの合計)を超えるポイントを振っても構いません。
    次回の質問時に試してみてください。
  • id:Lowrence
    Yuichirouさん>>

    これで解決したかな、と思って終了しちゃいました~。
    ごめんなさい(;´Д`)
    Kazさんや、fut573さんが教えてくださった方法以外にも、記事とサイドバーの間隔を調節する方法はあるんですか!?
    CSSに関しては、素人なんでさっぱりです・・・orz

    はてな人力検索で、質問側として参加するのは初めてだったのでいまいち仕様が分かりませんでした。
    今度の質問のときにでも試してみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません