『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でカスタマイズ、オリジナルなスキンに挑戦！