1199215414 ダイアリーのフッタにsection、calendar各モジュールを設置しているのですが、見栄えが優れません。


http://d.hatena.ne.jp/thyself2005/20070807/p2

一見問題ないように思えますが、例えば上記のような短い記事の場合、サイドバーとフッタ部分が交差してしまい、非常に見づらいカタチとなってしまいます。
そこで、このseciton&calendar各モジュールの幅を記事枠内に収めるためには、スタイルシートにどのような指定をすればよいのでしょうか?

参考までに、希望の(こうなりたい)イメージ図を添付します。
また現在使用しているデザインテーマは「hatena2-black」で、div.dayやdiv.main等の、いわゆる記事周りについては何も指定しておりません。
(参考:http://d.hatena.ne.jp/themesample?hatena2-black

ご回答宜しくお願いいたします。

回答の条件
  • URL必須
  • 1人1回まで
  • 登録:2008/01/02 04:23:34
  • 終了:2008/01/04 06:46:06

ベストアンサー

id:Yuichirou No.1

Yuichirou回答回数112ベストアンサー獲得回数362008/01/02 10:28:43

ポイント60pt

hatena2系テーマでは、div.sidebarをdiv.mainより後に書きながら、段組みにfloatを使用し、かつdiv.sidebarの幅を固定するために、「ネガティブマージン」というテクニックを使用しています。

参照:CSSによる段組(マルチカラム)レイアウト講座 - CSSによる2カラム(2段組)レイアウト - メインカラム幅可変、サイドバー幅固定 2カラム

このテクニックの注意点として、div.mainの幅が100%となる、つまりサイドバーの部分を含んでしまう点があります。hatena2系テーマでは、

.main div.calendar, .main div.day{
  margin-right: 235px;
}

と設定することで、div.mainの中の要素がサイドバーとかぶらないようにしています。

つまり、この設定をフッタ部分にも適用させればいいのです。例えば、

.main div.hatena-module {
  margin-right: 235px;
}

のように設定すればよいでしょう。

id:thyself2005

ありがとうございます。

枠線も含め、

div.main .hatena-module {

margin-right: 235px;

border-top: 1px solid #56575f;

border-right: 1px solid #56575f;

}

と設定することで問題が解決できました。

2008/01/04 06:44:35
  • id:thyself2005
    添付のイメージ図について訂正させていただきます。
    記事枠内のコメント・トラックバック欄と同じような見栄えにしたいのです。(四方がきちんと枠で囲まれ、サイドバー部分にまで飛び出すことのない状態)

    ご回答宜しくお願いいたします。
  • id:thyself2005
    修正したイメージ図を添付しておきます。
    ご回答宜しくお願いいたします。

    修正版イメージ図
    http://f.hatena.ne.jp/thyself2005/20080102051843

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

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

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

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