横幅のデフォルト(初期設定)をみてみよう。[新デザイン対応] | アメブロをカスタマイズしよう!

アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
ダウンダウン

人気ブログランキングへ FC2ブログランキングへ



新デザインのCSS編集についていろいろとみてきましたが、
今回は横幅がどうなっているかみてみましょう。



新デザインのCSS編集用デザインのレイアウトは5種類あります。
そして、それぞれの横幅を指定しているCSSは、
次のようになっています。



【1】2カラム・メニュー左の場合

2カラム・メニュー左の場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnA .skinMainArea {
float: right;
width: 665px;
}
③.columnA .skinSubA {
float: left;
width: 300px;
}



【2】2カラム・メニュー右の場合

2カラム・メニュー右の場合

①.skinHeaderArea {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
②.columnB .skinMainArea {
float: left;
width: 665px;
}
③.columnB .skinSubA {
float: right;
width: 300px;
}



【3】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カラム・左ワイドメニューの場合

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カラム・右メニューの場合

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つの場合は幅が大きい方)に広告が表示されること。



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
ダウンダウン

人気ブログランキングへ FC2ブログランキングへ

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