こちらで書いた通り、StyleCatcherを適用させるとstyles-site.cssの中身が置き換わってしまってスタイルを管理画面から弄くれなくなります。で、私はとりあえずの思いつきでテーマ用スタイルシートをローカルにダウンロードして直接編集して上書きアップする方法でやってみたのですが、新しいテンプレートを作ってそこにテーマスタイルシートを読み込み、管理画面から編集できるようにするという方法もあるようです。
し・か・し！
もっと簡単にスタイルを管理画面から編集できる方法があることに気がつきました！！ 本当に超簡単です。以下にその方法を述べてみます。お試しあれ。
まずは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様のを使わせていただきました。お気に入りの素材サイトです。
コメント
こんにちは。
目からウロコのカスタマイズ方法の伝授、有難うございました。
ところで、この方法でカスタマイズしたところ、新規投稿をしてサイトの再構築をすると、元のデザインに戻ってしまいます。
（NT3.2を使用しています）
何か解決策、もしくは私の見落としている設定がありましたら、ご教授下さると嬉しいです。
ちなみに、styles-site.cssとbase-weblog.css、ついでにテーマスタイルシートの下側に、それぞれ追記してみました。
こんにちは。
コメントありがとうございます。
そう言われてみればカスタマイズの後、新規投稿の確認ってしてなかったな…と思って、テストブログで試してみたところ、デザインはちゃんと保たれていました。
デザインが元に戻る理由としてはスタイルシートの追加部分が正しく保存されていなかったことが考えられます。CSS追加後、「保存」ボタンではなく、「保存と再構築」ボタンを押してスタイルシートの再構築をしてみて下さい。それで大丈夫だと思うのですが…。
＞styles-site.cssとbase-weblog.css、ついでにテーマスタイルシートの下側に、それぞれ
この「それぞれ」がちょっと引っ掛かるのですが、追加するのは管理画面のスタイルシートテンプレートの
/* end StyleCatcher imports */
の記述の下の部分だけでいいですよ。
上手く反映されるといいですね。
こんにちは。早速のご教授、有難うございました。
自己レスになってしまって申し訳ございませんが、結果的に解決致しました。
本日、冷静になったところで管理画面のテンプレートにて再度記述の確認をしましたところ、何故かスタイルシートへのパスの部分に指定した筈のない誤ったものが記述されておりました。
ここを正規のパスに書き換えたところ、再構築をしてもデザインが保たれるようになりました。
お手を煩わせてしまいまして、申し訳ありませんでした。
また、ご指摘下さいましたように、他の２ファイルにつきましては、追加の記述を削除しました。
（どうにも上手くいかなくて、泣きそうになってダメモトで追記したものです）
ご回答、本当に有難うございました。
これからもこれに懲りずに、こちらのサイトを参考にカスタマイズさせて頂きますね。
解決されたようで何よりです。
MT3.2と同バージョンのTypePadやココログのカスタムCSSも同じ原理になっているので、この方法で問題なく使えると思います。
自分の覚え書き用ブログですが、何かお役に立てることがあれば嬉しいです。
こちらこそよろしくお願いします。
はじまめして。
こちらのサイトを参考にさせて頂いています。
初心者ながらにも、ちょこちょこカスタマイズして、納得のいくところまで、あと少しのところまできています。
ただ、全体の横幅の変え方だけが、どうしてもわからないんです。
現状だと、すこし横幅が大きすぎてしまいます。
申し訳ありませんが、アドバイス頂けないでしょうか？？
http://syoboi.com/movabletype/styles/library
このサイトの
Default-like-blue
を使用して、カスタマイズしております。
コメントありがとうございます。
少しでもお役にたてることがあったなら嬉しいです。
MTの横幅変更は難しいですよね…。何カラムを使われているかで違うと思いますが、ソースでbodyタグのclassを確認してみて下さい。もし右にサイドバーがあるlayout-two-column-rightなら、横幅を700にするなら、こんな感じでしょうか。
/* 全体の幅 */
.layout-two-column-right body { min-width: 700px;}
.layout-two-column-right #container { width: 700px;}
.layout-two-column-right #banner { width: 700px; }
/* 各カラムの幅 */
.layout-two-column-right #alpha { width: 477px; }
.layout-two-column-right #beta { width: 210px; }
カラムには余白が設定されているので、各カラムの幅の合計は全体の幅から余白を差し引いたものになります。まずは今使っているソースをじっくり見て、変えたい部分がどんなid、classで制御されているか調べて色々試されてみるといいと思います。頑張って下さい。
アドバイスありがとうございます！！！
やっぱり、難しいのですね。
アドバイス参考にさせて頂き、試してみます。
ありがとうございました！！！
早速試してみました！！
ただ、コピペさせて頂いただけですが！なんと！うまく幅の調整ができました！！
幅の件で、モヤモヤしていましたが、やっと気持ちがはれました！
感動！！！
本当にありがとうございました！！！
うまく出来たようでよかったです。
上の例の幅は適当に書いたものなので、ご自分の好きなサイズに調整してみて下さいね～。