習慣e気持ち！本日発売２

▲TOP

今日はブログの幅について分かったこと書いて見ます。
シンプルのデザインはCSSファイルを開くと、
全体のところのWidthが760pxになっています。
タイトルやヘッダーなどの部分も760pxですね。
今回メニューに貼り付けるバナー台が幅200pxだったので
画像をフルに表示させるため、メニュー部分のWidthを
200pxに変更しました。すると画像が崩れました。

CSSファイルを良く見ていくと記事の部分のWidthを変更していないため、
メニューのWidth + 記事のWidthが全体のWidthの数値を超えていることが
分かりました。これが、記事がメニューの下に飛んだ原因の様です。

解決方法を考えましたが、
①全体の幅を広げる
②記事の幅を狭めてメニュー幅＋記事の幅を全体の幅760px以内に収める。

①ですとタイトルに画像を入れたりする場合に画像の幅なども変更しなければ
ならなそうなので、②に挑戦しました。

プレビューの結果はOKでした。但しメニュー幅＋記事幅＝全体幅にしてしまうと
メニューと記事がぴったりくっついてしまうことが分かりました。

そこで、記事幅を545pxまで狭めて見ました。

つまり　メニュー幅200px + 記事幅545px = 745px
760px - 745pxは15pxになり、メニューと記事の間に15pxの隙間ができました。

どうしてこうなるかとCSSを見ていると、メニューのfloatがleft, 記事のfloatがrightだから
かな。

とり合えず画面崩れがなおって　e気持ち！

Comment (0) | Trackback () | ▲TOP