デザインのカスタマイズ

ほかのCSSファイルもテンプレートとして登録

　次は、前ページで複製しただけのスタイルシート（blog.css、screen.css）をテンプレートに登録しましょう。

　style.cssからimportするスタイルシートは、ブログの管理者でもMTからは編集できないようになっています。しかし、これではローカルで修正・保存し、再アップロードという作業が毎回発生して面倒です。そこで、直接編集できるようにMTのインデックステンプレートに登録します。

　まず、ブログを開いてから「style/blog.css」をアドレスバーに打ち込めば、そのCSSファイルが表示されます。すべてをコピーしてから、MTの管理画面に戻りインデックステンプレートで新規テンプレートとして作成・ペーストします。

　テンプレート名を「blog.css」、出力ファイル名「style/blog.css」、テンプレートの種類「カスタムインデックステンプレート」で保存し、再構築します。すると、すでにある「style/blog.css」を上書きします。

　blog.cssを修正したい時は、MT管理画面のインデックステンプレートで修正し「保存と再構築」を実行します。

　ところで、blog.cssには、2カ所だけ「../images/～」と相対パスで指定しているところがあります。このままでは、パスが正しく通っていないので、パスを直す必要があります。ここでは、絶対パスに直します。

　「../」は、blog.cssが元配置してあったフォルダを指していますが、そこはmt-staticというMTにとっては特別なフォルダのため、そのフォルダの絶対URLを返すという関数が用意されています。そこで、「../images/」の「../」をファンクションタグに置き換え「images/」とします。

　このCSSファイルはインデックステンプレートから書き出されるため、MTタグは出力時に適切な内容に置き換えられます。

　blog.cssと同じ手順で、もう1つのCSSファイル「screen.css」も、インデックステンプレートに登録します。

　MTでは、再構築で出力できるファイルの形式がテキストであれば、どんなフォーマットであっても可能なので、徹底的にテンプレートで管理するという方法が取れます。MTに登録したテンプレートは、データベースに内容が残るため、ファイルが失われても再構築すれば、元通りに復元できるというメリットがあります。

　さて、次に実際にツールを使ってCSSを調べ、書き直して、デザインに反映という作業にはいります。その時、2つのCSSファイルを修正する場合は、インデックステンプレートで修正し「保存と再構築」を行っていきます。

CSS編集の準備

　複雑な構成のCSSを編集する際には、WebブラウザのFirefoxとFirebugというアドオンを使用します（図2-2）。この2つは、複雑なhtml内のdiv構成を把握し、どの部分のCSSが影響しているのかを調べたり、テストができるツールです。

　Firefoxとアドオンをインストールしたら、Firefoxで編集したいページを開きます。内容を確認したいところを右クリックしコンテキストメニューから「要素の確認」を選択します。すると、右クリックした部分に該当するhtml要素とCSSファイルの定義が出てきます（図2-3）。

　CSSは、定義がカスケードしているため、どこを直せば、確実に反映するのかもわかりにくいですが、Firebugではカスケード状態もいっしょに表示してくれます。さらに、定義が実際に変更されるとどのように反映されるのかを確認できます。では、実際に確認してみましょう（図2-4）。

　ブログのトップページの、背景色は紺色になっています。そこを右クリックしてコンテキストメニューを出したら「要素の確認」を選択します。

　すると、左下のウィンドウには、右クリックした直下のhtml要素、今は、「