デザインのカスタマイズ
ヘッダーバナー、フッターを修正
次は実際に修正してみます。CSSのどこをどのように直せばきちんと反映するのかをFirebugで確認してから、実際のファイル（style/screen.css）に該当するテンプレートの該当個所を探して、記入し直します。
「保存と再構築」をしたCSSファイルは、トップページをリロードすれば確認できます。
では、ヘッダーバナーをオリジナルの画像に交換しましょう。まず、Firebugを使って、ヘッダーバナーの画像に使用されているファイル名やサイズ、背景色などを調べます。
オリジナルの状態では、次のようになっています（コードはインデント用に全角のスペースが入っています）。
#header {screen.css (176 行目)
background:#77DBFE url(header.png) no-repeat scroll left bottom;
border-color:#8E3B03;
}
この時、header.pngの上にカーソルを持っていくと、サムネイルとともに、サイズ（940x191px）が表示されるので、それを元に、差し替え画像を作成します。
このurlプロパティによると、header.pngはstyleフォルダにあるため、そのファイルを上書きしました（画像はFTPする必要があります）。
同様に、ヘッダーバナーに合わせてフッターの色も変更してみましょう。
Firebugで調べると、次のところの色が影響しているのがわかりますので、CSSファイルを変更します。
#footer {screen.css (370 行目)
background-color:#8E3B03;
}
いかがでしょうか？
左右の背景色、ヘッダーバナーとフッターの変更だけでも、ずいぶんとイメージが変わったのではないかと思います。さらに、ブログを印象づける各タイトルの背景色やタイトルの背景などを変更していきます。
エントリータイトルのリンク色を変更
heder.pngの色を暗いものにしたため、ブログ名のテキストが見づらくなってしまったので、それを変更します。同時にトップページからそれぞれのブログ記事へリンクしているテキストリンクの色を変更してみましょう。現状では、ブログ記事タイトルのリンクは、通常時がオレンジ色、マウスオーバーで、下線が出現となっています。リンクのクリック前とクリック後では変化がありません。
CSSで設定できるのは、訪問前リンク、マウスオーバー、クリック、訪問済みリンクの4つです。それぞれ、どこが有効になっているのかを調べます。
まず、ブログ名は、#header-nameですが、リンクテキストになっているところに注意します。
#header a {screen.css (181 行目)
color:#083C54;
font-weight:bold;
}
ブログ名のすぐ下にある解説文は、次の個所になります。
#header-description {screen.css (202 行目)
color:#083C54;
font-family:"century gothic",futura,arial,helvetica,"hirakakupro-w3",osaka,"ms pgothic",sans-serif;
font-weight:bold;
}
また、ブログ記事のタイトルは、次の個所が影響しています。
.asset-name, .asset-name a, .archive-title {screen.css (222 行目)
color:#F06304;
}
.asset-name a {screen.css (58 行目)
text-decoration:none;
}
a {blog.css (48 行目)
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
そのほかにも、いくつか修正できるところがありますので、変更すると良いでしょう。
・リンクテキストの色
a:link, a:visited {blog.css (213 行目)
color:#FF0000;
text-decoration:underline;
}
・本文の色
body {screen.css (141 行目)
color:#333333;
}
・ウィジェットのタイトルの背景
.widget-header {screen.css (268 行目)
background:#9DD4B4 url(widget-header.gif) repeat scroll left top;
}
今回は、デザインのカスタマイズということで、CSSファイルをテンプレートに設定してMTで管理する方法を紹介しました。さて、次回は、MTを拡張可能にするプラグインについて紹介します。
【参考文献】
「ブログのスタイルを選択する 」（http://www.movabletype.jp/documentation/stylecatcher.html）（アクセス：2009/02）
「次世代ブラウザ Firefox | 高速・安全・自由にカスタマイズ | 人気ブラウザ無料ダウンロード」（http://mozilla.jp/firefox/）（アクセス：2009/02）
「Firebug :: Firefox Add-ons」（https://addons.mozilla.org/ja/firefox/addon/1843）（アクセス：2009/02）
「Cascading Style Sheets - Wikipedia」（http://ja.wikipedia.org/wiki/Cascading_Style_Sheets）（2009/02）
