3-9：CSS を変更し、テンプレートのデザインを変える: 「Movable Type WEBデザインの新しいルール」

手順1（変更後）: /* カラム切り替え */ body.layout-three-column, body.layout-two-column-left, body.layout-two-column-right, body.layout-one-column { background: #eee; text-align: center; }
手順2（変更後）: /* ヘッダ */ #header { padding: 25px; border-bottom: 1px solid #669; color: #999; background: #fff; text-align: left; }
手順3（変更後）: #header a, #header a:link, #header a:visited { color: #0c5000; background: transparent; font-size: 32px; text-decoration: none; }
手順4: /* フッタ */ .layout-one-column #footer, .layout-three-column #footer, .layout-two-column-left #footer, .layout-two-column-right #footer { margin-right: auto; margin-left: auto; border-left: 1px solid #669; border-right: 1px solid #669; border-bottom: 1px solid #669; height: 45px; color: #333; background: #dff6d5; font-size: 12px; text-align: center; line-height: 3.5; }
手順5（変更後）: /* 3 カラム固定レイアウト */ .layout-three-column #content { float: left; width: 480px; }
手順6（変更後）: /* 3 カラム用 */ .layout-three-column #box { width: 852px; } html > body.layout-three-column #box { width: 850px; }
手順7: .layout-three-column #footer { width: 852px; } html > body.layout-three-column #footer { width: 850px; }
手順8（変更後）: /* 3 カラム固定レイアウト（ブログ記事全体） */ .layout-three-column .blog { padding: 5px 0 10px; }
手順9: /* ブログ記事日付 */ .date { margin: 8px 0 3px; color: #666; font-size: 125%; font-weight: bold; text-align: right; }
手順10（変更後）: /* ブログ記事日付・各タイトル */ .trackbacks-header, .comments-header, .comments-open-header { padding-left: 8px; border: 1px solid #ccc; background: #eee; font-size: 83.3%; font-weight: bold; line-height: 2.0; } .search-header, .search-result-header { padding-left: 0px; font-size: 83.3%; font-weight: bold; line-height: 2.0; }
手順11（変更後）: /* ブログ記事タイトル */ .entry-header { margin: 0 3px 5px; padding: 8px 8px 5px; border: 1px solid #ccc; background: #eee; font-size: 125%; font-weight: bold; } .entry-header a:link, .entry-header a:visited { color: #333; } .entry-header a:hover, .entry-header a:active { color: #069; } /* ウェブページ */ div.page { margin-top: 13px; }
手順12: /* ブログ記事 */ .entry-content { width: auto; margin: 0 3px; color: #333; background: #fff; font-size: 83.3%; line-height:1.5; word-break: break-all; }
手順13（変更後）: /* 投稿者 */ p.entry-footer { margin: 0 3px 15px; padding: 8px 0; border-top: 1px dotted #36414d; font-size: 75%; text-align: right; }
手順14: /* サイドメニュータイトル */ .sidetitle { margin-top: 3px; border: 1px solid #cfe6c5; color: #333; background: #dff6d5; text-align: center; font-size: 75%; line-height: 2.2; }
手順15: /* サイドメニュー */ .side { margin: 5px 0 20px; background: none; color: #333; font-size: 75%; line-height: 1.5; }