質問: ダイアリーのフッタにsection、calendar各モジュールを設置しているのですが、見栄えが優れません。 一見問題ないように思えますが、例えば上記のような短い記事の場合、サイドバーとフッタ部分が交差してしまい、非常に見づらいカタチとなってしまいます。 そこで、このseciton&calendar各モジュールの幅を記事枠内に収めるためには、スタイルシートにどのような指定をすればよいのでしょうか? 参考までに、希望の(こうなりたい)イメージ図を添付します。 また現在使用しているデザインテーマは「hatena2-black」で、div.dayやdiv.main等の、いわゆる記事周りについては何も指定しておりません。 (参考:) ご回答宜しくお願いいたします。
回答: 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; } ``` のように設定すればよいでしょう。