Seesaa、2カラムを1カラムへ仕立て直す

Seesaaブログでは、2カラム(右サイドバー)、2カラム(左サイドバー)と3カラムはデフォルトで準備されているのですが、1カラムのデザインは殆ど存在せず、選択もできないみたいです。

仕方がないので、下記の通り自分で仕立て直しました。仕立て直したデザインは、「シンプルCグレー」です。

2カラムを1カラムへ仕立て直す

仕立て直すといっても、2カラムのサイドバー部分をメインの下に移動させるだけです。

シンプルCグレーの描画エリアのもともとの作りは、下記のとおりです。

seesaa-2column-default
Seesaaブログ、2カラム、初期設定

描画エリアの幅は960px(class=”wrapper”, width: 960px)でした。
ヘッダー、メイン、サイド、フッターの4ブロックをそれぞれclass=”wrapper”の100%に指定します。

ヘッダーとフッターは元々この幅で指定されています。
間に挟まっているメインとサイドがそれぞれ、左寄せの620pxと右寄せの300pxで、間に40pxの余白が作られていました。

メインとサイドの幅をそれぞれ100%にすると、ふわふわと左に寄っていたメインとふわふわと右に寄っていたサイドは、共存できなくなり、横に並べなくなるので、上下に並びます。

ただ、それだけのことです。笑。

但し、パソ、タブレット、スマホのそれぞれのデバイスに合わせた、@media screenを設定している場合は、関連部分のwidthも100%に調整しないと変な余白ができちゃうみたいです。

CSS

基本設定

.main {
  width: 100%;
}
.side {
  width: 100%;
}

@media screen部分(このブログの場合修正個所は1つ)

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .l-wrapper {
    width: 768px;
  }
  .main {
    width: 100%;
  }

コメントを残す

メールアドレスが公開されることはありません。