タイトルバナーの雰囲気が変わるだけで、サイト全体の雰囲気が変わってきます。
文字色や背景色を変更するだけでも、ちょっとしたイメージチェンジになるものです。
ということで、変更してみましょう。
デザインのみの変更のときは、スタイルシート(styles-site.css)を修正します。
その前に、HTML(メインページ等)で、タイトルバナー部分のタグを確認しておきましょう。
デザインが関係しているタグが4箇所ありました。
id="banner"
id="banner-inner"
id="banner-header"
id="banner-description"
スタイルシート(styles-site.css)を開き、検索機能を使ってそれぞれのスタイルを探して、背景や文字に関係しそうなところを変更していきます。
#banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; }
まずこれが、タイトルバナーの文字のリンク表示の仕方を指定している部分です。
color: #fff; ⇒文字色に「白(#FFF)」が指定されています。
ネット上を探せば色見本が出てきますので、参考にしながら好きな色に変更してください。
text-decoration: none; ⇒文字飾りは「なし」のままで、変更する必要はありません。
※色見本の参考 ⇒ とほほの色入門・色見本
#banner { width: 710px; /* necessary for ie win */ background: #a3b8cc; }
続いてこれが、背景色を指定している部分です。
先ほど同様、色見本を参考に、「#a3b8cc」を好きな色に変更します。
#banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #36414d 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; font-weight: bold; line-height: 1.125; text-shadow: #36414d 0 1px 2px; }
ここは、ブログ名(banner-header)とブログ概要説明文(banner-description)のスタイルを指定する部分です。
「color: #fff;」のところは、先ほどと同じ文字色に揃えておきましょう。
文字の大きさは、「font-size: ○○px;」の数字を変更すれば変わります。好きな大きさに変更しましょう。
これで保存&再構成(S&R)して、どんな風に変わったか確認してみてください。