ブログの横幅サイズを変更する。

うちのブログの横幅のサイズは、他のブログよりもちょっと大きいとは思いませんか？
これは、950px(ピクセル)に合わせて作っているからです。

アメブロでカスタマイズが出来るブログスキンは決まっていて
初期設定でブログの横幅は

ベーシック・Leavesは800px
ブルー・グリーン・グレイ・ピーチは760px

となっています。

この中のベーシックを元に
ブログデザインの横幅をカスタマイズする方法を書いていきます。

カスタマイズ前に知っておきたい事

パソコンのディスプレイ（画面）のサイズは、メーカーによってまちまちです。
正直に話してしまうと、小さいディスプレイを使っている人には、うちのブログはすごく見づらいものだと思います。
「大きくし過ぎると、見づらい人もいる」
そういうリスクがあることを知った上で、カスタマイズしましょう。

ただ、僕が他の所で管理しているアクセスもそこそこあるブログを解析したところ
ディスプレイの横幅が1000px以下の人は
0.18％でした。
あまり気にしなくても良さそうですね。

まず、確認

CSS編集画面に移動して、CSSの変更する場所を確認しておきましょう。

まず、上から５分の１くらいくらい進んだ場所にある
フレームという項目を確認しましょう。

色付きの所の数値が、全体の幅を決めます。

次に、ほぼ一番下にあるカラムタイプを見てみましょう。

うちのブログは２カラムなので２つですが、３カラムの場合はこの下にさらにもう１項目ある事をお忘れなく。

#mainはブログ記事などのメインの事。#sub_aはサイドバーの事。
３カラムでは、#sub_bもありますからね！

数字を見てみると610と170で、足しても780ですよね。
800にならないとおかしいと言いたい所ですが、
他の項目で余白に20使っているので、こうなっているのです。

widthの数値を変える

さて、先ほど見た数値は全部「width」という項目だった事に気づいたでしょうか？
widthとは、横幅を指定する時に使うものです。

では、数値を変えていきましょう。
うちのブログにするためには、フレームに２箇所ある800の数値を950に変えます。

次に、カラムタイプです。
余白分の20pxを引いて、930pxになるように数字を合わせます。
メインが630で、サイドバーが300といった感じにね。

表示を確認する

出来たら[保存]を押す…前に、[表示の確認]でちゃんと表示できるか・デザインが崩れてないか確認しましょう。

ちゃんと表示されていた事を確認できてから、[保存]ボタンを押しましょう！

CSSの中から、変更する箇所を探すまでが大変ですが
探してしまえば、あとは数字を変えるだけですからね。
簡単でしょ？