こちらで書いた通り、StyleCatcherを適用させるとstyles-site.cssの中身が置き換わってしまってスタイルを管理画面から弄くれなくなります。で、私はとりあえずの思いつきでテーマ用スタイルシートをローカルにダウンロードして直接編集して上書きアップする方法でやってみたのですが、Movable Type 4989さんのこちらのエントリーで紹介されているように、新しいテンプレートを作ってそこにテーマスタイルシートを読み込み、管理画面から編集できるようにするという方法もあるようです。
し・か・し！
もっと簡単にスタイルを管理画面から編集できる方法があることに気がつきました！！ 本当に超簡単です。以下にその方法を述べてみます。お試しあれ。
まずはStyleCatcherで適当なデザインを選びます。カスタマイズするのが目的なので、弄くりやすそうなシンプルなテーマがいいと思います。ここではclassyにしてみました。スタイルが適用されるとstyles-site.cssの中身は以下のようになります。
/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/mt/mt-static/themes/base-weblog.css);
@import url(/mt/mt-static/themes/theme-classy/theme-classy.css);
/* end StyleCatcher imports */
この下に変更したいスタイルをどんどん書き加えていきます！
まずは背景を白にし、更に左下に固定画像も入れてみましょうか。上のスタイルシートがこんな感じになります。
/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/mt/mt-static/themes/base-weblog.css);
@import url(/mt/mt-static/themes/theme-classy/theme-classy.css);
/* end StyleCatcher imports */
body {
background-color: #FFFFFF;
background-image: url("012.jpg");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
}
次にバナーの背景色を黄色にしてみます。bodyの下に以下の記述を追加します。
#banner {
background-color: #fff2c5;
}
記事タイトルに背景色をつけて更に線で囲ってみます。同様に追加。
.entry-header {
background-color: #fff2c5;
padding-left: 5px;
border: 1px solid #666666;
}
日付部分もフォントと大きさ、色、太さを変えてみます。同様に追加。
.date-header {
color: #CCCCCC;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
font-weight: bold;
}
エントリー部分の文字の色と大きさ、行間を変えてみます。同様に追加。
.entry {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: 11pt;
font-weight: normal;
line-height: 130%;
}
さらに調子に乗ってリンクの色とかも変えてみます。同様に追加。
a { text-decoration: none; }
a:link { color: #006699; }
a:visited { color: #006699; }
a:active { color: #006699; }
a:hover { color: #8FABBE; }
これで再構築してみると、見事にブログのデザインが変わっています。
改造前 改造後
→ 
そうなんですよ！ 要するに「styles-site.cssの下の空いている部分に好きなスタイルをどんどん追加すればいいだけ」なんです！！
これは「スタイルシートは一番最後に読み込まれたものが適用される」という原理を利用したものです。閃きの元は「ココログベーシックでスタイルシートを好きに操る裏技」から。ココログベーシックではスタイルシートを弄くることが出来ません（2005年12月現在）。そのため、サブタイトル欄に自分で作ったスタイルシートを読み込むタグを入れて、デザインを好き勝手に改編する裏技がココログユーザー間で広まりました。スタイルシートの読み込みは通常<head>～</head>間に記述されるので、それより後に読み込まれるサブタイトル欄のスタイルシートの内容が実際には適用されることになるのです。
この場合も同じことで、より後に読み込まれたスタイルの方が実際には反映される、ということになるのです。だから間違っても上に書いちゃ駄目ですよっ、必ずbase-weblog.cssとテーマスタイルシートの下に追加するのがポイントです。
これなら難しい操作は要りません。単純に好き勝手に追加していくだけでＯＫです。それも全部変える必要はなく、自分が変えたいところだけでいいんです。まさに超簡単、楽々カスタマイズ！です。StyleCatcherにはこんな利用方法もありますよ～ということで。覚えておいて損はない技だと思います。
＊背景画像はNOION様のを使わせていただきました。お気に入りの素材サイトです。