ＭＴ（Movable Type）#0023
・・‥…━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
毎日２分！これであなたもＭＴ（Movable Type）マスター 05/10/13
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…‥・・
さ～て、本日のお題は？
■バナーを画像（写真）にしよう！
お待たせの実践編（笑）
忘れたあなたのために、画像アップは10月7日の記事に追加しました～。
→ http://mt-master.net/mag-/before.html
テンプレート＞スタイルシート
ーーーーー
#banner { （←バナーに関する指定）
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #3e2100;（←# の数字は人により違いますよ）
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}
ーーーーー
今日のポイントは【background】
ーーーーー
background-color: #3e2100;
ーーーーー
↓
ーーーーー
background: url(http://mt-master.net/mag/img/2min-ban.gif);
ーーーーー
に置き換えましょう。
url のかっこの中は画像を置いてあるアドレスなので7日の記事の
『窓にソースが出るので、エントリーへコピペ。』を参照して、コピペして
ちょんだいな(^^)ノ
↓わたしの変更後
ーーーーー
#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background: url(http://mt-master.net/mag/img/2min-ban.gif);
text-align: left;
padding-top: 50px;
border-bottom: 1px solid #FFFFFF;
height: 100px;
}
ーーーーー
『padding-top: 50px;』
これは文字（毎日２分！…）の位置を調整
『height: 100px;』
こっちはバナーの画像全体を表示するための指定
バナーの画像が切れてしまうときは、『height: ●px;』の数字を変えてみ
てネ(^^)
【変更前】 http://mt-master.net/mag-/before.html
↓
【変更後】 http://mt-master.net/mag-/after.html
ちなみにわたしの爽やかなイメージにあわせて、背景色やリンク文字色など
全体を変えてみましたーっ♪