CSS メッセージボード3
今回は 上と下に画像を 配置してメッセージボードを飾る方法です
前回紹介した方法 で上と下にイラストのある1枚の画像を使っても出来ますが
それですとメッセージの範囲が画像の中でしか書けません
上と下を別にしてメッセージの行数に関係なくメッセージの上と下に配置されるようにします
上の画像
下の画像
ワンポイント画像
ポカポカ色 さまの画像をお借りして説明しています
再配布禁止ですので当ブログよりのお持ち帰りはご遠慮ください
画像を用意してから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