Soloism Outdoors

まずはノーマルデザインの画面を見てみましょう（画像はシンプル3カラム）


続いてノーマルデザインのスタイルシートの設定を見てみましょう。
スタイルシートを表示させるには、メニューの『デザイン』→『オリジナルデザインの設定』です。
スタイルシートの上から1/6くらいの場所に下記のような表示があるはずです。
その中の赤い文字の部分、これがブログ全体の横幅を決める数値です。
最初は740で設定されています。（シンプル100％のデザインは別ですが）

a.amenu{color:#001F79;text-decoration:underline;}
a.amenu:link{color:#001F79;text-decoration:underline;}
a.amenu:visited{text-decoration:underline;}
a.amenu:active{}
a.amenu:hover{color:#001F79;text-decoration:none;}

#container{font-size:12px;

width:740px;
background-color:#ffffff;
margin:0px auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

この数値を900に変更してみましょう。
すると下のような画面に変更されるはずです。



どうですか、少し全体の横幅が大きくなっているのがおわかりいただけるでしょうか。
これでブログ全体の横幅の変更は終了しました。

ですが二つの画面を真ん中の記事の部分を見比べて下さい。
変更前ノーマルの方は記事の掲載幅はピッタリですね。
でも下の変更後の画面を見ると記事の掲載部分が右寄り、しかも幅が足りてないのがわかります。
これは全体幅を変更したのに記事（コンテンツ）枠の幅を変更してない為です。

ではコンテンツ枠の幅を変更してみましょう。
変更する箇所はスタイルシートの真ん中あたりにある下記の表示です。
これも赤い文字の数値を変更します。
全体幅の増やした分を足します、今回の場合は全体幅を740から900に変更したので160の差です。
なので３９０＋160で550に設定します。

.blog{
 width:390px;
 margin:0px 0px 0px 0px;
}

.date{
 border-top:1px solid #00514D;
 border-left:1px solid #00514D;
 border-right:1px solid #00514D;
 border-bottom:1px solid #00514D;
 background:#787878 url(/_img/simple_gray/obj.gif)

（もしこの表示が見当たらない場合はもう少し上に

#content{
width:550px;
float:right;

という表示があると思います、同じように赤字の部分を変更してみて下さい。）

すると下記のような画面になる筈です。


どうですか、ピッタリの幅になったでしょ。
今回ご紹介した数値はあくまで参考ですから、お好みの幅めざして色々試行錯誤してみてくださいね。
では今回はこれで終了です、お疲れ様でした。