本書ではサンプル・デザインを３０種類用意しております。
全サンプルの画面ショットは、Ｐ．８１～８４に記載されています。

そのサンプル・デザインの中で、１０ａ、１０ｂ、１０ｃは、大きな写真を表示できるように、横幅１１１５ピクセルでレイアウトされています。２カラムで、記事部分の横幅は、なんと８００ピクセルもあります。

読者の方から、「この２カラムのレイアウトを３カラムに変更したい」とのご質問がありましたので、変更方法を掲載させていただきます。

【手順１】　レイアウトの変更

メニュー：ブログを書く→デザインの変更→レイアウトの変更

「２カラム・メニュー左」から、「３カラム・右ワイドメニュー」に変更して下さい。

【手順２】　ＣＳＳの修正

メニュー：ブログを書く→デザインの変更→ＣＳＳの編集

参考：http://ameblo-c.jp/samples/ より、10aのCSSリンクをクリックしてください。
行番号が付いたCSSが表示されます。


修正１：#globalにleft:0を追加（３０２～３１０行目）

div#global{
position:absolute;
top:84px;
left:0; /* これを追加してください */
width:1115px;
height:40px;
margin:0;
padding:0;
z-index:1;
}

修正２：columnAをcolumnCに、または横幅を変更

・修正前（６６～７７行目）

.columnA .layoutContentsA{
width:1115px;
margin:0;
padding:0;
}

.columnA .skinMainArea{
width:800px;
margin:0;
padding:15px 0;
background:transparent;
}

・修正後

.columnC .layoutContentsA{
width:920px;
margin:0;
padding:0;
}

.columnC .skinMainArea{
width:605px;
margin:0;
padding:15px 0;
background:transparent;
}

修正３：columnAをcolumnCに変更

・修正前（１７０～１８１行目）

.columnA .skinSubA{
width:300px;
margin:0;
padding:15px 0;
background:transparent;
}

.columnA .skinSubA2{
width:300px;
margin:0;
padding:0;
}

・修正後

.columnC .skinSubA{
width:300px;
margin:0;
padding:15px 0;
background:transparent;
}

.columnC .skinSubA2{
width:300px;
margin:0;
padding:0;
}

修正４：.columnC .skinSubBを追加

最終行に以下の内容を追加してください

.columnC .skinSubB{
padding:15px 0;
}



完成すると次のような感じになります。