このブログはwordpressのデフォルトテーマ、Twenty elevenを使っています。今回はサイドバーの幅を300pxのadsenseの広告がぴったり入る様にカスタマイズしてみました。
NKJ56_youshotosankirasu

Twenty elevenのサイドバーを広げるためにイジったCSSの箇所

変更したのは下記の3箇所ほど。

1.全体の幅を1000pxから1050pxに変更

max-width:1000px を、 1050pxに変更。

body {
padding: 0 2em;
}

#page {
margin: 2em auto;
max-width: 1050px;
}

2.本体部分の幅やマージンを変更

本体に使う画像は幅600pxと決めているので、可変ではなく指定にしました。

#primary {  
float: left;  
margin: 0 -31.4% 0 0;  
width: 100%;  
}  
#content {  
margin: 0 34% 0 3%;  
width: 600px;  
}  
#secondary {  
float: right;  
margin-right: 1%;  
width: 30%;  
}  

サイドバー部分の幅を変更

こちらも、300pxに指定しました。

/* Right Content */
.left-sidebar #primary {
float:left;
margin: 0 0 0 10%; 
width: 100%;
}
.left-sidebar #content {
margin: 0 0.5% 0 10%; 
width:300px;
}
.left-sidebar #secondary {
float: left;
margin-left: 0.5%;
margin-right: 0;
margin-top: 5px;
width: 40%; /* increased sidebar width 4% from 18.8% to 30% */
}

本体部分、マージン、サイドバーの幅のTOTALが全体の幅を超えてしまうとレイアウトが崩れてしまい、何度か変更を重ね、上記のコードでやっと思った様な表示ができました。何度も、やりなおしました(^^;

私のブログは本文の写真幅が500px、サイドバーはアドセンスを貼りたいので300px欲しいと思い、下記のような配分にしてみました。
参考にさせていただいたサイト様:むーさんブログむーさんブログ

図解がとてもわかりやすかったです。ありがとうございました。

200pxの広告より、300pxのほうがインパクトが強く私は好きかな。


[ad#ad3]


関連記事

●このブログの運営者


Willkinokoです。大阪在住の会社役員。バツ1、子持ちのアラフォーです。趣味はブログの運営と体を動かすこと。日々、自分の生活に目を向け、感じたことをブログに綴っていきたいと思っています。 詳しく見る

Twitter

●ブログ検索

ページ上部へ戻る