記事部分の横幅を広げる(ブログの横幅を広げる) | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

ブログの横幅を広げて記事部分を広くします



新デザインではブログのレイアウトによってCSSが変わってきますので注意下さい




新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


.skinContentsArea {
width:1100px;/*ブログの横幅A*/
}
.skinMainArea {
width:770px !important;/*記事部分の横幅B B=A-330px*/
}


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

2カラムですので記事とサイドバーのスキマを30px(初期設定は15px)にしています
スキマの30pxは自由に設定下さい



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


.skinContentsArea {
width:1100px;/*ブログの幅A*/
}
.layoutContentsA {
width:900px !important;/*B (A-200px)*/
}
.skinMainArea {
width:580px !important;/*記事部分の横幅C (B-320px)*/
}


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ
3カラムですので記事とサイドバーのスキマを20px(初期設定は15px)にしています
スキマの20pxは自由に設定下さい



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ
.skinContentsArea {
width:1100px;/*ブログの横幅A*/
}
.skinMainArea {
width:590px !important;/*記事部分の横幅B B=A-510px*/
}

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ




アクセス解析で解像度をみると・・・

半分近くの方が横幅1280px以下で見ています(わたしも横は1280pxです)

あまり横幅を広げすぎると見に来てくれた方の半分近くの方に横スクロールがでて見難いブログになりますので注意下さい


ブログに幅を狭くするには広告を何とかしないと出来ませんので

狭くする方法についての質問はNGです