左右サイドバー幅を統一しブログ幅を狭く(860px)する


内藤です。

2011年8月からの新デザイン。
サイドバーの1つがワイドになって、全体の幅も980pxになっています。

これを左右のサイドバーを同じ大きさにして、全体の幅を860pxにする方法です

※ワイドメニューの広告が切れてしまいますので、必ずアメゴールドで、広告を非表示にしてから行ってください。広告を非表示にしないまま行うとID削除の可能性もあります

以下をCSSに追加します。

/*------ 全体幅 ------*/
.skinHeaderArea{
width:860px;
margin:0 auto;
overflow:hidden;
}
.skinContentsArea{
width:860px;
margin:0 auto;
padding-bottom:30px;
overflow:hidden;
zoom:1;
}
/*------- 2カラム・メニュー左 --------*/
.columnA .skinMainArea{
float:right;width:665px;
}
.columnA .skinSubA{
float:left;
width:180px;
}
.columnA .layoutContentsB{
display:none;
}
/*------- 2カラム・メニュー右 --------*/
.columnB .skinMainArea{
float:left;width:665px;
}
.columnB .skinSubA{
float:right;
width:180px;
}
.columnB .layoutContentsB{
display:none;
}
/*------- 3カラム・右ワイドメニュー --------*/
.columnC .layoutContentsA{
float:right;
width:665px;
}
.columnC .skinMainArea{
float:left;
width:470px;
}
.columnC .skinSubA{
float:right;
width:180px;
}
.columnC .layoutContentsB{
float:left;
width:180px;
}
/*------- 3カラム・左ワイドメニュー --------*/
.columnD .layoutContentsA{
float:left;
width:665px;
}
.columnD .skinMainArea{
float:right;
width:470px;
}
.columnD .skinSubA{
float:left;
width:180px;
}
.columnD .layoutContentsB{
float:right;
}
.columnD .skinSubB{
width:180px;
}
/*------- 3カラム・右メニュー --------*/
.columnE .layoutContentsA{
overflow:visible;
}
.columnE .skinMainArea{
float:left;
width:470px;
}
.columnE .skinSubA{
float:right;
width:180px;
}
.columnE .skinSubB{
float:left;
margin-left:15px;
width:180px;
}
.skinSubA .blogSearchInput{
padding:8px 10px 8px 10px;
width:158px;
}
body{
min-width:1000px;
}

※ワイドメニューの広告が切れてしまいますので、必ずアメゴールドで、広告を非表示にしてから行ってください。広告を非表示にしないまま行うとID削除の可能性もあります

ヘッダーも合わせて860pxにする必要がありますのでご注意くださいね。

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください