CSS メッセージボード3

今回は 上と下に画像を 配置してメッセージボードを飾る方法です

前回紹介した方法 で上と下にイラストのある１枚の画像を使っても出来ますが

それですとメッセージの範囲が画像の中でしか書けません

上と下を別にしてメッセージの行数に関係なくメッセージの上と下に配置されるようにします

上の画像

下の画像

ワンポイント画像

ポカポカ色 さまの画像をお借りして説明しています

再配布禁止ですので当ブログよりのお持ち帰りはご遠慮ください

画像を用意してから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:100% 30%;/*左から、上から*/
}

#message .subContentsの中のpadding:135px 50px 100px 50px;/*上、右、下、左*/は

メッセージの表示範囲を決めます

・・・・改行とかスペースでも位置を変更できますがある程度は決めておいた方が楽です

みなさまの画像を見ながら決めてください

※ワンポイント画像は必要がなければ入れなくてもいいです

　その場合は　#message .subContents{
　　　　　　　padding:135px 50px 100px 50px;/*上、右、下、左*/
　　　　　　　}

　　　　　　　　だけでかまいません

　上画像だけあるいは下画像だけでもかまいません

　工夫して自分だけのメッセージボードを作ってください

次回は画像枠を使う方法です


◎aporo◎　さま 、みゅー　さま 　お二人にお借りした画像を使って説明します

ポカポカ色 さまの画像をお借りして説明しています

再配布禁止ですので当ブログよりのお持ち帰りはご遠慮ください

注意・・・・
素材サイトの中には加工を禁止している場合があります
そのサイトの利用規約をよく読んだ上で利用してください

CSS メッセージボード
http://ameblo.jp/exlink/entry-10157242632.html

CSS　メッセージボード2
http://ameblo.jp/exlink/entry-10157975843.html

CSS メッセージボード4
http://ameblo.jp/exlink/entry-10158874915.html