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
CSS メッセージボード2
今回は背景画像です・・・・
このやり方は一般的ですでにやられている方もおられます
1枚の画像を背景に使います
簡単な方法ですが
メッセージを画像のサイズに合わせる必要があります
デザイン的には融通が利きますので
メッセージの文章などがすでに決まっていて
あまり変更する予定のない場合には良いと思います
画像は ばんそうこう さまよりお借りしました
※スタンダードの3カラムでしたら横幅は396px以内で作ってください・・・・
#message {
border:none;/*上下の点線を消す*/
background-image:url(画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に配置*/
}
#message .contents{
border:none;
color:#ffffff;/*文字色*/
padding:20px 20px 20px 20px;/*上右下左に20pxの余裕*/
}
padding:20px 20px 20px 20px;/*上右下左に20pxの余裕*/は画像によって変えてください
そのあと・・・
アメブロの基本設定→メッセージボードへメッセージやバナーなどを配置していきます
背景画像を見ながら改行とスペースを入れてピッタリくる位置にします
画像と文字の配置を工夫して素敵なメッセージボードを作ってください
次回 は点線の変わりに画像を使ってみます
CSS メッセージボード
http://ameblo.jp/exlink/entry-10157242632.html
CSS メッセージボード3
http://ameblo.jp/exlink/entry-10158428512.html
CSS メッセージボード4
http://ameblo.jp/exlink/entry-10158874915.html
プレッシャーです・・・・
メッセージボード・・・・
みなさま期待されてるようで・・・・・
冷や汗物です
イラストが描けない私にとって・・・・
やっぱし・・・
記事枠やコメント欄と同じような物しか出来ません・・・・
頭の中ではこんな風に・・・・みたいなものもぼんやりとはあるのですが
それを見えるように出来ません
マジ・・・こまった・・・・
もし・・・メッセージボードの背景用にすでに画像を用意されていて
シャーナイから貸してやっても良いよ・・・って
貸していただけるかたがおられましたらプチメに画像のＵＲＬを書いて送ってください
記事中でリンクつけて紹介させていただきます
説明に使いやすい画像でしたら使わせていただきたいと思っています
形としては記事枠・コメント欄と同じでかまいません
画像を切ったりする加工はこちらでやります
よろしくお願いします
※今度のメッセージ枠は文字数が増えましたので記事枠のように
内容、行数によって伸びたりできるデザインでないとまずいんです・・・・