14.ちょっとだけMTスタイルシート

必ず、CSSのバックアップをとって挑戦してみて下さい。
 
テンプレート>スタイル(StyleCatcher)で選択したhikks-greenのテンプレートcssの変更例。
ヘッダー画像の入れ替え、サイズ変更に伴う各ブロックのサイズ変更についての簡単な変更です。

14-1.ヘッダー画像の変更

1)hills-green.cssの改造



 #header { 
    border-color: #5283b1;  
    background: #cdeaff url(header.png) no-repeat bottom left; 
 }

↓↓↓↓↓↓↓↓↓↓↓


 #header { 
    border-color: #5283b1;  
    background: #cdeaff 
               url(http://トップドメイン/images/変更画像ファイル名)
                  no-repeat top left; 
 }


○元画像とのサイズが、全く同じであればこれでOKですが、幅、高さが違う場合、
以下のCSS変更が最低限必要になってきます。

画像の高さ調節


 #header-content {
    width: 770px; 
    min-height: 74px; 
    margin: 20px 0 116px 20px;
 }


↓↓↓↓↓↓↓↓↓↓↓


  #header-content {
    width: 770px; 
    min-height: 74px; 
    margin: 20px 0 0 20px;
 }

 
  16-security-key.pngtips:その7:CSS編集できる便利なツール
   Firefoxのみで動作
   Web Developer 日本語ツール:ミナトラボ
2)blog.cssの改造


 #container-inner {
    width: 940px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
 }


↓↓↓↓↓↓↓↓↓↓↓↓


 #container-inner {
    width: 900px; ← 変更したヘッダー画像の幅サイズ
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
 }

ヘッダー画像の変更で、サイト幅が940→900に変更されたため、2カラムのサイズの変更も必要となる。(全体で900pxになるような配分)


 /* Thin-Wide */

 .layout-tw #alpha {
    left: 190px;
    width: 750px;
 }

 .layout-tw #beta {
    left: -750px;
    width: 190px;
 }


↓↓↓↓↓↓↓↓↓↓↓↓


 .layout-tw #alpha {
    left: 190px;
    width: 710px;
    ↑
    画像の幅(900)= left: 190px + width: 710px
 }

 .layout-tw #beta {
    left: -710px; 
    ↑
    画像の幅(900)= width: 190px ? width: 710px
    width: 190px;
 }



このページのトップへ▲

このブログ記事について

このページは、taskmotherが2009年11月 2日 10:55に書いたブログ記事です。

ひとつ前のブログ記事は「15.MovableType4.2基礎講座のまとめ」です。

次のブログ記事は「13.運営をしていくための注意事項 」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。