Blogger Labo：【Tokyo】レイアウトのカスタマイズ

このページでは「Tokyo」のレイアウトのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

※初心者の方は「カスタマイズ基礎知識」などの「初心者向け記事」を参考にしてみてください


レイアウトの設定について


CSSの内容


/****************************************
         main [コンテンツ全体]
*****************************************/

 コンテンツ全体（メインコンテンツ）の設定 

#main{
margin-bottom: 7em; [メインコンテンツ下部の外側の余白]
margin-top: 2em; [メインコンテンツ上部の外側の余白]
}

/****************************************
         main-content [ページ左側]
*****************************************/

 ページ左側（メインコンテンツ）の設定 

#main-content{
float: left; [ページの回り込み設定]
width: 64%; [ページ横幅の割合]
margin-right: 2.8%; [サイドバーとの間隔]
}

/****************************************
         sub-content [ページ右側]
*****************************************/

 ページ右側（サイドバーの設定） 

#sub-content{
float: left; [ページの回り込み設定]
width: 33.2%; [ページ横幅の割合]
}


上記が Tokyoのレイアウトを設定するCSSに説明を加えたもの（必要な部分のみ）。

説明はカテゴリの都合上、"関係性のある部分を抜き出して説明"している。

ここで変更するべき部分は「ページ横幅の割合」と「上下の余白」くらいだと思う。