MT4 のスタイルをカスタマイズ

それでは、機能チェックもそこそこに MT4のテンプレートのカスタマイズにかかりたいと思います。

まずは、デザイン (スタイルシート) から・・・と、そういえば、MT4 は、GUI でスタイルが変更できるようになっているので、以前のように単に CSS を変更すれば OK というわけにはいかない気がします。

検索してみると、StyleCatcher という名前の機能になるようです。

リファレンスには情報が無かったのですが、どうやらこのあたりのページを参考にすればいけそうな感じです。
http://www.sixapart.jp/pronet/developers/movabletype/stylelib.html

・・・いろいろ必要そうですが、まぁ、CSS の変更ができてからの話のようです。 (^^;;

なので、CSS を見てみます。
テンプレートから指定されているファイルは styles.css ですが、こいつは base_theme.css と、mt-static/themes/minimalist-green/screen.css の 2 つを読み込んでいるだけのようです。おそらく、GUI でスタイルを変更するとこのファイルが自動変更されるのでしょう。そして、読み込んでいる 2 つのファイルが、それぞれ基本部分と GUI で変更できる部分を分担しているようです。

次にカスタマイズの方針を決めます・・・
MT4に標準でついているスタイルは、どれも 3 カラムが前提なのか 2 カラムで利用するには幅が広すぎる気がします。なので、2 カラムで最適になるように幅を狭くして 3.2 のデフォルトテンプレートのような感じに仕上げたいと思います。

まずは、準備として作業用にディレクトリを作成して、下敷きにする minimalist-green/screen.css と、背景用の画像をコピーしておきます。
で、編集中のスタイルシートが確認できるように styles.css を コピーした方に仮で直接変更してしまいます。再構築すると戻されてしまいますが、まぁ変更したスタイルシートを確認するだけなら再構築は必要ないので問題ないでしょう・・・

では、CSS の変更にかかります。
手始めに、新しいスタイルシートの構成把握もかねて背景の色と画像を差し替えることにします。

旧バージョンのスタイルシートから色コードを拾って、置き換えていきます・・・
これは機械的なので簡単です。

次は、横幅を狭めます。
まず、CSS から width をしている箇所を探します。
・・・テーマの CSS 以外にも base_theme.css にも設定箇所があります。テーマの変更だけで幅が変わるようにしたいので、ベースで指定がある箇所でテーマ側に無い箇所は追加することにします・・・
これも、ある程度は機械的に進めることができます。

幅を詰めると、やはり旧版のように余白は濃い色の背景にしないと間抜けな気がします。あと、サイドのメニュー部分の背景色や見出しの部分の色も変えたいところです。
これは、さすがに HTML のほうの構造を把握しないと厳しい作業です。やはり眺めるだけではつかめないので、適当な箇所の背景を赤くしてみて何処があたるかを確認したりしながら進めていきます・・・

・・・

・・・OK。そこそこ元のデザインに近い感じになったので、管理画面から登録できるようにします。
まず、選択用のサムネイル画像を作成するためにスクリーンショットを撮って、GIMP でサイズを 120x90 と、278x209 に変更して、GIF 形式で保存。thumbnail.gif と、thumbnail-large.gif という名前で CSS のディレクトリにコピーしておきます。

これで準備完了なので、MT の管理画面からスタイルの選択を実行して、(+) アイコンから、URL を指定して追加します。

http://morishoji.homelinux.net/mt-themes/MapleGreen/maple-green.css

さっき作成したサムネイルが表示されました。
選択してみます・・・既に確認用に適用されていたので、ぱっと見は変化はないですが、styles.css は、ダウンロードして保存した方を使用するように変わっているようです。

OK。長くなったので、テンプレートの変更は次回にすることにします・・・