メインカラムの横幅を変更する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロの『メインカラムの横幅を変更する方法』です。

『メインカラム』とは、ブログのメインコンテンツである、メッセージボードや記事、コメント等が表示される部分の事です。

今回ご紹介するのは、この『メインカラム』の横幅を広くしたり、狭くしたりする方法になります。

まず確認

今回のカスタマイズはCSSの編集で行いますので、もしわからない場合は確認しておいて下さい。

また今回は、新デザインと旧デザインで設定する内容が異なりますので、カスタマイズしたいアメブロが新デザイン(CSS編集用デザイン)なのか、旧デザイン(【カスタム可能】ベーシック等)なのかも確認しておいて下さい。

新デザイン(CSS編集用デザイン)の場合

まず、新デザインの場合です。

カスタマイズしたいアメブロが新デザインの場合、メインカラムの横幅に関連する初期設定が以下のコードのようになっています。

.skinHeaderArea,
.skinContentsArea{
  width:980px;
}
.columnA .skinMainArea,
.columnB .skinMainArea{
  width:665px;
}
.columnC .layoutContentsA,
.columnD .layoutContentsA{
  width:785px;
}
.columnC .skinMainArea,
.columnD .skinMainArea,
.columnE .skinMainArea{
  width:470px;
}

お使いのレイアウトによって、不要な設定もあるのですが、これで、新デザイン(CSS編集用デザイン)の5つのレイアウト全てに対応できますので、まとめて書きました。

赤文字の数値が4つありますが、これらの数値を同じだけ増減したものをユーザーCSSの末尾に追加することで、メインカラムの横幅を変更することができます。

例えば、メインカラムの横幅を20ピクセル広げたい場合は以下を追加して下さい。

.skinHeaderArea,
.skinContentsArea{
  width:1000px;
}
.columnA .skinMainArea,
.columnB .skinMainArea{
  width:685px;
}
.columnC .layoutContentsA,
.columnD .layoutContentsA{
  width:805px;
}
.columnC .skinMainArea,
.columnD .skinMainArea,
.columnE .skinMainArea{
  width:490px;
}

以上が、新デザイン(CSS編集用デザイン)のメインカラムの横幅を変更する方法です。

旧デザイン(【カスタム可能】ベーシック)の場合

次に、旧デザインの場合です。

旧デザインにはCSSでカスタマイズ可能なデザインが複数ありますが、本ブログでは【カスタム可能】ベーシックを対象としています。

カスタマイズしたいアメブロが旧デザインの場合、レイアウトが3カラムか2カラムかで初期設定が異なります。

まず、3カラムの場合は以下のようになっています。

#frame,#wrap{
  width:800px;
}
#main{
  width:420px;
}

また、2カラムの場合は以下のようになっています。

#frame,#wrap{
  width:800px;
}
#main{
  width:610px;
}

横幅を変更する方法は新デザインの場合と同様で、赤文字の数値が2つを同じだけ増減したものをユーザーCSSの末尾に追加してください。

例えば、お使いのレイアウトが3カラムで、メインカラムの横幅を100ピクセル広げたい場合は以下を追加します。

#frame,#wrap{
  width:900px;
}
#main{
  width:520px;
}

以上が、旧デザイン(【カスタム可能】ベーシック)のメインカラムの横幅を変更する方法です。

その他

なお、今回ご紹介した方法は、あくまでも各デザイン初期状態からの変更の場合で、例えばサイドメニューの幅を変更している場合などは、それにあわせて各数値が異なる場合がありますのでご注意下さい。

関連記事

『CSS編集用デザイン』に変更する
CSSの編集によるカスタマイズ
アメブロの新デザインと旧デザインについて

この記事は、2010/10/27の記事を2011/10/16に新旧デザイン両対応記事として再編集しました。

アメブロカスタマイズで自分らしい空間を作る技