ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。




新デザインのCSS編集についていろいろとみてきましたが、
今回は横幅がどうなっているかみてみましょう。
新デザインのCSS編集用デザインのレイアウトは5種類あります。
そして、それぞれの横幅を指定しているCSSは、
次のようになっています。
【1】2カラム・メニュー左の場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnA .skinMainArea {
float: right;
width: 665px;
}
③.columnA .skinSubA {
float: left;
width: 300px;
}
【2】2カラム・メニュー右の場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnB .skinMainArea {
float: left;
width: 665px;
}
③.columnB .skinSubA {
float: right;
width: 300px;
}
【3】3カラム・右ワイドメニューの場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnC .skinMainArea {
float: left;
width: 470px;
}
③.columnC .layoutContentsB {
float: left;
width: 180px;
}
④.columnC .skinSubA {
float: right;
width: 300px;
}
【4】3カラム・左ワイドメニューの場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnD .skinMainArea {
float: right;
width: 470px;
③.columnD .skinSubA {
float: left;
width: 300px;
}
④.columnD .skinSubB {
width: 180px;
}
【5】3カラム・右メニューの場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnE .skinMainArea {
float: left;
width: 470px;
}
③.columnE .skinSubB {
float: left;
margin-left: 15px;
width: 180px;
}
④.columnE .skinSubA {
float: right;
width: 300px;
}
全体のレイアウトの共通点は、
・ヘッダー部分の横幅が980pxに設定されていること。
・サイドバー(2つの場合は幅が大きい方)に広告が表示されること。
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。




クリックして戴けると、
とても励みになります。