2011年04月14日

【カスタマイズ講座】 ブログの幅を広げる!

テーマ:┣ カスタマイズ講座
こんにちわ。
ヤシマ作戦継続中の為、真っ暗の部屋の中デスクスタンドとパソコンの明かりだけ。
この生活もだいぶ慣れてきました。シンプルブログデザイン*DaitenshI+(ダイテンシプラス)のあさくらです。


1週間ぶりのカスタマイズ講座のお時間がやってきましたよ!

先週の予告通り、今日はブログの幅を広くしてみようかと思いますパソコン

アメブロ講座-幅変更(1)


↓こんな感じに広くします↓


アメブロ講座-幅変更(4)



まずは、『ブログを書く』『デザインの変更』『CSSの編集』でCSSの編集画面を開きましょう!

■CSSを編集する前に
ウッカリ間違えてしまったら大変です!!
編集前に必ず、全部をコピーして、メモ帳にコピーしたCSSをペーストしておきましょう!


ではいきますよ。


【カスタム可能】ベーシックの場合のCSSファイルです。
大体、154行目ぐらいにこうゆう部分があるかと思います。

------- C S S -------
#frame{
width:800px;
margin:0 auto;
text-align:left;
}
#wrap{
width:800px;
}
------- C S S -------

今日は追加をするのではなく、数字を書き換えます。

アメブロの標準の幅は800pxになっています。

アメブロ講座-幅変更(1)



↓ここの部分を変更します。↓

width:800px; /*ブログの幅指定*/

   ↓↓

width:960px; /*ブログの幅指定*/

↓変更するとこんな感じになります。↓

------- C S S -------
#frame{
width:960px; /*ブログの幅指定*/
margin:0 auto;
text-align:left;
}
#wrap{
width:960px; /*ブログの幅指定*/
}
------- C S S -------

#frame と #wrap の2ヶ所の幅を変更するのが重要です!

これで、ブログの枠組みだけ広くなりました!
こんな感じです。
わかりやすく背景に色を付けました。

アメブロ講座-幅変更(2)


ただ、枠組み部分だけ大きくしてしまっても、記事の部分はそのままで、かっこ悪いですよねガーン

次は、肝心の記事の部分を大きくしていきます。


記事の部分のデフォルトサイズは、420pxです。
これを、全体を広げた160px分広げていきます。


大体、815行目ぐらいというか下から20~30行目ぐらいにこうゆう部分があるかと思います。

------- C S S -------
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ カラムタイプ ■■■■■■■■■■*/
#main{
float: left;
width: 420px;
margin:0;
padding:0 10px;
}
  :
  :
------- C S S -------

↓ここの部分を変更します。↓

width:420px; /*記事の幅*/

   ↓↓

width:560px; /*記事の幅*/


全体の幅を800pxから960px広げたので160px分広げたことになります。

折角なので見やすくする為に余白も一緒に広げてみます。


↓ここの部分を変更します。↓

padding:0 10px; /*記事の両サイドの余白*/

   ↓↓

padding:0 20px; /*記事の両サイドの余白*/


10px程広くしました。この10pxは、片側に10pxということなので、両サイド10px広げると、合わせて20px分余白が広くなります。


↓変更するとこんな感じになります。↓

------- C S S -------
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ カラムタイプ ■■■■■■■■■■*/
#main{
float: left;
width:560px; /*ブログの幅指定*/
margin:0;
padding:0 20px; /*記事の両サイドの余白*/
}
  :
  :
------- C S S -------

アメブロ講座-幅変更(3)


どうですか?全体的にゆとりのある感じになりましたよね。
幅を広げるだけで、随分とゆったりと見やすい感じになったと思いませんか?

元々はこんなに窮屈だったブログも

アメブロ講座-幅変更(1)


↓こんな感じに広々!


アメブロ講座-幅変更(4)



どこを編集していいかわからない人は、こちらをCSSの一番下にコピペをしてください。

------- この下から -------
#frame{
width:960px; /*ブログの幅指定*/
}

#wrap{
width:960px; /*ブログの幅指定*/
}

#main{
width: 560px; /*記事の幅*/
padding:0 20px; /*記事の両サイドの余白*/
}
------- この上まで -------


今回は編集する場所も多かったので、ちょっと難しく感じた方も多いかもしれませんが、ただ、幅を広げただけです。難しく考えずに、指定の場所さえ間違えなければ、問題ありません。

もし不安な方は、サンプルをコピペして試してみてください。


次は、ブログカスタマイズをちょっとお休みして、ブログタイトルを画像で作ってみようかと思います。

Photoshopとかなくても大丈夫!
フリーのソフトを使って出来る方法をご紹介したいと思います。

何かご質問があればコメント欄にご記入ください。

AD
いいね!した人  |  コメント(4)  |  リブログ(0)

AD

Related Posts Plugin for WordPress, Blogger...

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。