http://d.hatena.ne.jp/rela1470/に使います。IEで見るとすばらしいほど幅が足りていません。よろしくお願いいたします。
CSSを編集すると基本的にどのデザインでも可能です。
※現在使用しているデザインもCSSを編集して、サイドバーのモジュールタイトルと表示部分の背景画像の幅を大きくした画像を用意すれば可能なはずです。(ちょっと面倒かもしれませんが・・・)
※全体(#simple-header、h1、.hatena-body)とサイドバー(.sidebar、.hatena-module)等の幅(width)を変更する必要があります。
※デザインによっては、その他の部分を変更する必要があります。
「circle-B」のようにサイドバーのタイトルおよび表示部分に背景画像を使用していないデザインを変更すると比較的簡単に出来ると思います。
http://d.hatena.ne.jp/designset/1251
※ただし、「circle-B」の場合はタイトル画像を使用していますので、この画像をサイドバーの幅を大きくした分だけ大きい画像に変更する必要があります。
・「circle-B」のタイトル背景画像
http://img.f.hatena.ne.jp/images/fotolife/i/ico01/20090224/20090...
「灰色」でしたら、タイトルにも画像を使用していないのでもっと簡単だと思います。
http://d.hatena.ne.jp/designset/1210
「デザイン編集」→「詳細」のスタイルシート欄に以下の記述を追加すると、サイドバーを400pxに変更できます。
※サイドバーの幅を大きくする分だけ全体の幅を大きくしています。
※このデザインは、記事部分の右側に幅(マージン)を取り、サイドバーの左側の幅(マージン)をマイナスにして上に持ち上げているので、同じようにしてサイドバーの新しい幅とほぼ同じくらいのマージンをそれぞれ指定しました。
※サイドバーの幅よりもマージンを大きくする必要があります。
※「margin-left」はマイナスの値ですので注意してください。
(サイドバーの幅がもう少し小さくても大丈夫なら、「margin-right」と「margin-left」の値も同じように小さくして大丈夫です。)
#simple-header, h1,
.hatena-body {
width: 95%;
max-width: 1100px;
}
.main div.calendar,
.main div.day {
margin-right: 410px;
}
.sidebar {
width: 400px;
margin-left:-408px;
}
コメント(1件)
「.sidebar」のマージンにIE用のCSSハックを追加してください。(※該当する部分のみ記載しますが、変更後は以下のようになります。)
.sidebar {
width: 400px;
margin-left:-401px;
_margin-left: -400px;
*margin-left: -400px;
}
※サイドバーの幅を400px以外にしたい場合は、サイドバーの幅に10px程度足した数値を「.main div.calendar」「.main div.day」のマージンに指定すれば良いです。
サイドバーのマージンは、IE用のCSSハックがサイドバーの幅と同じサイズで、それ以外(通常のマージン指定)は1px足した数値にすれば良いです。