MovableType 4.2 2Column HTML5の解説（幅の調整）

ユーザーの方から「MovableType 4.2 無料テンプレート 2Column HTML5」でコンテナの幅を調整したいというご要望がありましたので、予定を変更してCSSでの調整を解説します。

コンテナやカラムの幅の調整方法

Layout部分36行め以降のheader#branding・div#content・footer#copyで全体の幅を指定し、div#mainとdiv#subでカラムの幅を調節します。＊ノーマルな状態ではメインコンテンツには468pxのバナーがぴったりと入るように設計されています。

740pxの幅を960pxに広げ、メインコンテンツに640pxが入るように調整する例

640px+20px+20px（div#main .innerの左右padding）=680px（div#main）
960px（全体の幅）-680px（上記数値）-2px（IE用調整）=278px（div#sub）

サイドバーが48px増えてるが、このままではアイテムのサムネイルが横に3つ入らずおかしな余白ができる。3つ並べるには240px必要となるのでdiv#sub .innerのpadding-leftを2px減らす。

  1. header#branding {
  2.     color: #333333;
  3.     background-color: #ffffff;
  4.     text-align: left;
  5.     margin-left: auto;
  6.     margin-right: auto;
  7.     width: 960px;
  8.     overflow: hidden;
  9. }
  10. div#content {
  11.     font-size: 100%;
  12.     color: #333333;
  13.     background-color: #ffffff;
  14.     text-align: center;
  15.     margin-left: auto;
  16.     margin-right: auto;
  17.     width: 960px;
  18. }
  19. div#main {
  20.     font-size: 80%;
  21.     color: #333333;
  22.     background-color: #ffffff;
  23.     text-align: left;
  24.     padding-bottom: 20px;
  25.     width: 680px;
  26.     float: left;
  27. }
  28. div#sub {
  29.     font-size: 100%;
  30.     color: #333333;
  31.     background-color: #ffffff;
  32.     text-align: left;
  33.     margin-bottom: 20px;
  34.     width: 278px;
  35.     float: right;
  36. }
  37. footer#copy {
  38.     font-size: 100%;
  39.     color: #333333;
  40.     background-color: #ffffff;
  41.     text-align: center;
  42.     margin-left: auto;
  43.     margin-right: auto;
  44.     width: 960px;
  45.     clear: both;
  46. }
  1. /* サイドバー余白調整 */
  2. div#sub .inner {
  3.     line-height:1.5;
  4.     padding-left: 18px;
  5.     padding-right: 20px;
  6. }
Posted

Tags