PR

デザインのカスタマイズ

2009年3月23日(月)
NORI(伊藤のりゆき)

ほかの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要素、今は、「

」が選択状態で、右下には、そこに影響しているCSSの設定が、どのファイルの何行目かまで示されます。

 例えば、背景色はこの要素で設定されているわけではなく、さらに上の階層になるセレクタで設定されているようなので、左下のウィンドウで「セレクタを対象とするCSS設定に切り替わります。

 セレクタのbackgroundプロパティの値で背景を「#293251 url(body.gif) repeat-y scroll center top」と指定していました。背景を真っ白にしたい場合は、「#293251」を「#FFFFFF」とし「url(body.gif) repeat-y scroll center top」を削除します。

 すると、backgroundプロパティは「#FFFFFF none repeat scroll 0 0」と変化し、表示されている画面の見た目も、背景色が真っ白に変わります。

 これは、Firebugがテスト表示しているだけで、まだ実際にCSSファイルには反映されていませんので、リロードし直せば元に戻ります。

 変更を確定する時は、テンプレートの該当CSSファイルを開いて修正し「保存と再構築」をしておきます。
著者
NORI(伊藤のりゆき)
有限会社トゴル・カンパニー(http://togoru.net/)代表、ロクナナワークショップ講師(http://67.org/ws/instructor/nori.html)。ロクナナワークショップでは「NORIのFlashユーザーのためのMovable Type講座(http://67.org/ws/workshop/detail/060mt.html)」など、主にFlash+αを担当。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています