『CSS メッセージボード4』

今回は　◎aporo◎ 　さまにお借りした画像を使ってメッセージボードをオリジナルにしてみます

↑このような画像で　↓このようなメッセージボードになります

↓メッセージが増えても大丈夫・・・　背景を作り直す必要はありません

最初のような画像を作ってから加工をします

2つに分けます

最初の画像を作るときに繰り返す部分を考えて画像を作ってください

上の画像が短いと・・・

メッセージが長くなった場合に途中の背景が

なくなって切れてしまいますので注意してください

上の画像と下の画像・・・

場合によってはメッセージの中に配置するワンポイントも作って

画像フォルダにアップします

↓この素材はaporoさまが配布されています

　※aporo※さまの素材があるのはコチラです

おまけでワンポイントの画像も使ってみます・・・・

みゅーさまもメッセージボード用に素材を配布していただいています
コチラです

↓コチラの画像の加工済みの素材があります

※素材の画像は画像の上で右クリック→名前をつけて保存　で適当なところに保存して、

　自分のブログの画像フォルダにアップしてから使ってください

画像を用意してからCSSの最後に・・・

#message {
margin:0;
padding:0;
border:none;
background-image:url(上画像のURL);
background-repeat:no-repeat;
background-position:left top;
}
#message .contents{
margin:0;
padding:0;
border:none;
background-image:url(下画像のURL);
background-repeat:no-repeat;
background-position:left bottom;
}
#message .subContents{
padding:135px 50px 100px 50px;/*上、右、下、左*/
background-image:url(ワンポイント画像のURL);
background-repeat:no-repeat;
background-position:30% 40%;/*左から、上から*/
}