メイン画像を変更するには？
テンプレートの１〜６のサンプルを見て頂くとわかりますが、これらのテンプレートにはどれも画面上部に メインとなる画像を配置しています（サイズは横800px／縦60px）。 これらのデザインが「どーしても気にくわない！」という方は画像を変更したり、 または画像を取っ払って一色で表現できたりすることができます。
では、このメイン画像を違う画像に変えたり 画像自体をなくしてしまうにはどのようにすればいいでしょうか？
ダウンロードしたデータには必ず「style.css」というスタイルシートが書かれているファイルがありますので、 そのstyle.cssを開いて「headder」の部分を修正することで変更が可能です。 「headder」はどのテンプレートでもＣＳＳファイルの上の方にあると思います。
＊「headder」のように特定の文字を探す時になかなか見つからないときは、キーボードの「ctrl」＋「F」で検索機能を使うと探しやすいです。
- style.cssを開く
- 「headder」を探す
実際にテンプレート１のstyle.cssを開いて「hedder」を修正してみましょう！
#headder {
width:805px;
height:160px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
background-image: url(image/t001.png);
}
headder部分を見るとわかりますがオレンジ色の部分が画像を指定しているタグです。 ここで画像の指定を変更すれば別の画像が表示されることになります。
background-image: url(image/●ここ修正すると画像が変わる、画像のＵＲＬを入れよう●);
もちろん修正する場合、サイズが横800px、縦160pxの新しい画像が必要になります。 あたりまえですが画像がないと修正できないので注意してください。 テンプレート１〜６までは全て同じサイズの画像を使っていますのでテンプレ１〜６同士のあいだであれば いくらでも変更が可能です。今後、画像のカスタマイズができるように追加していく予定ですが未定です。
とりあえず画像だけとってしまいたい場合は・・・
「画像のデザインがいけてないから、まず画像だけとってしまいたい！」という場合はどうしたらいいでしょうか。 やはり上と同じくheadderの部分をいじくります。
#headder {
width:805px;
height:160px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
background-image: url(image/t001.png);
}
まず「background-image: url(image/t001.png);」の１行を削除してしまいます。 そうすると画像の部分がなくなって背景が真っ白になると思うんですね。 真っ白だとバランスが悪いですから、この場合なにか色を入れたいんじゃないでしょうか？
そのときに入れるタグが下の１行です。
background-color: #F4EEA2 ;
バックグラウンドカラーのタグです。右側の「#F4EEA2」が色を指定しています。 色は数字６文字の部分を変えればいろいろ変化します。 カラーリファレンスを参考にしてください。
以上の要領で背景の画像を変更したり、背景色の色を指定できたりします。