アメブロカスタマイズ 記事幅を広げるCSSとは?

アメブロカスタマイズアメブロのカスタマイズですが、
以前もテンプレートの記事幅を広げたい
という方がいらっしゃったので、

CSSの解説をちょこっとね。

 

 

 

アメブロの場合、新デザインに変更してから、
ずいぶんとブログ全体の横幅が広くなりました。

いまの基準は、横幅980pxなんです。

 

980pxといわれても・・・・ですよね。
こんな感じです。(これは私が作ったテンプレートです。)

全体の幅980

 

結構広いです。
このテンプレートは、当初2カラム用に作ってあるので、
記事の幅は、665pxといって、かなり広いスペースになっているんですが、
3カラムにすると、記事投稿のスペースは狭いかも。

 

アメブロのスキンデザイン・他のブログのテンプレートもそうですが、
ある程度基準の幅が決まっています。

 

記事幅のみ広げるというのは、全体的に広げましょうということです。

 

なので、基準の幅というのは、
【これが、一番バランスがいいでっせ!!】というあんばいに
なっています。

 

 

画像をたくさん使いたい方や、文字を大きくしたい方は、
3カラムだと、ちょっと狭く感じるかもしれませんね。

 

サイドバーも、アメブロの場合は片方が広く、
もう片方が狭く設定してありますので、
どうしても、3カラムだと圧迫感があります。

 

で、3カラムでも、全体的に広げてあげれば、
バランスがいいかも?

 

広げてみました。
こんな感じね。解ります?

全体を幅1100

 

 

ヘッダー画像が980pxで作ってあるので、
ちょっとずれていますが・・・・広いでしょう?
全体の広さを、1100pxに変更したんです。

 

110px広くしたわけです。

 

アメブロのレイアウトは、5種類あります。
こんな感じね。

レイアウトの種類

幅を変更するということは、それぞれのレイアウト全部に
反映させなければなりません。

 

基準のCSSでは、カラムごと下記のようなグループ分けをしています。

columnA・columnB・columnC・columnD・columnE

という順に設定されています。
※アメブロの書籍を参考にしています。
【アメブロカスタマイズ参考書籍】

 

3カラムですと記事幅は、470pxなんですね。
2カラムと比べるとなんかずいぶん狭いなーって感じでしょうか。

 

3カラムの記事幅を、2カラムくらいに広げるには、
全体の幅も、広くしなくてはいけないわけです。

 

ちょっと計算が必要ですが、自分のお好きな幅にレイアウトしてみましょう。

 

今回は、【CSS編集用デザイン】での、
CSSの変更を解説していきますね。

 

CSS変更方法

デザインの変更から、CSSの編集をクリックします。

最初は、こんな感じのレイアウトですよね。(初期設定時のレイアウト)

初期設定のレイアウト

CSSのコードの中に・・・

/* (3-3) コンテンツエリア
——————————————–*/

という記述している部分があります。
※見つからない場合は、 control + F で検索窓が開きますので、
コンテンツエリアと入力して、検索してくださいね。

ここに下記のコードをコピーして貼り付けます。
※下記のコードは、初期設定のコードです。

 

.skinHeaderArea,.skinContentsArea{
width:980px; /* ← これが全体の幅です。 */
}
.columnA .skinMainArea,
.columnB .skinMainArea{
width:665px; /* ← これが記事幅です。 */
}
.columnC .layoutContentsA,
.columnD .layoutContentsA{
width:785px; /* ← これが記事幅です。 */
}
.columnC .skinMainArea,
.columnD .skinMainArea,
.columnE .skinMainArea{
width:470px; /* ← これが記事幅です。 */
}

 

全体の幅と記事幅の数字を変更します。

 

今回は、1100pxなので、全体に120px増えていることになります。
なので、記事幅を上記の数字に110を足した数字に修正してください。

 

修正できたら、表示で確認してくださいね。
こんな感じ。

サイズ変更後のレイアウト

 

 

広くなりました。

 

3カラムだとどうしても、サイドバーの関係上、
記事幅が狭くなるので、全体を広げなければダメなんです。

 

広げる数字は、バランスをみて考えたほうがいいかも!!

記事幅や全体の幅を広げたい方は、
ぜひ参考にしてくださいね。

 

レイアウトやデザインの変更は、カスタマイズの第一歩です。

訪問者に優しいブログつくりをしていきましょう。

 

 


自分でカスタマイズしたい方は、 こんなマニュアルがあります。
参考にしてくださいね。
→  【初心者にもできるアメブロカスタマイズ 2012】

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ