2007年11月18日

デザインの微調整

デザインを微調整しました。
概要は以下のとおりです。

  • 両サイドにグレーのラインを入れたのですが、ヘッダとフッタの部分にもラインが入ってしまうので、borderの指定をcontainerではなく、contentにすることでヘッダとフッタからラインを消しました。
    ただ、contentの上下の余白がmarginで指定されていたせいで余白部分にラインが入らないので、paddingに変更しました。
    screen.cssは以下のとおりです(下線が変更部分)。
    #container{
        width:782px;
        margin:0 auto;
    }
    #content {
        width:780px;
        padding-top: 30px;  
        padding-bottom: 25px;
        border-left:1px solid #ccc;
        border-right:1px solid #ccc;  
    }
  • フッタにもヘッダと同様の(ほぼ180度回転させた)背景画像を設定しました。

2007年11月13日

第一段階カスタマイズの要旨

とりあえずここまでのレイアウトカスタマイズの要旨を(自分でも忘れるといけないので)書いておきます。

  1. 用意されているスタイルのうち、minimalist-greenを適用
  2. minimalist-greenフォルダ中のscreen.cssの内容を以下のように書き換え(主なもののみ)、フォルダ名をkimに変更
    • 背景に白い斜線の入った薄いグレーを敷くため、body要素に次のプロパティを追加
      url(back.gif) repeat;
    • 全体をセンタリングし、両端に薄いグレーの線を入れるため、次のプロパティを追加
      #container{
            width:780px;
            margin:0 auto;
            border-left:1px solid #ccc;
            border-right:1px solid #ccc;
      }
    • ヘッダに背景画像を敷くため、backgroundプロパティを次ように書き換える
      #header{
            background:#0f3b67 url(banner.gif) no-repeat top left;
      }
  3. スタイルシート(メイン)で読み込む2つ目のスタイルシートへのパスの最後を/themes/kim/screen.cssに変更

細かい部分では色々といじってますが(タイトルのフォント、マウスオーバー時の文字色、行間隔や余白の微調整など)、おおまかには以上のような手順で今現在の形になりました。

2007年11月12日

レイアウト変更(2)

昨日はあれだけ色々いじってもだめだったセンタリングが難なくできました。やはり時間をおいて頭を冷やしたことがよかったのかもしれません。
全体をセンタリングし、ヘッダの背景画像とタイトルのフォントを変更しました。
ここまでで一応最小限のカスタマイズはできたかな、と思います。

2007年11月11日

レイアウト変更(1)

レイアウトを変更してみました。
用意されているレイアウトminimalist-greenのスタイルシートscreen.cssを書き換えてみたものです。
しかし、本当は全体をセンタリングしたかったのですが、色々cssをいじっているうちに左寄せのレイアウトになってしまったのです。どこでこうなったのか、今検証中です。

2007年11月 7日

デザインのカスタマイズ

すこしずつMovable Typeの勉強をしているところです。
できればデザインを自由にカスタマイズしたいのですが、まだ十分な知識がなくてできません。
ココログでは、何度か試行錯誤の後、CSSを追加してかなり自分好みのデザインにしました。
でも、Movable Typeは、ちょっと勝手が違うようです。ブログ全体の構成がよく分かっていないので、どこをどう書き換えればいいのかが分からないのです。
多分、あと半月くらいで少しは理解できるようになると思うのですが。
ページの先頭に戻る