アメブロ ブログ幅を変えずに左右サイドバーを均等にする


ブログ幅980pxはそのままで、左右のサイドバーの幅を同じ幅にするやり方です。

最初は、1方のサイドバーが広くなっています。
サイドバーの1つがワイドになっています

それを、サイドバーを均一にして、記事幅を広げます
サイドバー均一

管理画面の [クリックリンク] ⇒ [スキンCSSの編集] で、CSSの一番最後に以下を追加します

※CSSを編集できるのは【CSS編集用デザイン】のみとなっています。


/*------- 3カラム・右ワイドメニュー --------*/
.columnC .layoutContentsA{
float:right;
width:785px;
}
.columnC .skinMainArea{
float:left;
width:590px;
}
.columnC .skinSubA{
float:right;
width:180px;
}
.columnC .layoutContentsB{
float:left;
width:180px;
}
/*------- 3カラム・左ワイドメニュー --------*/
.columnD .layoutContentsA{
float:left;
width:785px;
}
.columnD .skinMainArea{
float:right;
width:590px;
}
.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:590px;
}
.columnE .skinSubB{
float:left;
margin-left:15px;
width:180px;
}
.skinSubA .blogSearchInput{
padding:8px 10px 8px 10px;
width:158px;
}

各3カラムのレイアウトに対応しています。

※このカスタマイズをする場合は、必ずアメゴールドで広告を非表示にしましょう。
非表示にしていないと、サイドバーの広告が途中で途切れてしまうので、アカウント削除の対象になる可能性があります

これで、左右のサイドバーが同じ幅になり、記事幅が広くなります

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

コメントを残す