次は実際に修正してみます。CSSのどこをどのように直せばきちんと反映するのかをFirebugで確認してから、実際のファイル(style/screen.css)に該当するテンプレートの該当個所を探して、記入し直します。「保存と再構築」をしたCSSファイルは、トップページをリロードすれば確認できます。ヘッダーバナーをオリジナルの画像に交換しましょう。Firebugを使って、ヘッダーバナーの画像に使用されているファイル名やサイズ、背景色などを調べます。オリジナルの状態では、次のようになっています(コードはインデント用に全角のスペースが入っています)。bottom;border-color:#8E3B03;}この時、header.pngの上にカーソルを持っていくと、サムネイルとともに、サイズ(940x191px)が表示されるので、それを元に、差し替え画像を作成します。このurlプロパティによると、header.pngはstyleフォルダにあるため、そのファイルを上書きしました(画像はFTPする必要があります)。同様に、ヘッダーバナーに合わせてフッターの色も変更してみましょう。Firebugで調べると、次のところの色が影響しているのがわかりますので、CSSファイルを変更します。行目)background-color:#8E3B03;}いかがでしょうか?左右の背景色、ヘッダーバナーとフッターの変更だけでも、ずいぶんとイメージが変わったのではないかと思います。ブログを印象づける各タイトルの背景色やタイトルの背景などを変更していきます。エントリータイトルのリンク色を変更heder.pngの色を暗いものにしたため、ブログ名のテキストが見づらくなってしまったので、それを変更します。同時にトップページからそれぞれのブログ記事へリンクしているテキストリンクの色を変更してみましょう。現状では、ブログ記事タイトルのリンクは、通常時がオレンジ色、マウスオーバーで、下線が出現となっています。リンクのクリック前とクリック後では変化がありません。CSSで設定できるのは、訪問前リンク、マウスオーバー、クリック、訪問済みリンクの4つです。それぞれ、どこが有効になっているのかを調べます。ブログ名は、#header-nameですが、リンクテキストになっているところに注意します。行目)color:#083C54;font-weight:bold;}ブログ名のすぐ下にある解説文は、次の個所になります。pgothic",sans-serif;font-weight:bold;}また、ブログ記事のタイトルは、次の個所が影響しています。行目)outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;}そのほかにも、いくつか修正できるところがありますので、変更すると良いでしょう。top;}今回は、デザインのカスタマイズということで、CSSファイルをテンプレートに設定してMTで管理する方法を紹介しました。トゴル・カンパニー(http://togoru.net/)代表、ロクナナワークショップ講師(http://67.org/ws/instructor/nori.html)。Type講座(http://67.org/ws/workshop/detail/060mt.html)」など、主にFlash+αを担当。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。