G@MANIA ver.MT - CODE:Hyena -: カスタマイズ vol.7

02December
2003 : TuesdayID-18

スタイルカスタマイズ vol.7

body要素以下の部分をinboxという要素にして幅を固定する
マージンの無い枠線付きのブロックの重なってる部分を解消する

色々ありましたが、ようやくStylesheetテンプレート完成しました。
デフォルトのCleanスタイルシートテンプレートにWin IEで致命的とまでは行かないけれど欠陥があるらしくサイドメニューの幅の分、デフォルトでいうと200px分の空白がbody要素の右に出来るようで原因も改善方法も分からず、それなら違うテンプレートを改造した方が早いと思いこのレイアウトに成りました。
改造してた分を写し変えるだけだったので、楽と言えばらくでしたがブラウザが数回落ちたので何回か最初からやり直しました…。

イジり直すと気付かなかった問題点も新たに発見し、前に完成してたのよりも出来はよくなったと思います。Win IEの見え方テストしてくれた友人様に深く感謝を致しますデス。

イジり過ぎて全てを箇所書きするのは面倒なので（笑）、レイアウト上役に立った部分だけ書き留めておこうと思います。以下のような物です。

body要素以下の部分をinboxという要素にして幅を固定する

考え方としてはBlogで生成されるページにinboxという入れ物の中に入れるという事です。スタイルシートにinboxというidを記述してあげます。

#inbox { 

  margin-right: auto; 

  margin-left: auto; 

  padding: 0px ; 

  width: 800px; 

  background-color: #ffffff;

  }

こんな感じで記述します。右と左のマージンを自動にしているのでウィンドウサイズが800px以上の場合は、自動でマージンを取って中央にBlogで生成したページが来る様になります。

Main Indexに設定したスタイルシートを読み込ませるようにしてあげます。

<div id="inbox">

を<body>タグの下、</body>タグの上に

</div>

でdiv属性を閉じてあげます。2カラム、3カラムにしている場合は各アーカイブにもdiv属性を指定する必用があります。

マージンの無い枠線付きのブロックの重なってる部分を解消する

余りこういう場面に遭遇する事は無いかと思いますが、人によっては同じ日のエントリー同士は繋げたいと思うかもしれません。その場合はスタイルシートの.bolgbodyのマージンを0pxにすれば繋がるのですが（マージンを0pxにしたままでは違う日のエントリーも繋がる為.dateでmargin-top:10pxなどとしてマージンを取る必用あり）、borderで囲んでいる場合などはborderのtopとbottomが重なって太くなってしまいます。奇麗に重ねさせる場合には.blogbodyに、

margin-top:-1px

として重なる部分を消してあげると奇麗に重なります。borderの太さが1pxでは無い時は、そのborderの太さ分だけの数値を入力してあげましょう。