てぃーだブログ・オリジナルテンプレートの作成方法④

今回は、前回作成したオリジナルテンプレートを改造して、テスト表示用ブログ
『ブログをカスタマイズ！「ブログスタイル」』に適用してみたいと思います。

「オリジナルテンプレート 3カラム(サイドバー左右)」の場合は、
記事を表示する部分が狭くて、読みにくいので
ブログの横幅を拡大する方法を紹介したいと思います。

今回は、ブログの横幅を150px拡大する方法を紹介したいと思います。

【画像イメージ】：改造前

【スタイルシート】：改造前

/* =================================== */
/* レイアウト設定 */
/* =================================== */

#container{
text-align: left;
padding: 0px;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
color: #6699ff;
}

/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 200px;
width: 750px;
margin: 0px;
overflow: hidden;
background-image: url(http://img01.ti-da.net/usr/blogstyle/bg_750x200.jpg);
}

/* ブログの配置 */
#content{
width: 370px;
padding: 10px;
float: right;
margin-right: 10px;
}

/* ブログ外枠 */
.blog{
margin-top: 0px;
margin-bottom: 15px;
overflow: hidden;
width: 350px;
}

～　ソースコード一部省略　～

/* 記事本文 */
.main{
padding: 10px;
margin: 0px;
overflow: auto;
font-size: 87%;
line-height: 150%;
width: 330px;
}

【画像イメージ】：改造後

【スタイルシート】：改造後

/* =================================== */
/* レイアウト設定 */
/* =================================== */

#container{
text-align: left;
padding: 0px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
color: #6699ff;
}

/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 200px;
width: 900px;
margin: 0px;
overflow: hidden;
background-image: url(http://img01.ti-da.net/usr/blogstyle/bg_900x200.jpg);
}

/* ブログの配置 */
#content{
width: 520px;
padding: 10px;
float: right;
margin-right: 10px;
}

/* ブログ外枠 */
.blog{
margin-top: 0px;
margin-bottom: 15px;
overflow: hidden;
width: 500px;
}

～　ソースコード一部省略　～

/* 記事本文 */
.main{
padding: 10px;
margin: 0px;
overflow: auto;
font-size: 87%;
line-height: 150%;
width: 480px;
}

上記の赤字が変更及び、追加（改造）部分です。各「width」 を「150px」、増やしました。
数値を変えることで、横幅の調整が可能です。
※事前に画像を準備して下さい。（ヘッダーサイズ：横900px 縦200px ）

実際にオリジナルテンプレートを、テスト表示用ブログ
『ブログをカスタマイズ！「ブログスタイル」』に適用しました。

皆さんも、チャレンジしてみては、いかがでしょうか！？ｐ(*^-^*)ｑ がんばっ♪

このソースコードの使用に関しては、限られたテスト環境での動作確認などは行なっていますが、すべての環境に対応したものではありませんので、恐れ入りますが、使用に関しては自己責任でお願い致します。