【初期カスタマイズ】基本のデザインをちょっと触るか

　※この原稿は、以前のブログから移植されたもので
　　内容が、今のブログにそぐわないものもございます。

デザインを変更するために、CSS廻りのハンドリングに慣れておこう。

ただ、その前に、（CSS を触るその前に・・・）
現在のテンプレートの　おおまかな構造
（div タグを利用したブロック構造）を把握しておく。

-------------------------------------------------------------------
　・ソースを表示して、構造をおおまかに理解
-------------------------------------------------------------------
　【 手順  】
　・表示されているブログの最初の頁で、ブラウザのソース表示
　　を行う。
　・エディタでソースを整理し、divタグ以外を削除　＞　こうなる
　　（※DreamWeaver とかで読み込み、ソースフォーマットの適用
　　　　などでやれば、早い）
　　※この確認は意外と重要で、
　　　（特に他の方が作った構造を理解するには不可欠の作業だ）


さぁ、この構造を踏まえて
サイトデザインを触ろう

-------------------------------------------------------------------
　・CSSファイルの確認
-------------------------------------------------------------------

現在適用されている「テンプレート」は

　・管理画面　で
　　・[ デザイン ]  ＞  [ スタイル ] で確認できるわけだが
　　デザインを左右する　CSS は
　　・[ デザイン ]  ＞  [ テンプレート ] を選び

　　・[ インデックス・テンプレート ] で、スタイルシート　を　クリック

　　　ここで確認できるが、

　　@import url　を利用して２つのCSSファイルを組み込まれている

(Movable Typeのインストールされたディレクトリ)mt-static/themes-base/blog.css
(Movable Typeのインストールされたディレクトリ)mt-static/support/themes/cityscape-london/cityscape-london.css
 　それぞれエディタで開いて確認してみる。
　（おっ！?と、その前に）複写して、必ずバックアップをとっておく。

　・themes-base/blog.css

　　こちらは、ベースになるもののようで、この後に
　　スタイルごとのCSSが組み込まれており、現在のスタイルのものが

　・support/themes/cityscape-london/cityscape-london.css

　　だ。こちらを編集してみる
　　（※もちろん、すぐに元に戻せるよう　複写バックアップとって）

-------------------------------------------------------------------
　・テンプレートCSSファイルの編集
-------------------------------------------------------------------
support/themes/cityscape-london/cityscape-london.css　の中で
　　今回編集したのは、

　　[ 背景画像をはずす ]
　　・白ベースにしたかったので、
　　　body {　に記述があった
　　　background: #628642 url(body.gif) repeat-y  top center;
　　　をコメントアウト

　　[ 右カラムの背景画像をはずす ]
　　・右カラムを、白ベースにしたかったので、
　　　.layout-twt #content-inner {
        background: transparent url(content-twt.gif)
        repeat-y scroll left top; }
　　　を、左カラムのみの指定で
　　　.layout-twt #content-inner #beta-inner {
        background: transparent url(content-twt.gif)
        repeat-y scroll left top; }
　　　と変更

　　[ フォントの変更 ]
　　・元々が海外版のテンプレートなので、
　　　font-family: "trebuchet ms", arial,
      "hirakakupro-w3", osaka, "ms pgothic", sans-serif;　という表示を
　　　font-family: "ＭＳ Ｐゴシック", Arial, Verdana;
　　　に変更


　カラムの幅など基本的な部分は、ベースのCSSファイルの
　編集だ。
-------------------------------------------------------------------
　・ベースCSSファイルの編集
-------------------------------------------------------------------
themes-base/blog.css
　　今回編集したのは、

　　[ カラムのサイズ調整 ]
　　・スタイルで、「３カラム（小・大・小）」を選択しているので
　　　layout-twt　が該当する
　　　左カラムが、#beta
　　　中央が　　　#alpha
　　　右カラムが　#gamma　にあたる

　その他、いくつか微調整。
　いづれも、上記２ファイル(CSSファイル）を直接編集して
　アップロード、するだけだ。

　※ただ、いつでも、スタイルを変更できるように
　　汎用的な（利用していない）記述も多く、ある程度
　　確定したら、必要な部分のみにして、ファイル名変えて
　　組み込むことを考えよう。