ブログ幅980で左右サイドバー幅を統一する


内藤です。

2011年8月からのアメブロデザインでは、ブログ幅が980pxになりました。

サイドバーの片方がワイドになっています。
以前、サイドバーの幅を左右同じにして(ワイドを狭くして)、ブログの幅を860pxにする方法を紹介しました

⇒ 左右サイドバー幅を統一しブログ幅を狭くする

今回は、ブログ幅980pxの状態で、左右のサイドバー幅を合わせ、記事エリアを広げるやり方の紹介です。

[アメーバのサービス一覧(クイックリンク)] ⇒ [デザイン変更] ⇒ 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:590px;
}
.columnE .skinSubA{
float:right;
width:180px;
}
.columnE .skinSubB{
float:left;
margin-left:15px;
width:180px;
}
.skinSubA .blogSearchInput{
padding:8px 10px 8px 10px;
width:158px;
}
/* ページ送り調整 */
.pagingArea{
padding:0px 0;/*余白*/
width:580px;/*幅*/
}
.pagingPrev{
right:330px;
}
.pagingNext{
left:330px;
}

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

1件のコメント

  • 胡高

    初めてのアメブロカスタマイズに試行錯誤している最中、
    記事幅が狭くなって、どうしてもプロフィール欄が大きくて
    どうしよう((((;゚Д゚))))としていると、こちらのブログを見つけました!
    助かりました><ありがとうございました゚(゚´Д`゚)゚

コメントを残す