タイトルバナーを変更する
さぁ、いよいよ(?)デザインの変更開始!
まずは、タイトルバナーに画像を表示させましょう♪
はじめに、画像の用意。
サイズを決めて、Photoshopで710px×150pxのバナーを用意しました。
(サイズは自由)
画像ができたら、CSSファイルのあるフォルダにFTPでアップロード
UPできたら、CSSのレイアウト。
赤字の部分を追加します。
#banner {
width: 710px; /* necessary for ie win */
background-image: url("画像ファイル名");
background-position: left top;
background-repeat: no-repeat;}
アップロードが完了したら、リロードしてみましょう。
バナー部分の画像が変わっていたら成功!
タイトルやサブタイトルのカラーやフォントサイズも画像に合わせて変更すればなおGOOD♪
ヘッダータイトルは
#banner-header {
margin: 0;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-shadow: #36414d 0 2px 3px;
}
サブタイトルは
#banner-description {
margin-top: 5px;
margin-bottom: 0;
color: #666;
background: none;
font-size: 12px;
font-weight: bold;
line-height: 1.125;
text-shadow: #36414d 0 1px 2px;
}
赤字の部分を変更すればOK。
