« #0022 | top page | #0024 »

MT(Movable Type)#0023

・・‥…━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  毎日2分!これであなたもMT(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;』
これは文字(毎日2分!…)の位置を調整

『height: 100px;』
こっちはバナーの画像全体を表示するための指定


バナーの画像が切れてしまうときは、『height: ●px;』の数字を変えてみ
てネ(^^)


【変更前】 http://mt-master.net/mag-/before.html
  ↓
【変更後】 http://mt-master.net/mag-/after.html


ちなみにわたしの爽やかなイメージにあわせて、背景色やリンク文字色など
全体を変えてみましたーっ♪

« #0022 | 最上部へ | #0024 »

 
SCRIPT>