今度は2枚の画像を上下に配置してみます
上用の画像と下用の画像の2枚を用意します
この画像はポカポカ色 さまよりの借り物ですからお持ち帰りは禁止です
他にもほっとするようなイラストがたくさんあります
しかも加工もOKな素敵な素材サイトさまです
今回の画像は素材の中のテーブルからさがしました・・・
ＣＳＳです
/*メッセージボード*/
.skinMessageBoard{
background-image:url(上の画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center top;
border:none;/*上下の点線を消す*/
}
.skinMessageBoard2{
background-image:url(下の画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center bottom;
}
.skinMessageBoard3{
padding:100px 30px 70px 30px;/*文字位置上Ａ 右Ｂ 下Ｃ 左Ｄ*/
color:#333333;/*文字色*/
}
たとえば・・
上の画像に1ポイントの画像を使ってみると・・・
/*メッセージボード*/
.skinMessageBoard{
background-image:url(1ポイント画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:320px top;
border:none;/*上下の点線を消す*/
}
.skinMessageBoard2{
background-image:url(下の画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center bottom;
}
.skinMessageBoard3{
padding:10px 70px 70px 30px;/*文字位置上Ａ 右Ｂ 下Ｃ 左Ｄ*/
color:#333333;/*文字色*/
}
あるいは下の画像だけとか・・
メッセージボードの背景（1枚の画像で）
メッセージボードの背景（2枚の画像で）
メッセージボードの背景（3枚の画像で）
いろいろな方法で楽しいメッセージボードを作ってくださいな
