ライブドアブログのテンプレート「デフォルト2012」はシンプルで良いデザインだと思うのですが、横幅が狭くグーグルアドセンスの728x90サイズ広告を入れると右端が重なったり切れたりします。
そこで、メインカラムの横幅を広げる方法を紹介します。

●バックアップ。
設定を変更する前に予めバックアップを取っておくことをお勧めします。
バックアップの方法は、管理ページにログイン後、ブログ設定→デザイン / ブログパーツ設定の「PC」をクリック→「保存/共有」で画面左の「保存」をクリック。

●cssのwidthを変更。
メインカラムの横幅を広げるにはcssのwidthを変更する必要があります。 
css設定は以下の手順で行います。
 
管理ページにログイン後、ブログ設定→デザイン / ブログパーツ設定の「PC」をクリック→カスタマイズをクリック(ここで他のタブを選択すると個別記事ページ等の設定になってしまうので注意)

ここで2つの数字を変更する必要があります。

1.「全体のレイアウト」のwidthを変更。
2.「2カラムレイアウトのとき」のwidthを変更。

では、順番に説明します。
1.「全体のレイアウト」のwidthを変更。

デフォルトではcss内に以下のように記載されています。
この「width: 940px;」という数字を増やすとブログ全体の幅が広がります。
どれだけ増やすかは自由ですが、元の数字よりどれだけ増やしたかは覚えておいて下さい。次の工程で必要になるためです。
ちなみに、グーグルアドセンスの728x90サイズ広告を綺麗に表示させるには「width: 1090px;」位にするとよいようです。

/* 全体のレイアウト
----------------------------------------------- */
body {
background-color: #eff0eb;
}
#wrapper {
padding-top: 24px;
}
#container {
border-radius:4px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin: 0 auto;
width: 940px;

2.「2カラムレイアウトのとき」のwidthを変更。
同様にcssの以下の記載のうち、「width: 580px;」という数字を増やすとメインカラムの幅が広がります。
注意すべきは、先ほど増やした分だけこちらの数字を増やすようにして下さい。
例えば70pxだけ増やしたのであれば、こちらの数字も70だけ増やす必要があります。そうしないと右カラムが変な位置に表示されたりします。
上の例に合わせると、グーグルアドセンスの728x90サイズ広告を綺麗に表示させるには「width: 730px;」位にする必要があります。

/* 2カラムレイアウトのとき */
body.layout-2col #content {
background: url(http://parts.blog.livedoor.jp/img/usr/default_2012/common/bg_side.png) repeat-y #fff;
}
body.layout-2col #main {
width: 580px;

★★★ ブログランキング参加中!1日1回クリックお願いします↓
ブログランキング・にほんブログ村へ
にほんブログ村